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
上一篇:用SSH登录局域网中使用网络设置为NAT的虚拟机中的linux


下一篇:Android开源项目汇总【转】