0%

angular 2

发表于 更新于 Valine：
本文字数： 1k 阅读时长 ≈ 1 分钟

初识Angular2

标签：ES6 Class 组件化

import是ES6的关键字，从模块中引入类型定义；

实现一个angular2组件，需要定义一个类，然后给这个类添加注解

1
2
3
[@Component](/user/Component)({selector:'my-app'})
[@View](/user/View)({template:'<h1>hello world</h1>'})
class MyApp{}

class是ES6的关键字，用来定义一个类，而@Component和@View是附加给类的信息，称为注解。前者通过selector属性指定要渲染的Dom对象，后者为指定渲染的模板。

bootstrap(MyApp) 这个函数通知angular2将MyApp组件渲染到Dom树上。它在angular1.x中是围绕dom元素展开的，而在angular2.x中是围绕组件开始的，如果没有组件，也就无法启动angular2

显示数据

属性绑定机制把数据显示到用户界面上

使用插值表达式显示组件属性，与angular1.x一样，把属性名包裹在双花括号里面放进视图模板，如.

模板是包在es6反引号中的一个多行字符串，使html模板更容易阅读。

组件模板也可以由两种选择，分别是内联模板和模板文件，templateUrl属性，在组件元数据中把他链接到组件。

初始化组件可以有变量赋值和使用构造函数声明和初始化两种，下面分别为demo

1
2
3
export class AppComponent{
	title : string = 'angular2'
}

使用构造函数初始化

1
2
3
4
5
6
export class AppComponent{
	title:string;
	constructor(){
		this.title = 'angular2';
	}
}

使用NgFor显示数组属性，*ngFor是angular的迭代指令，他将元素及其子级标记为迭代模板；

使用NgIf进行条件显示，它会根据一个布尔条件来显示或移除一个元素。

依赖注入

依赖注入是重要的设计模式，angular离开了他，几乎没法构建angular应用，它使用的很广泛，简称为DI。

@Injectable()装饰器

注册提供商