Angular2入门--架构概览

Angular 介绍

　　Angular 是一款来自谷歌的开源的web前端框架，诞生于2009年，是一款优秀的前端JS框架，已经被用于谷歌的多款产品。

　　Angular 基于Typescript开发 ，更适合中大型企业级的项目。

学习Angular的必备基础

　　html、css、js、es6、Typescript.

载入需要的库

　　推荐使用npm来作为包的管理工具

组件

　　component定义对象是一个angular组件，接收一个包含两个属性的配置对象

　　selector：为HTML元素定义了一个CSS选择器my-app

　　template： 属性容纳着组件的模板

　　@Component{

　　　　selector：‘my-app’,

　　　　templateUrl: ''

　　}

模块

　　angular应用都是模块化的

Class定义对象

　　在Class方法中，我们可以给组件添加属性和方法

　　定义一个Class类

　　定义一个构造函数

　　.Class({

　　　　constructor: function(){}

　　})

添加NgModule

　　angular应用是由angular模块组成

　　app.AppModule = ng.core.NgModule({

　　　　imports: [ ng.platformBrowser.BrowserModule ],

　　　　declarations: [ app.AppComponent ],

　　　　bootstrap: [  app.AppComponent ]

　　})

启动应用

　　添加app/main.js文件

　　我们需要两样东西来启动应用：

　　　　1.angular的platformBrowserDynamic().bootstrapModule 函数

　　　　2.应用根模块Appmodule

　　执行过程为：当angular在main.js中调用bootstrapModule函数时，它读取AppModule的元数据，在启动组件中找到AppComponent并找到my-app选择器，定位到元素，然后在这个标签之间载入内容。

Angular2 Typescript

　　Typescript是一种由微软开发的自由开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。

数据绑定

　　有两种类型的数据绑定：

　　　　1. 事件绑定 让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。

　　　　2. 属性绑定 让你将从应用数据中计算出来的值插入到HTML中。

　　Angular 支持双向数据绑定，这意味着DOM中发生的变化同样可以反映回你的程序数据中。

依赖注入

　　依赖注入器会为组件提供一些服务，比如路由器服务就能让你定义如何在视图之间导航。