码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS-chapter1-2-四大特性

时间:2016-11-06 14:00:04      阅读:370      评论:0      收藏:0      [点我收藏+]

标签:image   更新   9.png   directive   告诉   效果   dir   idt   运行   

4大特性

技术分享

MVC

 技术分享

 

    MVC实例  数据模型,控制器,视图

    HelloAngular_MVC.html

    技术分享

    图中的 ng-controller="HelloAngular"  定义了HelloAngular这个controller

 

 

    HelloAngular_MVC.js

    技术分享

    对应的HelloAngular_MVC.js 中定义了一个function为对应的controller

 

     运行效果

    技术分享

 模块化

   可以看到上面的 HelloAngular controller是定义了一个全局的function函数,

   有些大牛经常会告诉我们不要定义一些全局的变量/函数,不要去污染全局空间。用angularJS的模块化来处理。

  HelloAngular_Module.html

  技术分享

   HelloAngular_Module.js

  技术分享

   第1行通过 angular.module定义了一个名为 “HelloAngular”的模块

   第2行为此模块定义了名为‘helloAngular’的控制器,通过这样的写法,就把我们的代码边的模块化了,不再用全局的函数去作为控制器

  

 技术分享

 

   

      AngularJS中的一切都是从模块开始的

  

   特性3指令系统

    技术分享

     指令例子:

    HelloAngular_Direcive.html

    技术分享

    第7行的 <hello>标签

 

 

    HelloAngular_Directive.js

    技术分享

 

    特性4双向数据绑定

    技术分享

 

    技术分享

      双向数据绑定:视图和数据是对应的,当视图上的内容发生变化时对应的数据模型也会立即发生变化,当数据模型发生变化时,视图自定进行更新。

      在html中,有什么样的视图会发生变化呢?最常见的就是表单了(在表单的input输入数据。。)

   

    技术分享

      双向数据绑定例子:

      技术分享

       {{}} 是取值表达式,和el的表达式${} 作用类似

      

AngularJS-chapter1-2-四大特性

标签:image   更新   9.png   directive   告诉   效果   dir   idt   运行   

原文地址:http://www.cnblogs.com/q95265/p/6034987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!