ca888会员登录angular中的装饰器 详解

2019-05-03 05:16栏目:ca888圈内

 

Angular中的装饰器是一个函数,它将元数据添加到类、类成员(属性、方法)和函数参数。
用法:要想应用装饰器,把它放到被装饰对象的上面或左边
Angular 使用自己的一套装饰器来实现应用程序各部件之间的相互操作
这个地方是前面几个模块模块、指令、组件、依赖注入等从装饰器这个侧面的整理
你需要做的:
1.搞清楚理解TypeScript的装饰器的原理
2.搞清楚这里面每一个装饰器的作用,解决的什么问题,应用场景
类装饰器******
Angular 有很多装饰器,它们负责把元数据附加到类上,以了解那些类的设计意图以及它们应如何工作。
类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。
类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。
@Component标记类作为组件并收集组件配置元数据(继承Directive) @Directive标记类作为指令并收集组件配置元数据
声明当前类是一个指令,并提供关于该指令的元数据
@Pipe******
声明当前类是一个管道,并且提供关于该管道的元数据
@Injectable标记元数据并可以使用Injector注入器注入
声明当前类有一些依赖,当依赖注入器创建该类的实例时,这些依赖应该被注入到构造函数中。
@NgModule******
NgModule是一个装饰器函数,它
接收一个用来描述模块属性的元数据对象。其中最重要的属性是:
declarations -声明本模块中拥有的视图
。(Angular有三种视图类:组件、指令和管道?。)
exports - declarations的子集,可用于其它模块的
组件[模板](
imports -本模块声明的组件模板需要的类所在的其它
模块。Ps:模块导入声明
providers -服务的创建者,并加入到全局服务列表中,可用于应用任何部分。????完全没懂说啥
bootstrap -指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
**属性装饰器******
属性装饰器表达式会在运行时当作函数被调用,
传入下列2个参数:
对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
成员的名字。
**@Input******
声明一个输入属性,以便我们可以通过属性绑定更新它。
**@Output******
声明一个输出属性,以便我们可以通过事件绑定进行订阅。
**@Hostbinding********把宿主元素的属性(比如CSS类)绑定到指令/组件的属性******
**@HostListener******
通过指令/组件的方法订阅宿主元素的事件
@ContentChild配置一个内容查询 @ViewChild配置一个视图查询 @ContentChildren配置多个个内容查询(返回QueryList类型) @ViewChildren配置多个视图查询(返回QueryList类型) 参数装饰器******
参数装饰器表达式会在运行时当作函数被调用,
传入下列3个参数:
对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
成员的名字。
参数在函数参数列表中的索引。
注意参数装饰器只能用来监视一个方法的参数是否被传入。**
@Inject指定依赖关系的参数装饰器(一般用来注入被标记Injectable的类)
@Optional将依赖项标记为可选的参数元数据. 如果没有找到依赖关系,注射器将提供null
@Self指定注射器只能从本身检索依赖关系****
@SkipSelf指定注射器只能从父类检索依赖关系****
@Host按照依赖关系来检索

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

英文同步版链接

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

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

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

用法:要想应用装饰器,把它放到被装饰对象的上面或左边

Github项目源码

二、创建服务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 使用自己的一套装饰器来实现应用程序各部件之间的相互操作

EJB 全称为Enterprise Java Beans,封装了应用程序的业务逻辑并提供与容器服务交互的能力,如事务和安全。本教程在上次创建的JPA模块的基础上,继续添加EJB模块,并且实现真正与数据库交互。本次项目实现了添加用户到数据库,查询所有用户并显示在JSF页面上。

三、业务组件调用httpService

let newUrl = localServer "/search"; //查询网址 

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

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

 

这个地方是前面几个模块模块、指令、组件、依赖注入等从装饰器这个侧面的整理

ca888会员登录 1ScreenShot1.png

后端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;
        }  

 

参考资料:

 

你需要做的:

首先在 notebookDomain 模块中添加一些代码,定义数据库操作的接口。在 com.zxuqian.notebook.dao 包中创建名为 IUserDao 的接口。代码如下:

1.搞清楚理解TypeScript的装饰器的原理

public interface IUserDao { User getUserById; List<User> getAllUsers(); Long addUser(User user); void deleteUser(User user);}

2.搞清楚这里面每一个装饰器的作用,解决的什么问题,应用场景

接着,在 com.zxuqian.notebook.dao.impl 包下,定义此接口的实现类 UserDao。它包含一个只用一个参数的构造方法,接收 EntityManager 的实例对象。因为JPA模块并不属于容器管理,而EJB运行在容器的EJB组件中,所以我们需要从EJB中把容器注入的 EntityManager 对象传递给 UserDao

