开源中文网

您的位置: 首页 > AngularJs框架 > 正文

十分钟带你入门angular

来源: 网络整理  作者: 佚名

angular是干什么的

它可以轻松构建SPA(单一页面应用程序)

只有一个页面(整个应用的载体)
内容全部是由ajax方式呈现出来的
传统的网页开发:会有很多页面放在服务器端,比如说log-in.html ,sign-in.html之类的
使用angular:只有一个页面,比如说叫index.html,它只是一个空壳子。浏览器请求下载以后,页面什么都没有。在浏览器渲染的时候,里面的脚本会在后台向服务器请求一些数据。所以,服务器里面是一堆数据。
spa的好处:局部刷新,速度快,用户体验上有明显的变化,减少请求大小(header body曾经都是重复请求的),可以实现传统方式无法实现的功能(比如说网易云的界面的,虽然转跳了页面,但是仍然可以播放音乐,这是因为audio表单没有更新)


原理是这样的:



同时呢,ng(Angularjs可以简写成ng) 还通过指令拓展了HTML,通过表达式绑定数据到HTML。

指令和表达式是ng里面非常重要的概念,使得js从dom操作中完全解脱出来了,未来,js很少会直接用于dom操作
也就是说,document.getElementById()这种方式,有可能会淹没在历史的潮流中(个人观点哈)

Angular四个特性:MVC/模块化/自动化双向数据绑定/指令系统

如何引入

通过cdn的方式,就像引入其他脚本一样引入
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
各个 angular.js 版本下载: https://github.com/angular/angular.js/releases
如果你的电脑安装了nodejs,可以通过npm来安装,直接$npm install angular;
使用Bower来安装 $bower install angular,但是这样只会把包安装在本地,不会写进配置文件中。先 $bower init ,一路回车,然后bower install angular --save
先看一个例子



然后结果是:



这里的新东西,分别是ng-app="" 和{{5+5}},分别是angular的指令和表达式。

指令

Ng-app="" 这样的HTML属性,是以ng—开头的,他们被称为AngularJS 指令,可以用于拓展html,你可以用内置的指令,也可以用自定义的指令。

内置的指令

ng-app 指令定义一个 AngularJS 应用程序,告诉 AngularJS 应用当前这个元素是根元素。

a. 这个指令可以加在任何地方,body标签啦,p标签啦。这个很实用,因为一张页面,可能只有一 个地方时要用angularjs来实现的,其他地方我不想用,那么就可以只在一个div上添加ng-app="",不会影响其他。

b. 所有 AngularJS 应用都必须要并且只有一个根元素,所有被ng管理的代码,都必须包裹在ng-app中,可以被视为入口

c. HTML 文档中只允许有一个 ng-app 指令,如果有多个 ng-app 指令,则只有第一个会被使用。

ng-model指令把元素值(比如输入域的值)绑定到应用程序, 也被称为双向数据绑定指令
效果就是,把当前元素 (你把ng-model写在哪里,那里就是当前元素)的value值和ng表达式建立绑定 关系。
比如下面的例子:



将会输出:




再比如下面这个例子:



背后实际上是做了这样的事情:

执行到ng-model的时候,angular会创建一个数据模型,执行到“user.name”的时候,会创建一个对象,并且添加一个name的属性。并且把这个name的属性,和写ng-angular的那个元素建立绑定的关系。

所以这里的ng-model=“obj.name”起到了这样的作用:把value 和{{expression}}建立了双向绑定。



然后这里{{user.name}}做的事情是:



把他的标签的innerHTML属性和数据模型中的name属性绑定在一起。

所以ng-model 指令也可以:

a. 为应用程序数据提供类型验证(number、email、required)。

b. 为应用程序数据提供状态(invalid、dirty、touched、error)。

c. 为 HTML 元素提供 CSS 类。

d. 绑定 HTML 元素到 HTML 表单。

ng-bind 指令把应用程序数据绑定到 HTML 视图。效果和{{expression}}相同

ng-repeat指令会重复一个 HTML 元素
比如下面的代码:



