zoukankan      html  css  js  c++  java
  • 4.了解AngularJS模块和依赖注入

     1.模块和依赖注入概述

    1.了解模块

    AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块。

    模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画

    可通过定义其提供的对象构建模块。通过依赖注入将模块连接在一起,构建一个完整的应用程序。

    AngularJS建立在模块原理上。大部分AngularJS提供的功能都内置到ng-*模块中。

    2.依赖注入

    定义依赖对象并动态地把它注入另一个对象,使得所有的依赖对象所提供的功能都能使用。(提供器 注入器服务)

    提供器:如何创建一个具有所有必要功能的对象的实例(模块的一部分),一个模块把提供器注册到注入器的服务器中。(一个提供器对象只创建一个实例)

    注入器服务:跟踪提供器对象的实例。(提供器模块-注入器服务实例)

    2.定义AngularJS模块

    AngularJS模块实现:配置阶段,运行阶段

    1.创建AngularJS Module对象

    创建Module对象,注册到注入器服务,返回新创建的Module实例(实现提供器的功能)

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

    name:注册在注入器服务中的名称

    requires:被添加到注入器服务的供这个模块使用的模块名的数组,若需要另一个模块的功能,需要添加在requires列表(ng模块会默认添加)

    configFn:模块配置阶段调用的另一个函数

    var myModule=angular.module('myModule',['$Window','$http'],function(){
       $provide.value('myValue','Some Value'); 
    })
    

    如果没有requires(依赖),不会创建Module对象,是返回已经创建的实例(会覆盖上面实例的定义)

    var myModule2=angular.module('myModule',[]); 

    返回上面的实例,没有列出依赖

    var myModule3=angular.module('myModule'); 

    2.使用配置块

    被定义后,执行模块配置。任何提供器都被注册到依赖注入器。

    injectable:提供器服务函数,如$provide

    config(funciton([injectable,...]))

    $provide和$filterProvider服务被传送到config函数。(把命名为startTime的 值提供器 和 命名为myFilter的 过滤器提供器 注册到 注入器服务)

    var myModule=angular.module('myModule',[])
    myModule.config(function($provide,$filterProvider){
       $provide.value("startTime",new Date());
       $filterProvider.register('myFilter',function(){});    
    })    
    

    3.使用运行块

    配置完成,可以执行AngularJS模块的运行阶段。

    运行块中不能实现任何提供器代码。(整个模块已经配置完成 注册到 依赖注入器了)

    run(function([injectable,...]))
    

    injectable只是注入器实例。

    myModule.run(function(startTime){
       startTime.setTime((new Date()).getTime()); 
    })
    

    专门的AngularJS对象提供器(除了config()  (有相应的 animation controller filter directive 对象定义))

    1. animation(name,animationFactory)
    2. controller(name,controlFactory)
    3. filter(name,filterFactory)
    4. directive(name,directiveFactory)

    基本控制器:AngularJS具有 内置控制器对象 并知道所有控制器对象 都必须接受 一个作用域对象 作为第一个参数

    var mod=angular.module('myMod',[]);
    mod.controller('nyController',function($scope){
       $scope.somevalue='somevalue'; 
    })  

    服务提供器

    是一类独特的提供器(不存在已有的特定格式),作为一个服务来提供功能。

    1. value(name,object):最基础的,object参数被简单分配到name,所以注入器中name值和object之间有直接关系
    2. constant(name,object):与value类似,但value不可更改。
    3. factory(name,factoryFunction):采用factoryFunction参数构建将通过注入器提供的对象
    4. service(name,serviceFactory):添加了更面向对象的方法
    5. provider(name,providerFactory):所有其他方法的核心

    基本例子:(定义constant value 提供器,方法中定义的值 被注册在  myMod模块 的 注入器服务器 中,通过名字访问)

    var mod=angular.module('myMod',[]);
    mod.constant("ID","ABC");
    mod.value('couter',0);
    mod.value('image',{name:'box.jpg',height:12,20});
    

    4.实现依赖注入  

    一旦定义模块和相应的提供器。就可以把该模块作为其他模块,控制器,其他各种AngularJS对象的依赖来添加(依赖于提供器的对象的$jnject属性值)

    var myController=function($scope,appMsg){
      $scope.message=appMsg;  
    };
    controller['$inject']=['$scope','appMsg'];
    myApp.myController('controllerA',controller);
    
    //第二种表达
    
    myApp.control('controllerA',['$scope','appMsg',function($scope,appMsg){
       $scope.message=appMsg; 
    }])
    

    injector.js:在控制器和模块定义中实现依赖注入  

    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
    	<meta charset="UTF-8">
    	<title>AngularJS Dependency Injection</title>
    </head>
    <body>
    	<div ng-controller="controllerA">
    		<h2>Application Message:</h2>
    		{{message}}
    	</div>
    	<hr>
    	<div ng-controller="controllerB">
    		<h2>Module Message:</h2>
    		{{message}}
    	</div>
    	<script type="text/javascript" src="angular-1.3.0.js"></script>
    	<script type="text/javascript" src="injector.js"></script>
    </body>
    </html>
    
    var myMod=angular.module('myMod',[]);
    myMod.value('modMsg','Helllo from my Module');
    myMod.controller('controllerB', ['$scope','modMsg',function($scope,msg){
    	$scope.message=msg;	
    }]);
    var myApp=angular.module('myApp', ['myMod']);
    myApp.value('appMsg','Hello from myApp');
    myApp.controller('controllerA', ['$scope','appMsg',function($scope,msg){
    	$scope.message=msg;	
    }]);
    

      

  • 相关阅读:
    iOS 解决导航栏左右 BarButtonItem偏移位置的问题
    iOS UIButton 图片文字上下垂直布局 解决方案
    Android开发实战(十八):Android Studio 优秀插件:GsonFormat
    Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow
    AsyncTask.cancel()的结束问题
    Android项目实战(十五):自定义不可滑动的ListView和GridView
    RecyclerView解析--onViewDetachedFromWindow()/onViewAttachedToWindow()
    RecyclerView添加头部和底部视图的实现
    浅谈TabLayout(ViewPager+Tab联动)
    Android项目实战(十四):TextView显示html样式的文字
  • 原文地址:https://www.cnblogs.com/weizaiyes/p/6030524.html
Copyright © 2011-2022 走看看