如何安装和配置 AngularJS Eclipse

如何安装和配置 AngularJS Eclipse,第1张

1、将angularjs所需的.js文件复制到WebContent下

2、在网乎轿页中使用腔顷扒<script src="angular-1.1.0.min.js"></script>导入伍昌js文件即可

下载禅颤安装。官方网站:https://docs.angularjs.org/api

下载地址: https://angularjs.org/

Angularjs目录结构

最新版本是angular2.0,它与angular1.x区别比较大,我使用的版本是1.3版本。

在使用基本功能时,只需要导入angular.js或angular.min.js文件就可以。其它的js文件是angularjs拆分出来的功能,例如angular-route.js,它是关于路由的脚本文件,在1.2版本时,使用路由不需要单独专稿angular-route.js,而在1.3版本后,使用路径需要单独导入angular-route.js

AngularJS基本使用介绍

创建web项目(使用Hbuilder),并导入js文件。

angularJs它主要的核心特性:MVC模块化 数据绑定  语义化标签(指令)  依赖注入等

MVC

Mvc核心理念是:将管理数据的代码(model),应用逻辑代码(controller),展示数据的代码(view)分离开。

在angular应用中,视图就是DOM,控制器贺兆败就是JavaScript,而模型数据被存储在对象的属性中。猜盯

示例: Html代码

JS代码

双向数据绑定

在传统的js框架中,它是将html代码与数据混合在一起,在发送给用户在显示出来,而angular它可以将UI中某个部分映射到javascript属性上,然后让它们自己去同步,这就叫做数据绑定,查看以下代码:

模块化

在上述代码中,我在js文件中声明了一个全局的函数demo1Controller,在js的开发中是不建议定义全局的函数或变量的,它污染了全局空间,这种编码是不”优雅”的。在angular中我可以使用module(模块化来解决这个问题)

代码进行修改如下:Html代码

JS代码

依赖注入

在上述代码中,大家一定有一个疑问,就是我在js代码中使用的$scope它是由谁创建的,为什么我可以使用它?其实就全是依靠angular提供的依赖注入来完成的,依赖注入的概念我在学习spring中已经接触过,不过在前端开发中,这是我第一次使用依赖注入。

Angularjs中的注入一般分为三种:

推断式注入

显示注入(标注式注入)

行内注入(内联注入)

推断式注入

如果没有明确的声明,AngularJS会假定参数名称就是依赖的名称。因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例。

显示注入(标注式注入)

行内注入(内联注入)

先进入官网。官网首页就能够下载,点击箭头所示图标,下载所需文件。

点击以后d出选择对话框,如图所示,我们可以直接点击download图标,这时下载的就孙段只是基本文件,选择zip后我们能够将整个文件夹下载下来,这里随便自己喜欢。

下载完成以后,解压文件,开始准备写项目。如果下载的是单个文件,就不需要解压,下载的就只是angular.js文件,只需要直接饮用就可以了。

打开编辑器,创建一个新的项目,在项目中导入我们下载的文件,再创建一个新的文档:index.html。在文档中我们需要导入Angularjs库,这里我们可以看到出现了很多其他的文件,这些文件有各自的意义,以后再说明。

先导入如图所示的这行代码,Angularjs基本库已经导入了,说明我们可以开始使用它们。

开始测试是否成功。HTML样式在红色框中,事件直接写在该页面上源凯雹如蓝色框中所示。

Angularjs框架的最大不同就是每个web都有独立控制器,即controller,我们用它来控制整个页面框架的逻辑。用ng-app划定区域。这里雹帆体现了它的数据绑定的功能,{{message}},在控制器中获得赋值就立刻返回给页面显示出来。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12117580.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存