Angular 核心概念

module（模块）

做用

• 经过模块对页面进行业务上的划分,根据不一样的功能划分不一样的模块。
• 将重复使用的指令或者过滤器之类的代码作成模块，方便复用
• 注意必须指定第二个参数，不然变成找到已经定义的模块
  • 请参照资料-备课代码-20-module.html理解

语法

• 语法： angular.module('模块名',[])
  • 第二个参数是个数组,这个数组里的每个元素，是咱们当前模块依赖的其余模块
  • 注意: 即使咱们不依赖其余的模块，也须要传递一个空数组
    由于如是不传第二个参数的话，这个方法的做用就会变为获取一个名为"模块名"的模块对象
  • angular.module('myApp'),是获取一个名为myApp的模块对象。
  • 咱们须要给ng-app指令一个属性值，这个值就是咱们建立的模块名:
  • 告诉anuglar,如今由咱们本身建立的这个模块来管理页面。

controller（控制器）

做用

• 为应用中的模型设置初始状态
• 经过$scope对象把数据模型或者函数行为暴露给视图
• 监视模型的变化，作出相应的动做
  • 请参照资料-备课代码-24-watch.html理解

语法

• 控制器是经过模块对象来建立的:

  • 语法:

    var app = angular.module('模块名',[])
    app.controller('控制器的名字',function($scope){
      // 在这个function里写咱们具体想要执行的代码
      // $scope 就是用来存储咱们的数据模型.
    })

  • 咱们须要在页面上使用了数据模型的元素父级元素上加上ng-controller指令，并给这个指令一个属性值，这个值就是咱们建立的控制器名字。

控制器的注入方式

普通的定义控制器

var myModule = angular.module('myModule', []);
myModule.controller('DemoController', function($scope) {
  $scope.user = {
    name: 'world1111'
  };
});

安全的定义控制器（推荐）

• angular代码在压缩混淆的时候回被替换成特殊字符，这样就会产生找不到对象的问题
• 请参照资料-备课代码-07-controller2.html理解
• 代码混淆工具

面向对象的方式定义控制器(扩展)

• 请参照资料-备课代码-09-oo-controller.html理解

MVC 思想

什么是 MVC 思想

• 将应用程序的组成划分为三个部分：Model View Controller
  • 模型：数据处理
  • 视图：以友好的方式向用户展现数据
  • 控制器：业务逻辑处理
• 控制器的做用就是初始化模型用的；
• 模型就是用于存储数据的,作一些业务逻辑的操做。

• 视图用于展示数据

• 请参照资料-图片-03-富士康MVC类比图和04-MVC在代码中的应用理解

• 请参照资料-备课代码-22-register.html理解

用MVC构建应用的优点

• 剥离开视图和逻辑之间的关系，不管怎么修改dom操做都不用修改业务逻辑代码
• 请参照资料-备课代码-23-calc2.html理解

MVC思想总结

• 是一种设计思想，约定了程序的结构应该是怎样的，
• 每个组成原件都有一个明确的职责
• 提升代码的结构和可维护性提升

双向数据绑定

• 页面文本框的值改变，致使数据模型的值发生改变，
• 数据模型的值的改变，反过来致使页面文本框的值的改变，这种相互影响的关系，咱们起了个名词，叫做双向数据绑定。
• ng-model = ""

$scope

• 视图和控制器之间的数据桥梁
• 用于在视图和控制器之间传递数据
• 用来暴露数据模型（数据，行为）

ViewModel

• $scope 实际上就是MVVM中所谓的VM（视图模型）
• 正是由于$scope在Angular中大量使用甚至盖过了C（控制器）的概念，因此不少人（包括我）把Angular称之为MVVM框架，这一点却是无所谓，具体看怎么用罢了
• 你们必须掌握的就是如何根据一个原型抽象出对应的视图模型

表达式

相似于模版引擎的语法

做用：

使用表达式把数据绑定到 HTML。

语法：

• 表达式写在双大括号内：{{ expression }}。
• AngularJS 表达式很像 JavaScript 表达式
• 它们能够包含文字、运算符和变量
• 如 {{ 5 + 5 }} 或 {{ firstName + '-' + lastName }}
  • 请参照资料-备课代码-10-expression.html理解

支持的类型

• 数字 {{ 100 + 100 }}
• 字符串 {{ 'hello' + 'angular' }}
• 对象 {{ zhangsan.name }}
• 数组 {{ students[10] }}

与JS的比较：

相同点：

• AngularJS 表达式能够包含字母，操做符，变量。

不一样点：

• AngularJS 表达式能够写在 HTML 中。
• AngularJS 表达式不支持条件判断，循环及异常。
• AngularJS 表达式支持过滤器。

指令

• 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其做用就是为 DOM 元素调用方法、定义行为绑定数据等
• 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不一样，完成不一样操做

指令标准属性的问题

• ng-xxx 的属性自己并非HTML标准中定义的属性
• 不少状况下语法校验是没法经过的,可是浏览器有容错性。
• HTML5 容许扩展的（自制的）属性，以 data- 或者x- 开头。
• 在 AngularJS 中可使用 data-ng- 来让网页对 HTML5 有效。

• ng-和data-ng-两者效果相同。

• 请随便把example中的ng-app替换为data-ng-app理解

