AngularJS颇钟带你入门angular

angular是怎么的

其好轻松构建SPA(单一页面应用程序)

  1. 单单发一个页面(整个应用的载体)
  2. 情节尽凡由ajax方式表现出的

传统的网页开发:会来广大页面在服务器端,比如说log-in.html
,sign-in.html之类的
使用angular:只有一个页面,比如说为index.html,它仅是一个空壳子。浏览器请求下载后,页面什么还无。在浏览器渲染的时节,里面的脚本会在后台向服务器请求一些多少。所以,服务器间是均等积聚数据。
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
应用还必要同时仅来一个根元素,所有为ng管理的代码,都必须包裹在ng-app中,可以让视为入口

c. HTML 文档中唯有同意发生一个 ng-app 指令,如果出多个 ng-app
指令,则只有首先单见面被运用。

ng-model命令把长素值(比如输入域的值)绑定到应用程序,
也被称双向数据绑定指令
功效就算是,把目前第一素
(你管ng-model写于乌,那里就是现阶段元素)的value值和ng表达式建立绑定
关系。
论下面的例子:
AngularJS 5
拿会输出:
AngularJS 6

再也比如下面是事例:

AngularJS 7

背后其实是召开了这么的政工:

实行到ng-model的时节,angular会创建一个数据模型,执行及“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不仅可是累累组,也可以是一个对象。当a是一个目标的时光,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:使用条件1,class2:使用原则1}”
也就是说,当使用标准1建立时,用class1的习性,当用规则2确立时,用class2的特性
AngularJS 16

更来平等段子代码:
AngularJS 17

创建自定义的指令,你可以动用 .directive
函数来上加于定义之通令。封装一些常用,共有的局部东西。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. 概念一个myapp的模块: var myApp =angular.module(“myAPP”,[])
    //第二独参数是拖欠模块依赖之任何模块
  5. 注意:必须指定第二只参数,否则是获得已经定义的模块

控制器:

控制器的语法

  1. 是因为控制器必须是于模块下之,要惦记创立控制器,必须事先创造模块
    AngularJS 25
  2. 创办一个一定模块mymodule产的控制器,命名也mycontroller:mymodule.controlller("mycontroller",function($scope){……})
  3. 点控制器的回调函数中,传递的参数只能是$scope$scope本质是同种作用域,数据必须挂在$scope下,才AngularJS会以呈现层中冒出
  4. 但实际上面的做法是免推荐的,理由:既然参数是$scope匪可知换,因为依靠注入就试它,但是压缩代码的话,会管$scope变成a这样的简单字符,所以压缩代码后是会报错了。
  5. 因而注册控制器的专业写法是:mymodule.controller("mycontroller",["$scope",function(a){……}])
    为尽管是于本控制器回调函数的职位,换成一个往往组,数组前部是要传的参数,数组最后一个是回调函数。
  6. 进一步简洁之写法是:
    AngularJS 26

控制器的天职:

  1. 呢模型设置初始值
  2. 通过$scope对象将数据模型和函数行为暴露于视图(这简单接触当昨天底例证中早就亮了)
    AngularJS 27

  3. 监模型
    的别,做出相应的作为。angular的api提供了$watch的方法:
    AngularJS 28
    于上面立段代码中,当$scope
    作用域中之name发生变化时,会被$scope.$watch监听到,然后触发函数

相关文章