zoukankan      html  css  js  c++  java
  • angular1.5版本的自我认识

    一、零散知识:

    1.作用域:$scope对象是模版的域模型,也为作用域实例。通过为其属性赋值,可传递数据给模板渲染。

    2.控制器:(controller),主要是初始化作用域实例。

       a.提供模型的初始值;

       b.增加UI相关行为(函数),以扩展$scope对象。

    3.深入作用域:

      3.1 $rootscope是其它所有作用域的父作用域,$parent指向父作用域,但尽量避免使用这两个属性。

    4.每个作用域实例都有$on方法,用于注册(register)作用域事件,被分发的event对象会做为第一个参数传入,后续参数则会一句事件负载的信息和事件类型(event-type)而定。

    $scope.$on('$locationChangeSuccess',function(event,newUrl,oldUrl){
           //在这里对地址(location)的变化做出反映;
           //例如,根据新的URL更新面包屑导航
      
        })
    

      4.1event对象也有preventDefault()和stopPropagation()方法,但与DOM无共同之处。

      4.2在angular中,仅有三个事件($includeContentRequested,$includeContentLoaded,$viewcontentLoaded)可以被向上分发(emitted),七个事件($locationChangeStart,$locationChangeSuccess,$routeUpdate,$rootChangeStart,$routeChangeSuccess,$routeChangeError,$destroy)可以被向下广播(broadCasted)。

    5.重要规则:永远不要在angular的控制器中操纵DOM元素。如果想使用JQuery,需要在angular之前引用,但最好不要zai angular中过多依赖jquery。

    二、模块与依赖注入

      1.模块

    angular.module('app', ['cars', 'engines'])
            .controller('AppCtrl', function($scope, car) {
                car.start();
            });
    

        1.1定义新的模块,需要传入名字,作为调用module的第一个参数,而第二个参数则表达此模块依赖哪些模块,不依赖也不能省[]。

        1.2angular.module的调用会返回新创建模块的实例,然后开始定义新的控制器。a.控制器的名字(字符串类型;b.控制器的构造函数;

      2.依赖注入

        2.1例如$scope神秘注入控制器。

      3.注册服务

        3.1接入依赖注入机制的第一步,是将对象注册在模块(module)上。

        3.2使用myMod.service('notice',function(a){this.a = a;})   构造函数创建的新对象。

           使用myMod.factory('notice',function(a){return {haha:a}}),工厂函数返回的新对象。

           使用myMod.provide(),  $get工厂函数创建的新对象。

        3.3常量:myod.contant('maxLen',10);

      4.模块依赖

        4.1定义在某模块中的服务,对其他模块可见。即模块的层级不会影响服务对其他模块的透明度。即它在不同模块中定义的所有服务都被导入应用,相当于全局命名空间。

        4.2服务是不能重名的,父模块的服务会覆盖子模块中的同名服务。例子如下:输出是String222;

        4.3至此,还不支持模块内的私有服务。

     1 (function(angular) {
     2     angular.module('app', ['cars', 'engines'])
     3         .controller('AppCtrl', function($scope, car) {
     4             car.start();
     5         });
     6 
     7     angular.module('cars', [])
     8         .factory('car', function($log, dieseEngine) {
     9             return {
    10                 start: function() {
    11                     $log.info('Starting' + dieseEngine.type);
    12                 }
    13             };
    14         })
    15         .factory('dieseEngine', function() {
    16             return {
    17                 type: 'haha'
    18             };
    19         });
    20     angular.module('engines', [])
    21         .factory('dieseEngine', function() {
    22             return {
    23                 type: "222"
    24             };
    25         });
    26 })(angular);

     四、angular文件与模块

      遵循原则:坚持一个文件等于一个angular模块的原则。目标单一,维护相对小,且无须关心文件加载顺序。

      4.1模块一旦被定义,就可以用来注册对象创建方案。这些方案在angular术语中称为provider。每个provider在执行时,都会产生一个运行时服务实例,尽管服务创建方案时可以有多种方式(factory,service,provider和变量),但最后结果都一样,配置过的服务实例。

      4.2注册新的providers,首先要活的模块的实例。对angular.module方法的调用就会返回它。

    var admin = angular.module('admin-projects',[]);
  • 相关阅读:
    Atitit.软件GUI按钮与仪表盘(01)报警系统
    Atitit.软件仪表盘(7)温度监测子系统电脑重要部件温度与监控and警报
    Atitit.异步编程 java .net php python js 的比较
    Atitit.mssql 数据库表记录数and 表体积大小统计
    Atitit.软件仪表盘(0)软件的子系统体系说明
    Atitit. 单点登录sso 的解决方案 总结
    .atitit.web 推送实现解决方案集合(3)dwr3 Reverse Ajax
    atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9
    Atitit.软件仪表盘(4)db数据库子系统监测
    Atitit.软件仪表盘(8)os子系统资源占用监测
  • 原文地址:https://www.cnblogs.com/trylang/p/5425004.html
Copyright © 2011-2022 走看看