内置指令

ng-app

• ng-app 指令用来标明一个 AngularJS 应用程序
• 标记在一个 AngularJS 的做用范围的根对象上
• 系统执行时会自动的执行根对象范围内的其余指令
• 能够在同一个页面建立多个 ng-app 节点（不推荐）
• 建立多个ng-app时，默认只能执行第一个，后面的须要手动引导：angular.bootstrap()
• 标记的范围尽量小，这样能够减小遍历的dom元素，主要为了性能

自动引导

• 在angular中一个页面中只能有一个ng-app指令，这是单页面应用程序的入口,这属于自动引导
  • 请参照资料-备课代码-02-module.html理解

手动引导

• 若是想在一个页面中使用多个ng-app指令，须要进行手动引导
• 请参照资料-备课代码-03-mulit-module.html理解

多模块使用标准写法

• 请参照资料-备课代码-04--module2.html理解
• 请参照资料-图片-01--angular应用结构图理解

ng-model

• 用于创建界面上的元素到数据模型属性的双向数据绑定
• 通常状况绑定到元素的value属性上
• 可是在checkbox之类的表单元素会有不一样

ng-bind

• ng-bind和表达式效果相同,不过能防止闪动一下页面
• ng-bind上来是没有东西的，须要经过viewmodel或者ng-init初始化绑定的值
  • 请参照资料-备课代码-11-directive.html理解

ng-bind-html

• 能够把字符串中的html在页面中直接展现
• 不过在使用的时候会报不安全问题，缺乏引用的文件，须要引用第三方的包才能实
  • 请参照资料-备课代码-11-directive.html理解
• 现安全输出浏览器自动也会帮你处理一些安全问题的,不会执行或者输出不安全的代码，
  你在开发的过程当中要有意识的考虑攻击问题，想一下输出的会不会是可执行的代码，须要编码后再呈现。
  • 请参照资料-备课代码-12-html-safe.html理解安全问题

ng-repeat

• 循环输出页面内容
  • 请参照资料-备课代码-13-userful-directive.html理解
• 数据源是数组

var data = [
       /* beautify ignore:start */
       { id: 1, name: '詹三1', age: 118, gender: true },
       { id: 2, name: '詹三2', age: 128, gender: true },
       { id: 3, name: '詹三3', age: 138, gender: true },
       { id: 4, name: '詹三4', age: 148, gender: true },
       { id: 5, name: '詹三5', age: 158, gender: true },
       /* beautify ignore:end */
     ];

<ul ng-controller="MainController">
    <li ng-repeat="item in data">
      <p>
        <span>{{item.id}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </p>
    </li>
  </ul>

• 数据源是对象

var data = {
      /* beautify ignore:start */
      1: { name: '詹三1', age: 11, gender: true },
      2: { name: '詹三2', age: 12, gender: true },
      3: { name: '詹三3', age: 13, gender: true },
      4: { name: '詹三4', age: 14, gender: true },
      5: { name: '詹三5', age: 15, gender: true },
      /* beautify ignore:end */
    };

<ul ng-controller="MainController">
    <li ng-repeat="(id, item) in ps track by $index">
      <p>
        <span>{{id}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </p>
    </li>
  </ul>

• $index
  • ng-repeat中的索引

ng-class

• 决定某个样式是否添加
• ng-class={classname1:是否添加,classname2:是否添加}
  • 请参照资料-备课代码-14-ng-class.html理解

$apply

• 异步操做中的数据绑定不能及时监听到，让页面渲染，因此须要手动调用一下
  • 请参照资料-备课代码-15-loading.html理解

ng-cloak

• 自动给页面元素添加dispaly：none属性，当页面渲染完毕自动删除
• 最后你会发现直接把angularjs引用到最上面就不会有闪屏现象了，由于angularjs在页面渲染的时候已经执行了
  • 请参照资料-备课代码-16-ng-cloak.html理解

ng-show/ng-hide/ng-if

• ng-show和ng-hide是控制页面是否显示
• ng-if的做用是控制是否存在这个dom元素，若是值等于false会把页面中的元素注释
  • 请参照资料-备课代码-17-if-show-hide.html理解

ng-switch

• 根据value值决定页面中的哪部分显示
  • 请参照资料-备课代码-17-if-show-hide.html理解

ng-src

• 用于解决当连接类型数据绑定时候形成的加载问题
• ng-src指令会自动帮你把属性值赋值给src属性，相似于懒加载中的效果同样
  • 请参照资料-备课代码-18-ng-src-ng-href.html理解

其余经常使用指令

• ng-checked：
  • 单选/复选是否选中，只是单向绑定数据
  • 请参照资料-备课代码-19-ng-checked.html理解
• ng-selected：
  • 是否选中，只是单向绑定数据
• ng-disabled：
  • 是否禁用
• ng-readonly：
  • 是否只读

经常使用事件指令

不一样于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：

• ng-blur：
  • 失去焦点
• ng-change：
  • 发生改变
• ng-copy：
  • 拷贝完成
• ng-click：
  • 单击
• ng-dblclick：
  • 双击
• ng-focus：
  • 获得焦点
• ng-blur：
  • 失去焦点
• ng-submit：
  • 表单提交

第三方指令

• 网址：angular-ui.github.io