• (五)Angularjs


    如何找到API?

    AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同。

    比如,AngularJS暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,当访问angular.$http,却找不到

    依赖注入/DI

    事实上,AngularJS把所有的功能组件都以依赖注入的方式组织起来,在依赖注入的模式下,所有的组件必须通过容器才能相互访问,这导致了在AngularJS中, 你必须通过一个中介才能获得某个组件的实例对象

    1 var injector = angular.injector(['ng']);
    2 injector.invoke(function($http){
    3     //do sth. with $http
    4 });

    例: 打印$http代码

    1 angular.element(document).ready(function(){
    2     angular.injector(["ng"]).invoke(function($http){
    3         //将$http对象转成字符串显示出来
    4         var e = document.querySelector("#logger");
    5         angular.element(e).text($http.toString());
    6     });
    7 });
    <html>
    <head>
        <script src="angular.js"></script>
    </head>
    <body>
        <!--在这里显示$http的内容-->
        <div id="logger"></div>
    </body>
    </html>

     

    注入器/injector

    注入器是AngularJS框架实现和应用开发的关键,这是一个DI/IoC容器的实现。

    AngularJS将功能分成了不同类型的组件分别实现,这些组件有一个统称 - 供给者/provider。

    AngularJS的组件之间不可以互相直接调用,一个组件必须通过注入器才 可以调用另一个组件。这样的好处是组件之间相互解耦,对象的整个生命周期的管理 甩给了注入器。

    注册服务组件

    从injector的角度看,组件就是一个功能提供者,因此被称为供给者/Provider。 在AngularJS中,provider以JavaScript类(构造函数)的形式封装。

    服务名称通常使用一个字符串标识,比如"$http"代表http调用服务、"$rootScope"代表根 作用域对象、"$compile"代表编译服务...

    Provider类要求提供一个$get函数(类工厂),injector通过调用该函数, 就可以获得服务组件的实例。

    名称和类函数的组合信息,被称为配方。injector中维护一个集中的配方库, 用来按需创建不同的组件。这个配方库,其实就是一个Hash对象,key就是服务名称,value 就是类定义。

    例:在test模块上登记一个hello服务

    //在test模块上登记一个hello服务
    angular.module("test",[])
    .provider("hello",function(){
        //$get方法是一个类工厂,返回服务的实例
        this.$get = function(){
            return "hello,world!";
        };
    });
    
    angular.element(document).ready(function(){
        angular.injector(["ng","test"]).invoke(function(hello){
            //将hello实例对象转成字符串显示出来
            var e = document.querySelector("#logger");
            angular.element(e).text(hello);
        });
    });

     

    获得注入器对象

    创建一个新的注入器

    angular.injector(modules, [strictDi]);

    获取已经创建的注入器

    1 var element = angular.element(dom_element);
    2 var injector = element.injector();

    通过注入器调用API

    注入器有两个方法可供进行API调用:invoke()和get()。

    invoke()

    使用注入器的invoke()方法,可以直接调用一个用户自定义的函数体,并通过函数参数 注入所依赖的服务对象,这是AngularJS推荐和惯例的用法:

    1 angular.injector(['ng'])
    2 .invoke(function($http){
    3     //do sth. with $http
    4 });

    get()

    get()方法,获得指定名称的服务实例:

    1 var my$http = angular.injector(['ng']).get('$http');
    2 //do sth. with my$http

    有两种方法告知注入器需要注入的服务对象:参数名注入和依赖数组注入。

    参数名注入:

    将待注入函数定义转化为字符串,通过 正则表达式检查其参数表

    1 //myfunc通过参数表声明这个函数依赖于"$http"服务
    2 var myfunc = function($http){
    3     //do sth. with $http
    4 };
    5 injector.invoke(myfunc);//myfunc的定义将被转化为字符串进行参数名检查

    依赖数组注入

    数组的最后一项是实际要执行的函数,其他项则指明需要向该函数注入 的服务名称。注入器将按照数组中的顺序,依次向函数注入依赖对象

    1 //myfunc依赖于"$http"和"$compile"服务
    2 var myfunc = ["$http","$compile",function(p1,p2){
    3     //do sth. with p1($http),p2($compile)
    4 }];
    5 injector.invoke(myfunc);
  • 相关阅读:
    使用c#生成Identicon图片
    C#实现对文件目录的实时监控
    .Net Core的一些个人总结
    天天写业务代码,如何成为「技术大牛」?
    两款工作流JBPM和CCBPM的对比
    MVC5+EasyUI+EF6+Linq通用权限系统出炉--登录(2)
    MVC5+EasyUI+EF6+Linq通用权限系统出炉(1)
    博客园,久违了
    VS2010 代码行数统计以及代码复制汉字出现乱码
    关于TerrainExplorer的一些资源网址设置方法(备忘)
  • 原文地址:https://www.cnblogs.com/huair_12/p/4343750.html
Copyright © 2020-2023  润新知