• Angularjs学习笔记(二)----模块


    一、定义

      如何将全局定义的控制器模块化

      先看下全局定义的控制器

    var HelloCtrl=function($scope){
        $scope.name='World';
    }

      模块化后代码

    angular.module('hello',[])
        .controller('HelloCtrl',function($scope){
            $scope.name='World';
    });

      AngularJS为自己定义了全局命名空间angular,他提供多种功能及不少便利函数,module就是其中之一。

      定义新的模块,需要传入名字,作为调用module的第一个参数,而第二个参数则表达此模块依赖哪些其他模块(上例中的模块不依赖其他模块)。

      angular.module的调用会返回新创建模块的实例,然后就开始定义新的控制器。controller函数的参数如下:

    • 控制器的名字(字符串类型)
    • 控制器的构造函数

      模块已经定义好了,现在要告知AngularJS它的存在,这只要为ng-app属性赋值即可。

      <body ng-app="hello">

    二、模块的生命周期

      2.1 配置阶段

      2.2 编译阶段

      2.3 不同阶段与不同的注册方法

      对象种类 可以在配置阶段注入 可以在运行阶段注入
    Constant 常量值 Yes Yes
    Variable 变量值 Yes
    Service 构造函数创建的新对象 Yes
    Factory 工厂函数返回的新对象 Yes
    Provider $get工厂函数创建的新对象 Yes

    三、模块依赖

    angular.module('app',['engines'])
        .factory('car',function($log,dieselEngine){
            return{
                start:function(){
                    $log.info('Starting'+dieselEngine.type);
                };
            }
    });
    
    angular.module('engines',[])
        .factory('dieselEngine',function(){
            return{
                type:'diesel'
            };
    });

      car服务在app模块中定义,app模块依赖于engines模块,后者定义dieselEngine服务,因此car可以注入dieselEngine.

      下面这个例子说明兄弟模块的服务也互相可见。car也注入了dieselEngine。

    angular.module('app',['engines','cars'])
    
    angular.modul('cars',[])
        .factory('car',function($log,dieselEngine)
            return{
                start:function(){
                    $log.info('Starting'+dieselEngine.type);
                }
            };
    });
    
    angular.module('engines',[])
        .factory('dieselEngine',function(){
            return{
                type:'diesel'
            };
    });

      下面这个例子来说明每个名字只存在唯一的服务,我们可以利用这点,在依赖某模块的同时去覆盖此模块提供的服务。

    angular.module('app',['engines','cars'])
    
    angular.modul('cars',[])
        .factory('car',function($log,dieselEngine)
            return{
                start:function(){
                    $log.info('Starting'+dieselEngine.type);
                };
            }
    })
    
        .factory('dieselEngine',function(){
            return{
                type:'diesel'
            };
    });

      car服务里的dieselEngine服务是自己模块的服务,它将兄弟模块engines里的同名服务给覆盖掉了。

  • 相关阅读:
    Cookie和Session的那些事儿
    【IScroll深入学习】解决IScroll疑难杂症
    使用 iscroll 实现焦点图无限循环
    jquery.mobiscroll仿Iphone ActionSheet省市区联动
    mobiscroll之treelist使用
    jQuery.extend 函数详解
    jQuery插件开发精品教程,让你的jQuery提升一个台阶
    用js实现动画效果核心方式
    js特效,加速度,图标跳动
    详解用CSS3制作圆形滚动进度条动画效果
  • 原文地址:https://www.cnblogs.com/shanoon/p/5501125.html
Copyright © 2020-2023  润新知