angular中的装饰器

By admin in 4858美高梅 on 2019年3月15日

 

Angular中的装饰器是1个函数,它将元数据拉长到类、类成员(属性、方法)和函数参数。
用法:要想利用装饰器,把它内置棉被服装饰对象的地点或左侧
Angular 使用自个儿的一套装饰器来完成应用程序各部件之间的并行操作
以此地点是前面多少个模块模块、指令、组件、看重注入等从装饰器那些侧面包车型地铁整治
您需求做的:
1.搞通晓明白TypeScript的装饰器的法则
2.搞明白那之中每1个装饰器的功用,消除的怎么着难题,应用场景
类装饰器******
Angular
有成百上千装饰器,它们承受把元数据附加到类上,以精晓那二个类的陈设意图以及它们应什么做事。
类装饰器应用于类构造函数,能够用来监视,修改或沟通类定义。
类装饰器表明式会在运营时当作函数被调用,类的构造函数作为其唯一的参数。
@Component标记类作为组件并采集组件配置元数据(继承Directive) @Directive标记类作为指令并征集组件配置元数据
宣称当前类是二个指令,并提供有关该指令的元数据
@Pipe******
宣称当前类是一个管道,并且提供关于该管道的元数据
@Injectable标记元数据并得以行使Injector注入器注入
扬言当前类有一些注重,当正视注入器成立该类的实例时,这几个正视应该被注入到构造函数中。
@NgModule******
NgModule是3个装饰器函数,它
接收多个用来描述模块属性的元数据对象。个中最重庆大学的性质是:
declarations
-评释本模块中兼有的视图
。(Angular有三种视图类:组件、指令和管道?。)
exports –
declarations的子集,可用于此外模块的
组件[模板](
imports
-本模块注脚的机件模板要求的类所在的别的
模块。Ps:模块导入评释
providers
-服务的创办人,并插足到全局服务列表中,可用于选用任何部分。????完全没懂说吗
bootstrap
-钦命应用的主视图(称为根组件),它是负有其余视图的宿主。唯有根模块才能安装bootstrap属性。
**质量装饰器******
属性装饰器表明式会在启动时当作函数被调用,
流传下列1个参数:
对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
分子的名字。
**@Input******
扬言二个输入属性,以便我们能够通过质量绑定更新它。
**@Output******
扬言二个输出属性,以便大家得以经过事件绑定举行订阅。
**@Hostbinding********把宿主成分的性格(比如CSS类)绑定到指令/组件的属性******
**@HostListener******
因此指令/组件的艺术订阅宿主成分的轩然大波
@ContentChild配备1个内容查询 @ViewChild安排一个视图查询 @ContentChildren布署多一律内容查询(再次回到QueryList类型) @ViewChildren安插五个视图查询(重回QueryList类型) 参数装饰器******
参数装饰器表明式会在运行时当作函数被调用,
盛传下列2个参数:
对此静态成员来说是类的构造函数,对于实例成员是类的原型对象。
分子的名字。
angular中的装饰器。参数在函数参数列表中的索引。
瞩目参数装饰器只好用来监视一个艺术的参数是或不是被传到。**
@Inject点名注重关系的参数装饰器(一般用来注入被标记Injectable的类)
@Optional将借助项标记为可选的参数元数据.
若是没有找到依赖关系,注射器将提供null
@Self4858美高梅 ,点名注射器只好从笔者检索重视关系****
@SkipSelf钦点注射器只好从父类检索信赖关系****
@Host循序渐进注重关系来探寻

Angular中的装饰器是三个函数,它将元数据增长到类、类成员(属性、方法)和函数参数。

关于angularjs的特点
1.数量的双向绑定:那只怕是其最快乐的特征吧,view层的数量和model层的数目是双向绑定的,个中之一产生变动,另一方会跟着变化,那不用你写任何代码!(想想jQuery格局下怎么做吗)
2.代码模块化,种种模块的代码独立拥有本人的成效域,model,controller等。
3.无敌的directive能够将广大效应封装成HTML的tag,属性或然注释等,那大大美化了HTML的协会,增强了可阅读性;
4.凭借注入,将那种后端语言的设计方式赋予前端代码,那代表前端的代码能够增加重用性和灵活性,将来的格局恐怕将大气操作放在客户端,服务端只提供数据来源和其余客户端不可能成功的操作;
5.测试驱动开发,angularjs一发端就以此为指标,使用angular开发的行使能够很简单地拓展单元测试和端对端测试,那解决了价值观的js代码难以测试和护卫的缺陷

一、在app.module.ts模块中,注入JsonpModule模块

import {JsonpModule} from "@angular/http";

@NgModule({
    imports: [
        JsonpModule    //注入JSonpModule模块
    ]
})

用法:要想采用装饰器,把它内置被点缀对象的上边或左侧

① 、自定义指令

能够经过自定义指令落成中度复用的模块

app.directive(directiveName,function(){
        //directiveName  建议驼峰命名
         return {
                    template : HtmlString 模板内容
                     //replace 为 true 时,必须返回唯一一个根节点
                     restrict : String 指令渲染方式
                      // E 标签  C class  M 注释  A 属性,最长使用的时E、A
                      replace : Bolean   是否替换为原节点(当渲染方式为M时  ,replace 必须为true,才能生效)   
                      controller : String | Function 指定或创建一个控制器
                       // 当为String 时,要求所指定的控制器必须被创建
                        //当为Function 时,接受 scope 形参        
          }
})

在行业内部的支付过程中,为了兑现指令的复用,指令不该影响父级的数目,而数据来源也不应有是一贯运用父级数据,而是要由父级传入数据。
scope:{
//创设四个隔开的功能域,不是直接选用父级数据
@ | @attrName: 单项数据(字符串)传递
= | =attrName : 双向数据(变量)传递
& | &attrName :父级方法传递
当唯有单个字符时,供给键名与标签的习性名相同,要是标签属性有横线,键名要运用驼峰命名式:如:<h1
p-msg = ” “></h1> === pMsg:”@”
}

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./angular.min.js" charset="utf-8"></script>
    </head>
    <body ng-controller="mainController">
        原父级内容pmsg: {{pmsg}}
        <input type="text" ng-model="pmsg">
        <my-directive msg1="abc" a="def" per-msg="ghi" b={{pmsg}} c="pmsg" d="pEvent(m)"> </my-directive>
    </body>
    <script type="text/javascript">
        angular.module("myApp",[])
        .controller("mainController",["$scope",function($scope){
            $scope.pmsg = "父级内容";
            $scope.pEvent = function(m){
                console.log("事件被执行",m);
                return "a";
            }
        }])
        .directive("myDirective",function(){
            return {
                scope:{
                    msg1:"@",
                    msg2:"@a",
                    perMsg : "@",
                    pmsg :"@b",
                    c : "=",
                    d : "&"
                }
                ,template : `
                    <div>
                        <h2>自定义指令</h2>
                        使用父级的消息: {{pmsg}}
                        <input type="text" ng-model="pmsg"/>
                        <h3 style="background:red;">{{msg1}}</h3>
                        <h3>{{msg2}}</h3>
                        <h3>{{perMsg}}</h3>
                        <input type="text" ng-model = "c">
                        <h3>{{d({m:"此消息来自子级"})}}</h3>
                    </div>
                `
                ,link:function(scope,el,attrs){
                    // console.log(scope,el,attrs)
                    //angular 内置轻量级的jQuery  名字叫jqLite
                    //link 阶段操作DOM是安全的,常用于事件添加或样式后修改
                    angular.element(el).find("h3").css("background","pink")
                }
                ,controller : "myController"
            }
        })
        .controller("myController",["$scope",function($scope){
            $scope.cmsg = "指令变量 cmsg 内容"
        }])
    </script>
</html>

二 、创立服务httpService,并流入jsonp和map(分装好的服务 能够直接调用)

import {Injectable} from '@angular/core';
import {Jsonp, URLSearchParams} from "@angular/http";

@Injectable()
export class HttpService {

    private jsonpTimes = 0;   // 用于记录jsonp请求的次数

    constructor(private jsonp: Jsonp) {

    }

    jsonpGet(apiURL, req){
        let params = new URLSearchParams();
        //设置参数
        for (let key in req) {
            params.set(key, req[key]);
        }
        params.set('format', 'json');
        params.set("callback", `__ng_jsonp__.__req${this.jsonpTimes}.finished`);
        this.jsonpTimes++;

        let request = this.jsonp.get(apiURL, { search: params })
            .map((res) => {
                let response = res.json();
                return response;
            });
        return request;
    }

}

 

Angular 使用自身的一套装饰器来落到实处应用程序各部件之间的互动操作

绑定html

Sanitize 模块 过滤净化 html 字符串
会将标签上的性子全体移除,只保留2个彻底的标签
利用格局: 引入 angular-sanitize 脚本
在模块中凭借ngSanitize
就能够一贯利用 ng-bind-html了
停放$sce 服务,用写信任某html 字符串
在控制器中凭借此服务
调用$sce.trustAsHtml(htmlStr)方法,信任传入的html
回到被信任的html,可使用 ng-bind-html
选拔$sce 信任html,请保管html 是高枕无忧的(危机自行负担)

三 、业务组件调用httpService

let newUrl = localServer + “/search”; //查询网址 

let req = { id: 123, name: “abc” }; //查询参数

this.httpService.jsonpGet(newUrl, req).subscribe(data => {
            let result = data.data;
        });

 

本条地点是前方多少个模块模块、指令、组件、正视注入等从装饰器那些侧面包车型客车整治

脏查询

脏查询机制:$digest
$watch ==> $watcher list
$watch 监听数据变动
$apply() 手动强制触发脏查询
$timeout
$interval

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./angular.min.js"></script>
</head>
<body ng-controller="myController">
    {{name}}
    <input type="text" ng-model="a">
</body>
<script>
    angular.module("myApp",[])
    .controller("myController",["$scope","$timeout",function($scope){
        $scope.name="sun";
        setTimeout(function(){
            $scope.name="new name";
            console.log($scope.name);
        },1000);
        $scope.$watch("name",function(){
            console.log(arguments)
        })
        // setTimeout(function(){
        //     $scope.name="new name";
        //     console.log($scope.name);
        //     $scope.$apply();
        // },1000)
    }])
</script>
</html>

后端JAVA代码

@RequestMapping(value = "mergeJson")
     public void exchangeJson(HttpServletRequest request,HttpServletResponse response)  throws Exception {  
              String businessnum = request.getParameter("businessnum");
              String paths = request.getParameter("paths");
              List<String>  pathList =  Arrays.asList( paths.split(","));  

              List<String> resultPath = mergeService.merge(businessnum, pathList);
              String return_JSONP = String.join(",", resultPath);
              String jsonCallback = request.getParameter("callback"); //jsonpCallback 客户端请求参数  
              Map<String,Object> map = new HashMap<>();
              map.put("data",return_JSONP);
              JSONObject resultJSON = new JSONObject(map);//根据需要拼装json  

              PrintWriter pw = response.getWriter();
              pw.write(jsonCallback+"("+resultJSON+")");  
              pw.close();
              pw = null;
        }  

 

参考资料:

 

你须要做的:

$http

angular-resource 用来发送网络请求的模块,依赖于ngResource
,能够发RESTful等请求

    angular.module("myApp",[])
    .controller("myController",["$scope","$http",function($scope,$http){
        $scope.items=[];
        //动态的请求数据
        //$httop.get() 返回一个promise 对象
        //success 和 error 只是语法糖,是对then()的封装
        $http.get("./data.json").success(function(res){
            console.log(res)
        });
    }])

1.搞精通理解TypeScript的装饰器的规律

正视注入

angular 提供八个可被直接流入的劳务,分别是:
service
单例的,调用时会自动使用new关键字,重回的是同一个实例;适用于数据持久化(共享数据或与后台通讯)
factory 工厂服务(适用于通用的逻辑总括、工具类的东西)
value 创立变量
constant 创制常量,能够注入到另各省方(config阶段)
provider
瞩目:不要试图去复用控制器,贰个控制器一般只承担一小块视图;
并非在控制器里操作DOM,那不是控制器的任务,而是指令的天职;不要在控制器里做多少格式化,ng有很好用的过滤器实现此作用;不要在控制器里面做多少过滤操作,ng有$filter服务;一般的话,controller是不会互相调用的,控制器之间的交互是因而事件展开的。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./angular.min.js"></script>
</head>
<body ng-controller="myController"></body>
<script>
    var app = angular.module("myApp",[]);
    app.config(function(z5Provider){

    });
    app.controller("myController",[
        "$scope","z1","z2","z3","z4","z5"
        ,function($scope,z1,z2,z3,z4,z5){
            z1();
            z2.say();
            console.log(z2);
            console.log(z3())
            console.log(z4)
            console.log(z5)
     }])
    app.factory("z1",function(){
        return function(){
            console.log("这是z1-factory")
        }
    })
    app.service("z2",function(){
        this.name="abc",
        this.say = function(){
            console.log("这是z2-service",this.name)
        }
    })
    app.value("z3",function(){
        return "这是z3-value"
    })
    app.constant("z4","3.14");
    app.provider("z5",function(){
        this.$get = function(){
            return "这是z5-provider"
        }
    })
</script>
</html>

2.搞明白那中间每3个装饰器的效应,消除的怎么着难点,应用场景

路由配置文件

布局路由规则供给在 config 阶段
1、引入 ui-router 脚本
二 、在 app 创造时加载* ui.router* 依赖
3、在* config* 阶段,注入$stateProvider$urlRouterProvider
肆 、在页面中注明ui-view 元素 证明跳转链接 a * ui-sref*

http://mockjs.com/
转变随机数据,拦截 Ajax 请求

类装饰器

Angular
有不少装饰器,它们承受把元数据附加到类上,以领悟那三个类的宏图意图以及它们应什么做事。

类装饰器应用于类构造函数,能够用来监视,修改或沟通类定义。

类装饰器表明式会在运作时当作函数被调用,类的构造函数作为其唯一的参数。

@Component标记类作为组件并募集组件配置元数据(继承Directive)

@Directive标记类作为指令并收集组件配置元数据

宣示当前类是四个发令,并提供关于该指令的元数据

@Pipe

宣称当前类是三个管道,并且提供关于该管道的元数据

@Injectable标记元数据并能够应用Injector注入器注入

宣示当前类有一对依靠,当注重注入器成立该类的实例时,这几个依赖应该被注入到构造函数中。

@NgModule

NgModule是一个装饰器函数,它接收八个用来描述模块属性的元数据对象。个中最根本的天性是:

declarations -评释本模块中具有的视图。(Angular有三种视图类:组件、指令和管道?。)

exports –
declarations的子集,可用于别的模块的组件模板。Ps:模块导出申明

imports -本模块注解的零件模板需求的类所在的任何模块。Ps:模块导入声明

providers -服务的创制者,并参预到全局服务列表中,可用以选用任何部分。????完全没懂说吗

bootstrap -钦定应用的主视图(称为根组件),它是拥有其余视图的宿主。唯有根模块才能设置bootstrap属性。

本性装饰器

品质装饰器表明式会在运作时当作函数被调用,

盛传下列二个参数:

对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。

成员的名字。

@Input

宣称二个输入属性,以便我们能够通过品质绑定更新它。

@Output

宣示2个输出属性,以便大家得以经过事件绑定进行订阅。

@Hostbinding**把宿主成分的性格(比如CSS类)绑定到指令/组件的质量**

@HostListener

透过指令/组件的主意订阅宿主成分的事件

@ContentChild安排三个内容查询

@ViewChild安插二个视图查询

@ContentChildren布署多一律内容查询(重返QueryList类型)

@ViewChildren布署多少个视图查询(重返QueryList类型)

参数装饰器

参数装饰器表明式会在运转时当作函数被调用,

流传下列三个参数:

对此静态成员来说是类的构造函数,对于实例成员是类的原型对象。

分子的名字。

参数在函数参数列表中的索引。

注意参数装饰器只可以用来监视1个方式的参数是不是被传到。

@Inject点名依赖关系的参数装饰器(一般用来注入被标记Injectable的类)

@Optional将凭借项标记为可选的参数元数据.
假若没有找到信赖关系,注射器将提供null

@Self点名注射器只可以从自家检索依赖关系

@SkipSelf钦点注射器只好从父类检索重视关系

@Host根据重视关系来搜寻

ps:内容来自百度整治  不对的地点希望大神提议

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有