类装饰器

Angular 有很多装饰器,它们负责把元数据附加到类上,以了解那些类的设计意图以及它们应如何工作。

类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。

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

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

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

声明当前类是一个指令,并提供关于该指令的元数据

@Pipe

声明当前类是一个管道,并且提供关于该管道的元数据

@Injectable标记元数据并可以使用Injector注入器注入

声明当前类有一些依赖,当依赖注入器创建该类的实例时,这些依赖应该被注入到构造函数中。

@NgModule

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

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

exports - declarations的子集,可用于其它模块的组件模板。Ps:模块导出声明

imports -本模块声明的组件模板需要的类所在的其它模块。Ps:模块导入声明

providers -服务的创建者,并加入到全局服务列表中,可用于应用任何部分。????完全没懂说啥

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

public class UserDao implements IUserDao, Serializable { private EntityManager entityManager; public UserDao(EntityManager entityManager) { this.entityManager = entityManager; } @Override public User getUserById { return this.entityManager.find(User.class, id); } @Override public List<User> getAllUsers() { List<User> userList = this.entityManager.createNamedQuery( "getAllUsersQuery", User.class).getResultList(); return userList; } @Override public Long addUser(User user) { this.entityManager.persist; return user.getId(); } @Override public void deleteUser(User user) { this.entityManager.remove; }}

属性装饰器

属性装饰器表达式会在运行时当作函数被调用,

传入下列2个参数:

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

成员的名字。

@Input

声明一个输入属性,以便我们可以通过属性绑定更新它。

@Output

声明一个输出属性,以便我们可以通过事件绑定进行订阅。

@Hostbinding**把宿主元素的属性(比如CSS类)绑定到指令/组件的属性**

@HostListener

通过指令/组件的方法订阅宿主元素的事件

@ContentChild配置一个内容查询

@ViewChild配置一个视图查询

@ContentChildren配置多个个内容查询(返回QueryList类型)

@ViewChildren配置多个视图查询(返回QueryList类型)

这个类中的方法分别进行了对 EntityManager API的调用,现作简单说明:

参数装饰器

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

传入下列3个参数:

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

成员的名字。

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

注意参数装饰器只能用来监视一个方法的参数是否被传入。

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

@Optional将依赖项标记为可选的参数元数据. 如果没有找到依赖关系,注射器将提供null

@Self指定注射器只能从本身检索依赖关系

@SkipSelf指定注射器只能从父类检索依赖关系

@Host按照依赖关系来检索

ps:内容来自百度整理  不对的地方希望大神指出

  • find() 用来根据指定 id 查询数据库,并返回相应的Java对象。
  • createNamedQuery() 执行预先定义好的命名查询语句,在本项目中,此名称定义在 User 类中,稍后进行介绍。
  • persist() 插入数据到数据库中。
  • remove() 根据传递过来的 User 对象,从数据库中删除指定记录。

命名查询使用 @NamedQuery 注解来定义相关查询, User 类如下所示:

@NamedQuery(name = "getAllUsersQuery", query = "from User u")public class User implements Serializable {

这里的查询语言是JPA定义的,叫做 JPQL ,与SQL语法类似。 这里的语句意为查询所有用户。如果查询所有列,可省略 Select 子句和列名。

Persistence.xml 需要进行一些改动:

<?xml version="1.0" encoding="UTF-8"?><persistence version="2.1" xmlns="http://xmlns.jcp.org/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/persistence http://xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsd"> <persistence-unit name="notebookDomain" transaction-type="JTA"> <jta-data-source>java:/MySqlDS</jta-data-source> <properties> <!-- Have to define dialect and use hibernate ddl generation strategy --> <property name="hibernate.hbm2ddl.auto" value="create-drop"/> <property name="hibernate.dialect" value="MySQL5" /> </properties> </persistence-unit></persistence>

因为之前JPA原生 <property> 属性在Wildfly实现中并不总是生效,所以这里换成了Wildfly默认的JPA实现,即Hibernate。把属性改成了Hibernate专有的。hibernate.hbm2ddl.auto 定义是否自动生成表,create-and-drop 意为如果表存在,则删除后再创建。hibernate.dialect 用来指定数据库厂商,以根据不同的数据库生成厂商相关的SQL语句。

EJB可以用接口来定义此Bean是本地还是远程的。本地bean只能在部署应用的同一容器中访问,而远程bean可以被集群中的服务器所访问。

版权声明:本文由ca888发布于ca888圈内,转载请注明出处:ca888会员登录angular中的装饰器 详解