2.NG2入门

2.1 基本构造

angularjs主要有8个构造快:

模块(module)

组件(component)

模板(template)

元数据(metadata)

数据绑定(data binding)

指令(directive)

服务(service)

依赖注入(dependency injection)

2.1.1 模块(module)

每个 Angular 应用至少有一个模块(根模块),习惯上命名为AppModule。Angular 模块(无论是根模块还是特性模块)都是一个带有@NgModule装饰器的类。装饰器是用来修饰 JavaScript 类的函数。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports:     [ BrowserModule ],
providers:   [ Logger ],
declarations: [ AppComponent ],
exports:     [ AppComponent ],
bootstrap:   [ AppComponent ]
})
export class AppModule { }

NgModule的主要属性如下:

imports :

导入其他module,其他module暴露出来的Component Directives Pipes等都可以在本mudole的组件被使用。比如导入CommonModule后就可以后就可以使用NgIf NgFor等指令。

declarations:

模块内部Components Directives Pipes的列表,声明一下这个模块的内部成员。

providers:

指令应用程序的根级别需要使用的service.(ng2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)

bootstrap:固定写法,略.

exports:

用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部所暴露的公共成员。除非导入的这个module把它内部导入的module写到exports中。
2.1.2 元数据(metadata)

元数据告诉 Angular 如何处理一个类。

在TypeScript 中,我们用装饰器 (decorator) 来附加元数据。 下面就是HeroListComponent的一些元数据。

@Component({
moduleId: module.id,
selector:   'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

@Component装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图。

@Component的配置项包括:

moduleId: 为与模块相关的 URL(例如templateUrl)提供基地址。

selector: CSS 选择器,它告诉 Angular 在父级 HTML 中查找<hero-list>标签,创建并插入该组件。

templateUrl: 组件 HTML 模板的模块相对地址

providers: 组件所需服务的依赖注入提供商数组。 这是在告诉 Angular:该组件的构造函数需要一个HeroService服务,这样组件就可以可以调用该服务了。

2.1.3 数据绑定(data binding)
<li>{{hero.name}}</li>
<hero-detail [hidden]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>
<input [(ngModel)]="hero.name">
  • {{hero.name}}[插值表达式]在<li>标签中显示组件的hero.name属性的值。

  • [hidden][属性绑定] 把父组件的selectedHero的值传到子组件的hidden属性中。

  • (click) [事件绑定]在用户点击英雄的名字时调用组件的selectHero方法。

  • [(ngModel)] 双向数据绑定是重要的第四种绑定形式,它使用ngModel指令组合了属性绑定和事件绑定的功能。在双向绑定中,数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件,把属性值设置为最新的值。

2.1.4 依赖注入

依赖注入”是提供类的新实例的一种方式,还负责处理好类所需的全部依赖。大多数依赖都是服务。

constructor(private service: HeroService) { }

angularjs2 通过构造函数实现注入,和java里面的注入的方式之一借助构造函数实现依赖是一样的

AngularJS2基本构造的更多相关文章

  1. 学习笔记:Maven构造版本号的方法解决浏览器缓存问题

    需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的 ...

  2. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  3. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

  4. Node学习笔记(四):gulp+express+io.socket部署angularJs2(填坑篇)

    这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的ng2技术,奈何坑是一片又一片,这边就先介绍下环境部署和填坑史 既然要用ng2,首先要拿到资源,我这边用的是angular ...

  5. About 静态代码块,普通代码块,同步代码块,构造代码块和构造函数的纳闷

    构造函数用于给对象进行初始化,是给与之对应的对象进行初始化,它具有针对性,函数中的一种.特点:1:该函数的名称和所在类的名称相同.2:不需要定义返回值类型.3:该函数没有具体的返回值.记住:所有对象创 ...

  6. Eos开发——构造查询条件

    1.ajax 方式 var data = { orgid :orgid,year:year ,month: month,type:type,sortField:'sellEmpname' ,sortO ...

  7. 【C++】类和对象(构造与析构)

    类 类是一种抽象和封装机制,描述一组具有相同属性和行为的对象,是代码复用的基本单位. 类成员的访问权限 面向对象关键特性之一就是隐藏数据,采用机制就是设置类成员的访问控制权限.类成员有3种访问权限: ...

  8. Spring 设值注入 构造注入 p命名空间注入

    注入Bean属性---构造注入配置方案 在Spring配置文件中通过<constructor-arg>元素为构造方法传参 注意: 1.一个<constructor-arg>元素 ...

  9. 并发包的线程池第二篇--Executors的构造

    上一篇讲述了ThreadPoolExecutor的执行过程,我们也能看出来一个很明显的问题:这个线程池的构造函数比较复杂,对于不十分理解其运作原理的程序员,自己构造它可能体现和想象中不一样的行为.比如 ...

随机推荐

  1. SQL Server数据库读取数据的DateReader类及其相关类

    之前学了几天的SQL Server,现在用C#代码连接数据库了. 需要使用C#代码连接数据库,读取数据. 涉及的类有: ConfigurationManage SqlConnection SqlCom ...

  2. 【一】Swift 3.0 新浪微博项目实战 -整体框架搭建

    最近要接手swift,所以找了个视频跟着做一下实战项目,在此记录一下过程和心得 框架搭建和目录拆分 关键词:MVVM 架构,桥接文件 桥接文件用于引入OC的头文件,Swift就可以正常使用(宏除外). ...

  3. Java变量和对象的作用域

    大多数程序设计语言都提供了"作用域"(Scope)的概念. 对于在作用域里定义的名字,作用域同时决定了它的"可见性"以及"存在时间".在C, ...

  4. 浅谈对java中传参问题的理解

    之前用的c/c++比较多,在c/c++中对于传参类型,无外乎就是传值.传引用.传指针这几种.但在java中,由于没有指针类型,其传参的方式也发生了相应的变化.在网上找了找,按我之前的理解,java中传 ...

  5. 小程序新能力-个人开发者尝鲜微信小程序

    个人开发者的福利 微信小程序,刚听到这个新名词的时候,我就兴冲冲的去找入口,看看自己能不能搞个微信小程序的HelloWorld,毕竟能在微信上把自己写的一些小工具跑起来还是满炫酷的. 没想,网上一查, ...

  6. 反射实现 Data To Model

    调用 : public ActionResult Index() { DataTable dt = new DataTable(); dt.Columns.Add("Name"); ...

  7. 在ASP.NET Core中使用Apworks快速开发数据服务

    不少关注我博客的朋友都知道我在2009年左右开发过一个名为Apworks的企业级应用程序开发框架,旨在为分布式企业系统软件开发提供面向领域驱动(DDD)的框架级别的解决方案,并对多种系统架构风格提供支 ...

  8. 【Egret】中tree组件使用案例

    Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...

  9. 手机自动化测试:Appium源码分析之跟踪代码分析九

    手机自动化测试:Appium源码分析之跟踪代码分析九   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...

  10. c/c++程序员的技术栈

    在当今的互联网时代, java,  安卓, ios, 大行其道,而c/c++却显得越来越落寞. 其实这并不是c/c++程序员本身的问题,而是这是一个产品快速响应市场的年代.用过c/c++的人都知道, ...