会输出:



在上面这个例子中,ng-repeat指令并不是重复了{{x}},而是重复了其所在的那个标签,重复的个数,就是“x in aa”中有多少个x的个数。不信请看下面:



“x in a”其中的a不仅可以是数组,也可以是一个对象。当a是一个对象的时候,x是其中每一个属性值。

再看一个关于ng-repeat例子,代码如下:




注意:x in a ; x 不能有重复的值,如果有重复的值,需要加tracked by index(唯一且不重复的值)

Ng-class 用于给 HTML 元素动态绑定一个或多个 CSS 类。




比如说,我想在上面那个例子,做成颜色交叉变色的效果,就是像这样:

那么代码块不用Ng-class可以这样写:



这里是在表达式这里做了一个判断,ng-class其中一个用法就是这个:
ng-class="{ class1:使用条件1,class2:使用条件1}"
也就是说,当使用条件1成立时,用class1的属性,当使用条件2成立时,用class2的属性


再来一段代码:


创建自定义的指令,你可以使用 .directive 函数来添加自定义的指令。封装一些常用,共有的一些东西。Angular 对于dom的操作还有一些可能,那就是自定义指令。

注意:使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive。

代码如下:


事实上,调用指令还可以通过元素名、类名和注释。上面的代码,写成这样也是可以的:


ng-src指令,覆盖了  元素的 src 属性,确保的 AngularJS 代码执行前不显示图片。当解析到imghtml的标签时,会先访问url地址,而此时{{url}}还没有解析好,所以会报错,而通过ng-src="",则会先执行angular解析,然后再html解析

Ng -switch


上面,我们学习啦指令,下面,我们来讲表达式

表达式{{expression}}

controller(控制器)如何将数据传递给view(视图)呢?表达式就是干的这个活,AngularJS 将在表达式书写的位置"输出"数据。
比如说:


里面{{expression}}所在的位置,就是数据要写入的位置
AngularJS 表达式 很像 JavaScript 表达式:里面可以放数字、字符串、数组和对象;
放数字


放字符串


放对象:


放数组:


什么是mvc思想?

将应用程序的组成划分为三个部分:model 、view、controller
控制器的作用是初始化模型用的;
模型是用来存储数据的
视图是用来展示数据
模块:

angular很重要的一个特征是实现了模块化编程,我们可以通过以下的方式创建一个模块,对页面进行功能上的划分。
你可以把模块想象成乐高积木中的一个小积木,是应用程序中的最小单元。
可以将重复使用的指令或者过滤器做成模块以便服用
定义一个myapp的模块: var myApp =angular.module(“myAPP”,[]) //第二个参数是该模块依赖的其他模块
注意:必须指定第二个参数,否则是获取已经定义的模块
控制器:

控制器的语法

由于控制器必须是在模块下的,要想创建控制器,必须先创建模块


创建一个特定模块mymodule下的控制器,命名为mycontroller:mymodule.controlller("mycontroller",function($scope){……})
上面控制器的回调函数中,传递的参数只能是$scope,$scope实质是一种作用域,数据必须挂在$scope下,才能在表现层中出现
但是其实上面的做法是不推荐的,理由:既然参数是$scope不能变,因为依赖注入就考它,但是压缩代码的话,会把$scope变成a这样的简单字符,所以压缩代码后是会报错了。
所以注册控制器的标准写法是:mymodule.controller("mycontroller",["$scope",function(a){……}])
也就是在原来控制器回调函数的位置,换成一个数组,数组前部是要传入的参数,数组最后一个是回调函数。
更加简洁的写法是:


控制器的职责:

为模型设置初始值
通过$scope对象把数据模型和函数行为暴露给视图(这两点在昨天的例子中已经展示了)



监视模型 的变化,做出相应的行为。angular的api提供了$watch的方法:


在上面这段代码中,当$scope 作用域中的name发生变化时,会被$scope.$watch监听到,然后触发函数

Tags:钟带
相关文章列表:
关于开源中文网 - 联系我们 - 广告服务 - 网站地图 - 版权声明