AngularJS学习

| 分类 Software  | 标签 博客 

初识AngularJS：

  • Angularjs通过创建实时模板来代替视图，而不是将数据合并进模板后更新DOM，任何一个独立视图组件中的值都是动态替换的。

数据绑定和第一个AngularJS Web应用：

  • 用法简单，只需引入Angular.js文件，并在某个DOM元素上明确设置ng-app属性即可，ng-app属性声明所包含的内容都属于这个Angularjs应用，这样我们就可以在web应用中嵌套Angularjs应用的原因，只有被具有ng-app属性的DOM元素包含的元素才会受到Angularjs影响。

模块：

  • AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。 angular.module(‘myApp’, []);
  • 带有属性ng-app的标签相当于一个模块，ng-app属性可以带属性值也可以不带，一个模块只允许加载一次，ng-app用来自动加载模块，bootstrap用来手动加载模块。 angular.module(‘appName’, []) angular.bootstrap(angular.element(“#divID”), [“divID”])

作用域：

  • $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文。
  • $scope对象的生命周期处理有四个不同阶段。
  • 创建：在创建控制器或指令时，AngularJS会用$injector创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去
  • 链接：当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中，这些作用域将会注册当Angular应用上下文发生变化时需要运行的函数。
  • 更新：当时间循环运行时，它通常执行在顶层$scope对象上(被称作$rootscope)，每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化，如果检测到任意变化，$scope对象就会触发指定的回调函数。
  • 销毁：当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。

控制器：

  • AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。由于AngularJS会负责处理控制器的实例化过程，我们只需编写构造函数即可。 AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

  • 控制器可以嵌套，相当于继承，子控制器可以获取父控制器的属性

表达式：

#####特性：

  • 1、所有表达式都在scope这个context里被执行，因此可以使用所有本地 $scope 中的变量。
  • 2、如果一个表达式的执行导致类型错误或引用错误，这些错误将不会被抛出。
  • 3、表达式里不允许任何控制函数流程的功能（如if/else等条件语句）

  • 4、表达式可接受一个或多个串联起来的过滤器。

  • $parse是一个表达式解析器，返回一个函数 app.controller(‘myController’,function($scope,$parse){}); $interpolate是一个带三个参数返回一个函数的服务 app.controller(‘myController’,function($scope,$interpolate){});

过滤器：

  • 过滤：currency，date，filter(字符串,对象,函数)，json，limitTo，lowercase，number，orderBy，uppercase,自定义过滤器
  • 表单验证：HTML5自带的表单验证使用很方便，只需给标签添加属性即可。
  • 必填项：required
  • 最小值：ng-minlength=”5”
  • 最大值：ng-maxlength=”20”
  • 正则：ng-pattern=”[a-zA-Z]”
  • 电子邮箱：
  • 数字：
  • URL：
表单属性：
  • user.name.$dirty(输入框使用了规则为True) 脏值检测
  • user.name.$pristine(输入框没有使用规则为True)
  • user.name.$invalid(是否验证未通过)
  • user.submitted(是否提交)
  • 错误信息(进行错误判断)

1.3版本以后新增了ng-messages属性， 相对于$error属性用起来会简洁一些 ng-message=”required”/ng-message=”minlength”

指令简介：

  • 自定义指令 语法： directive(‘myDirective’,function(){})。 种类：元素（E）、属性（A）、类（C）或注释（M） 在我们的例子中使用my-directive声明指令，根据驼峰命名法，指令定义必须以myDirective为名字。(hello)

  • 当前作用域：每个控制器都有自己的作用域，同时控制器可以嵌套，最内层的控制器可以通过当前$scope直接访问原型中的任意属性

指令详解：

  • directive：对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。指令中我们可以返回函数也可以返回对象。当返回一个函数时，这个函数通常被称作链接传递（postLink）函数，利用它我们可以定义指令的链接（link）功能。由于返回函数而不是对象会限制定义指令时的自由度，因此只在构造简单的指令时才比较有用。
  • priority：ngRepeat是所有内置指令中优先级最高的，设置为1000
  • template：如果模板字符串中含有多个DOM元素，或者只由一个单独的文本节点构成，那它必须被包含在一个父元素内templateUrl：默认情况下，调用指令时会在后台通过Ajax来请求HTML模板文件。有两件事情需要知道。一、在本地开发时，需要在后台运行一个本地服务器，用以从文件系统加载HTML模板，否则会导致Cross Origin Request Script（CORS）错误。二、模板加载是异步的，意味着编译和链接要暂停，等待模板加载完成。scope：如果一个元素上有多个指令使用了隔离作用域，其中只有一个可以生效。只有指令模板中的根元素可以获得一个新的作用域。因此，对于这些对象来说scope默认被设置为true。作用域的继承机制是向下而非向上进行的。 scope：以下方式会创建新的子作用域，并且进行原型继承： ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: true创建directive。
  • transclude：只有当你希望创建一个可以包含任意内容的指令时，才使用transclude: true。
  • link：指令中的controller和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，且无法在指令间复用。还有个区别：Controller(在编译前执行)而Link(在编译后执行) 子级指令的所有 link function ：包括 pre 和 post 两个link都会在父级的post link之前被执行，我们通常所说的link function，其实是 post link 的快捷方式罢了。 当想要同当前屏幕上的作用域交互时，可以使用被传入到link函数中的scope参数。 directive的scope与其外层的controller的scope是同一个作用域
  • controllerAs：使我们可以在路由和指令中创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器，并且这个对象是隔离的、易于测试的。
  • require：可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。require参数的值可以用下面的前缀进行修饰，这会改变查找控制器时的行为：
  • ?：如果在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。
  • ^：如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器。
  • ?^：将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找。
  • 没有前缀：如果没有前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误。
  • conpile：编译函数负责对模板DOM进行转换。链接函数负责将作用域和DOM进行链接。在作用域同DOM链接之前可以手动操作DOM

多重视图和路由：

ng-view是由ngRoute模块提供的一个特殊指令，它的独特作用是在HTML中给$route对应的视图内容占位。它会创建自己的作用域并将模板嵌套在内部。ng-view是一个优先级为1000的终极指令。AngularJS不会运行同一个元素上的低优先级指令。ng-view不支持多层视图嵌套，可以考虑加强版的ui-view 路由：如果reloadOnSearch选项被设置为true（默认），当$location.search()发生变化时会重新加载路由。如果设置为false，那么当URL中的查询串部分发生变化时就不会重新加载路由。这个小窍门对路由嵌套和原地分页等需求非常有用。

  • $location 服务：path()/replace()/absUrl()/hash()/host()/port()/protocol()/search()/url()
  • $location服务不会重新加载整个页面，它只会单纯地改变URL。如果我们想重新加载整个页面，需要用$window服务来设置地址。$window.location.href = “/reload/page”;
  • 路由模式：标签模式和HTML5模式(显示原始路径，如果路径是#/List/Add这种标签模式，它会自动重写URL)
  • 路由事件：$routeChangeStart/$routeChangeSuccess/$routeChangeError/$routeUpdate

服务：

  • 控制器只会在需要时被实例化，并且不再需要就会被销毁。这意味着每次切换路由或重新加载视图时，当前的控制器会被AngularJS清除掉。 服务提供了一种能在应用的整个生命周期内保持数据的方法，它能够在控制器之间进行通信，并且能保证数据的一致性。服务是一个单例对象，在每个应用中只会被实例化一次（被$injector实例化），并且是延迟加载的（需要时才会被创建）。服务提供了把与特定功能相关联的方法集中在一起的接口。 不推荐在控制器中使用$watch，这里只是为了方便演示。在实际生产中会将这个功能封装进一个指令，并在指令中设置$watch。 在自定义服务之前注入所有的AngularJS内置服务，这是约定俗成的规则。 所有创建服务的方法都构建在provider方法之上。provider()方法负责在$providerCache中注册服务。 如果希望在config()函数中可以对服务进行配置，必须用provider()来定义服务。 value()方法和constant()方法之间最主要的区别是，常量可以注入到配置函数中，而值不行。通常情况下，可以通过value()来注册服务对象或函数，用constant()来配置数据，constant定义的常量不能被装饰器拦截。

上一篇     下一篇