zoukankan      html  css  js  c++  java
  • AngularJS学习笔记

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

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

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

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

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

    2、控制器可以嵌套,相当于继承,子控制器可以获取父控制器的属性

    六、表达式:
    (1)特性:1、所有表达式都在scope这个context里被执行,因此可以使用所有本地 $scope 中的变量。
    2、如果一个表达式的执行导致类型错误或引用错误,这些错误将不会被抛出。
    3、表达式里不允许任何控制函数流程的功能(如if/else等条件语句)
    4、表达式可接受一个或多个串联起来的过滤器。

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

    七、过滤器:
    1、过滤:currency,date,filter(字符串,对象,函数),json,limitTo,lowercase,number,orderBy,uppercase,自定义过滤器
    2、表单验证:HTML5自带的表单验证使用很方便,只需给标签添加属性即可。
    必填项:required
    最小值:ng-minlength="5"
    最大值:ng-maxlength="20"
    正则:ng-pattern="[a-zA-Z]"
    电子邮箱:<input type="email" name="email" ng-model="user.email" />
    数字:<input type="number" name="age" ng-model="user.age" />
    URL:<input type="url" name="homepage" ng-model="user.url" />

    表单属性:
    user.name.$dirty(输入框使用了规则为True) 脏值检测
    user.name.$pristine(输入框没有使用规则为True)
    user.name.$invalid(是否验证未通过)
    user.submitted(是否提交)
    <small class="error" ng-show="user.name.$error.minlength">错误信息</small>(进行错误判断)

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

    八、指令简介:
    1、自定义指令
    语法: <my-directive></my-directive>
    directive('myDirective',function(){})。
    种类:元素(E)、属性(A)、类(C)或注释(M)
    在我们的例子中使用my-directive声明指令<my-directive></my-directive>,根据驼峰命名法,指令定义必须以myDirective为名字。(hello)

    2、当前作用域:每个控制器都有自己的作用域,同时控制器可以嵌套,最内层的控制器可以通过当前$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
    十一、AngularJS模块加载:


    十二、多重视图和路由:
    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定义的常量不能被装饰器拦截。
    十五、同外界通信:HRX和服务器通信:

    十六、XHR实践:

    十七、Promise

    十八、服务器通信:

    十九、测试:

    二十、事件:

    二十一、架构:

    二十二、Angular动画:

    二十三、digest循环和$apply:

    二十四、揭秘Angular:

    二十五、AngularJS精华扩展:

    二十六、移动应用:

    二十七、本地化:

    二十八、缓存:

    二十九、安全性:

    三十、AngularJS和IE浏览器

    三十一、构建Angular Chrome应用

    三十二、优化Angular应用

    三十三、调试AngularJS

    三十四、下一步

  • 相关阅读:
    华为的管理变革之路
    产品创新型组织变革的四个阶段
    新产品如何在市场上快速取得成功?
    如何做好基础技术的创新?
    产品创新型总经理应具备哪些方面的素质?
    项目型组织如何快速过渡到产品型组织?
    华为是如何做技术规划和产品路标开发的?
    华为干部选拔和任用的标准
    导论:1、大学计算机——2、计算机信息数字化基础——二进制&数字化(数制)
    导论:1、大学计算机——1、计算机与问题求解
  • 原文地址:https://www.cnblogs.com/len0031/p/5197954.html
Copyright © 2011-2022 走看看