zoukankan      html  css  js  c++  java
  • AngularJS 模块及provide

    一、模块

      模块是一些功能的集合,如控制器、服务、过滤器、指令等子元素组成的整体。

    1、注册和使用

      模块相当于是一个注册表,保存着名字和编程元素的对照表,可存入也可取出。

      angular.module('com.ngnice.app').service('ui',function(){..});

      该代码的意思是,先取出名字为'com.ngnice.app'的模块,然后把function(){..}作为回调函数以ui为名字注册进去一个服务,其他编程元素通过该名字可以从模块中取出来使用。

    2、依赖关系

      模块可以依赖其他模块,模块间有依赖关系。

      有个公用模块common,要用其中的名为authHandler的service,我们必须先声明这种依赖,否则,即使引用了模块common所在的js文件,也无法找到。另外,angularjs可以自动检测出循环依赖,以避免出现无限递归。

      angular.module('com.ngnice.app',['common','m1']);

      m1可以使用common中的编程元素,不需要定义模块m1依赖模块common,只要根模块(ng-app对应的模块)依赖各个模块就行,如service。实例如下:

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <script>
        var common = angular.module("common",[]);
        common.service("testService",function(){this.name="test111";})
        var m1 = angular.module("m1",[]);
        var myApp = angular.module("myApp", ["common","m1"]);
        m1.controller("Ctr1", function ($scope, testService) {
          $scope.name = testService.name;
        });
        
      </script>
     
    </head>
    <body>
      <form> 
      <div ng-controller="Ctr1">
          {{name}}
        </div> 
      </div>
      </form>
    </body> 
    </html>

      运行结果;

      

    3、module方法定义

      模块的创建和获取利用以下方法:  

      angular.module(name, [requires], [configFn]);

      name:字符串类型,代表模块的名称;

      requires:字符串的数组,代表该模块依赖的其他模块列表,如果不依赖其他模块,用空数组即可;

      configFn:用来对该模块进行一些配置。

    // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
    var createModule = angular.module("myModule", []);
    
    // 只有一个参数(模块名),代表获取模块
    // 如果模块不存在,angular框架会抛异常
    var getModule = angular.module("myModule");

    二、provide

      module和provide是用来注册服务到injector中的。可以看到$provide提供了provider()、constant()、value()(与constant区别是value可修改值)、factory()、service()来创建各种不同性质的服务;angular.Module中也提供了这5个服务注册方法。provide可以直接在config阶段注入使用

      module只是provide的语法糖而已

       constant

    var app = angular.module('app', []);
     
    app.config(function ($provide) {
      $provide.constant('movieTitle', 'The Matrix');
    });
    //单元测试
    app.controller('ctrl', function (movieTitle) {
      expect(movieTitle).toEqual('The Matrix');
    });

      语法糖:

    app.constant('movieTitle', 'The Matrix');

      其编译后,也是在config里执行的

       provider

      其是一个可配置的factory,config只能注入provider即供应商

    var app = angular.module('app', []);
     
    app.provider('movie', function () {
      var version;
      return {
        setVersion: function (value) {
          version = value;
        },
        $get: function () {
          return {
              title: 'The Matrix' + ' ' + version
          }
        }
      }
    });
     
    app.config(function (movieProvider) {
      movieProvider.setVersion('Reloaded');
    });
     
    app.controller('ctrl', function (movie) {
      expect(movie.title).toEqual('The Matrix Reloaded');
    });
  • 相关阅读:
    77、Android设置虚线、圆角、渐变
    c# 制作自定义控件并生成dll文件旷展到其他项目使用
    VB ListView罗列图片
    (壹)、java面向对象详解
    php基本语法
    1.单例模式
    Memcached详解
    MySql的优化
    页面静态化详解
    mysql常用知识点
  • 原文地址:https://www.cnblogs.com/shawnhu/p/8466897.html
Copyright © 2011-2022 走看看