AngularJS特别钟带你入门angular

angular是为啥的

它能够轻松营造SPA(单一页面应用程序)

  1. 唯有一个页面(整个应用的载体)
  2. 剧情全方位是由ajax格局显示出来的

传统的网页开发:会有广大页面放在服务器端,比如说log-in.html
,sign-in.html之类的
使用angular:唯有三个页面,比如说叫index.html,它只是三个空壳子。浏览器请求下载现在,页面怎么都尚未。在浏览器渲染的时候,里面包车型大巴脚本会在后台向服务器请求1些数码。所以,服务器里面是一批数据。
spa的好处:局地刷新,速度快,用户体验上有明显的浮动,减少请求大小(header
body曾经都是重新请求的),能够兑现古板格局不大概落到实处的职能(比如说博客园云的界面包车型客车,即便转跳了页面,然而依然能够播放音乐,这是因为audio表单未有更新)
AngularJS 1
原理是如此的:
AngularJS 2

并且呢,ng(Angularjs能够简写成ng)
还透过指令拓展了HTML,通过表达式绑定数据到HTML。

指令和表明式是ng里面格外重大的定义,使得js从dom操作中全然摆脱出来了,未来,js很少会直接用于dom操作
也正是说,document.getElementById()那种艺术,有不小可能率会淹没在历史的风尚中(个人观点哈)

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

何以引进

  1. 由此cdn的点子,就像是引进其余脚本壹样引进
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  2. 梯次 angular.js 版本下载:
    https://github.com/angular/angular.js/releases
  3. 固然你的电脑安装了nodejs,能够经过npm来设置,直接$npm install angular;
  4. 使用Bower来安装
    $bower install angular,但是那样只会把包安装在本土,不会写进配置文件中。先
    $bower init ,一路回车,然后bower install angular --save

先看三个例证

AngularJS 3
接下来结果是:
AngularJS 4
此处的新东西,分别是ng-app=""
{{5+5}},分别是angular的吩咐和表明式。

指令

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

内置的吩咐

ng-app 指令定义二个 AngularJS 应用程序,告诉 AngularJS
应用当前以此因素是根成分。

a.
这么些命令能够加在任何地方,body标签啦,p标签啦。那一个很实用,因为一张页面,大概唯有三个地点时要用angularjs来促成的,其余地方我不想用,那么就能够只在七个div上加上ng-app=””,不会潜移默化其余。

b. 全部 AngularJS
应用都无法不要同时只有1个根成分,全体被ng管理的代码,都不可能不包裹在ng-app中,能够被视为入口

c. HTML 文档中只同意有八个 ng-app 指令,假设有几个 ng-app
指令,则只有首先个会被应用。

ng-model命令把成分值(比如输入域的值)绑定到应用程序,
也被喻为双向数据绑定指令
成效正是,把近年来成分(你把ng-model写在何地,那里正是当下因素)的value值和ng表明式建立绑定
关系。
比如下边包车型大巴例子:
AngularJS 5
将会输出:
AngularJS 6

再譬如上边这么些例子:

AngularJS 7

幕后实际上是做了这么的思想政治工作:

执行到ng-model的时候,angular会创设2个数据模型,执行到“user.name”的时候,会成立三个指标,并且增加二个name的属性。并且把那几个name的质量,和写ng-angular的丰硕成分建立绑定的关系。

之所以那边的ng-model=“obj.name”起到了如此的效用:把value
和{{expression}}建立了双向绑定。
AngularJS 8
然后那里{{user.name}}做的业务是:
AngularJS 9
把她的竹签的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 成分
譬如上面包车型大巴代码:
AngularJS 10
会输出:
AngularJS 11
在下面那一个事例中,ng-repeat指令并不是重复了{{x}},而是重复了其所在的非凡标签,重复的个数,就是“x
in aa”中有微微个x的个数。不信请看下边:
AngularJS 12
“x in
a”在那之中的a不仅能够是数组,也足以是2个目的。当a是1个目的的时候,x是内部每叁个属性值。

再看二个关于ng-repeat例子,代码如下:
AngularJS 13
瞩目:x in a ; x 无法有重复的值,假使有双重的值,需求加tracked by
index(唯一且不另行的值)

