AngularJS2基本构造
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基本构造的更多相关文章
- 学习笔记:Maven构造版本号的方法解决浏览器缓存问题
需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的 ...
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
- Node学习笔记(四):gulp+express+io.socket部署angularJs2(填坑篇)
这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的ng2技术,奈何坑是一片又一片,这边就先介绍下环境部署和填坑史 既然要用ng2,首先要拿到资源,我这边用的是angular ...
- About 静态代码块,普通代码块,同步代码块,构造代码块和构造函数的纳闷
构造函数用于给对象进行初始化,是给与之对应的对象进行初始化,它具有针对性,函数中的一种.特点:1:该函数的名称和所在类的名称相同.2:不需要定义返回值类型.3:该函数没有具体的返回值.记住:所有对象创 ...
- Eos开发——构造查询条件
1.ajax 方式 var data = { orgid :orgid,year:year ,month: month,type:type,sortField:'sellEmpname' ,sortO ...
- 【C++】类和对象(构造与析构)
类 类是一种抽象和封装机制,描述一组具有相同属性和行为的对象,是代码复用的基本单位. 类成员的访问权限 面向对象关键特性之一就是隐藏数据,采用机制就是设置类成员的访问控制权限.类成员有3种访问权限: ...
- Spring 设值注入 构造注入 p命名空间注入
注入Bean属性---构造注入配置方案 在Spring配置文件中通过<constructor-arg>元素为构造方法传参 注意: 1.一个<constructor-arg>元素 ...
- 并发包的线程池第二篇--Executors的构造
上一篇讲述了ThreadPoolExecutor的执行过程,我们也能看出来一个很明显的问题:这个线程池的构造函数比较复杂,对于不十分理解其运作原理的程序员,自己构造它可能体现和想象中不一样的行为.比如 ...
随机推荐
- SQL Server数据库读取数据的DateReader类及其相关类
之前学了几天的SQL Server,现在用C#代码连接数据库了. 需要使用C#代码连接数据库,读取数据. 涉及的类有: ConfigurationManage SqlConnection SqlCom ...
- 【一】Swift 3.0 新浪微博项目实战 -整体框架搭建
最近要接手swift,所以找了个视频跟着做一下实战项目,在此记录一下过程和心得 框架搭建和目录拆分 关键词:MVVM 架构,桥接文件 桥接文件用于引入OC的头文件,Swift就可以正常使用(宏除外). ...
- Java变量和对象的作用域
大多数程序设计语言都提供了"作用域"(Scope)的概念. 对于在作用域里定义的名字,作用域同时决定了它的"可见性"以及"存在时间".在C, ...
- 浅谈对java中传参问题的理解
之前用的c/c++比较多,在c/c++中对于传参类型,无外乎就是传值.传引用.传指针这几种.但在java中,由于没有指针类型,其传参的方式也发生了相应的变化.在网上找了找,按我之前的理解,java中传 ...
- 小程序新能力-个人开发者尝鲜微信小程序
个人开发者的福利 微信小程序,刚听到这个新名词的时候,我就兴冲冲的去找入口,看看自己能不能搞个微信小程序的HelloWorld,毕竟能在微信上把自己写的一些小工具跑起来还是满炫酷的. 没想,网上一查, ...
- 反射实现 Data To Model
调用 : public ActionResult Index() { DataTable dt = new DataTable(); dt.Columns.Add("Name"); ...
- 在ASP.NET Core中使用Apworks快速开发数据服务
不少关注我博客的朋友都知道我在2009年左右开发过一个名为Apworks的企业级应用程序开发框架,旨在为分布式企业系统软件开发提供面向领域驱动(DDD)的框架级别的解决方案,并对多种系统架构风格提供支 ...
- 【Egret】中tree组件使用案例
Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...
- 手机自动化测试:Appium源码分析之跟踪代码分析九
手机自动化测试:Appium源码分析之跟踪代码分析九 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...
- c/c++程序员的技术栈
在当今的互联网时代, java, 安卓, ios, 大行其道,而c/c++却显得越来越落寞. 其实这并不是c/c++程序员本身的问题,而是这是一个产品快速响应市场的年代.用过c/c++的人都知道, ...