Ng-class 用于给 HTML 成分动态绑定一个或多个 CSS 类。
譬如说,小编想在地方拾贰分例子,做成颜色交叉变色的功能,正是像这么:AngularJS 14

这便是说代码块不要Ng-class能够这么写:
AngularJS 15
此地是在表明式那里做了一个断定,ng-class在那之中二个用法就是以此:
ng-class=”{ class1:使用口径一,class二:使用口径一}”
也正是说,当使用规范1建马上,用class1的习性,当使用条件二确马上,用class2的脾性
AngularJS 16

再来一段代码:
AngularJS 17

创建自定义的指令,你能够采用 .directive
函数来添加自定义的指令。封装1些常用,共有的壹部分东西。Angular
对于dom的操作还有部分也许,那就是自定义指令。

在意:使用驼峰法来命名一个限令, runoobDirective, 但在选拔它时索要以 –
分割, runoob-directive。

代码如下:
AngularJS 18
其实,调用指令还足以经过成分名、类名和注释。上边的代码,写成这样也是能够的:
<shichen-jin></shichen-ijn>
<p class="shichen-jin></p> (此时restrict值必须设为 “C”,)
<!-- 指令: shichen-jin --> (此时restrict值必须设为“M”)

ng-src指令,覆盖了 成分的 src 属性,确定保障的 AngularJS
代码执行前不出示图片。当解析到imghtml的竹签时,会先访问url地址,而此时{{url}}还向来不解析好,所以会报错,而通过ng-src=””,则会先执行angular解析,然后再html解析

Ng -switch
AngularJS 19

地点,我们上学啊指令,上边,大家来讲表达式

表达式{{expression}}

controller(控制器)怎样将数据传递给view(视图)呢?表达式正是干的这些活,AngularJS
将在说明式书写的岗位”输出”数据。
比如说:
AngularJS 20

中间{{expression}}所在的岗位,正是数量要写入的岗位
AngularJS 表明式 很像 JavaScript
表明式:里面能够放数字、字符串、数组和对象;
放数字
AngularJS 21

放字符串
AngularJS 22

放对象:
AngularJS 23

放数组:
AngularJS 24

什么是mvc思想?

  1. 将应用程序的整合划分为四个部分:model 、view、controller
  2. 控制器的成效是初叶化模型用的;
  3. 模型是用来存款和储蓄数据的
  4. 视图是用来呈现数据

模块:

  1. angular很重点的一个风味是落到实处了模块化编制程序,大家得以经过以下的法子开创三个模块,对页面进行功效上的划分。
  2. 你能够把模块想象成乐高积木中的三个小积木,是应用程序中的最小单元。
  3. 可以将重复使用的指令只怕过滤器做成模块以便服用
  4. 概念2个myapp的模块: var myApp =angular.module(“myAPP”,[])
    //第2个参数是该模块重视的其余模块
  5. 在意:必须钦命第二个参数,否则是收获已经定义的模块

控制器:

控制器的语法

  1. 是因为控制器必须是在模块下的,要想创造控制器,必须先创立模块
    AngularJS 25
  2. 创设二个特定模块mymodule下的控制器,命名称叫mycontroller:mymodule.controlller("mycontroller",function($scope){……})
  3. 下面控制器的回调函数中,传递的参数只好是$scope$scope精神是一种效能域,数据必须挂在$scope下,才能在表现层中出现
  4. 然而实际上上边的做法是不引入的,理由:既然参数是$scope不可能变,因为依靠注入就考它,不过压缩代码的话,会把$scope变成a那样的简易字符,所以压缩代码后是会报错了。
  5. 故而注册控制器的标准写法是:mymodule.controller("mycontroller",["$scope",function(a){……}])
    也便是在本来控制器回调函数的地方,换到3个数组,数组前部是要传播的参数,数组最终贰个是回调函数。
  6. 尤其简明的写法是:
    AngularJS 26

控制器的职分:

  1. 为模型设置开首值
  2. 通过$scope对象把数据模型和函数行为暴露给视图(那两点在后天的例证中早已体现了)
    AngularJS 27

  3. 监视模型
    的变更,做出相应的一坐一起。angular的api提供了$watch的方法:
    AngularJS 28
    在上头那段代码中,当$scope
    作用域中的name产生变化时,会被$scope.$watch监听到,然后触发函数

相关文章