Angular-2入门简介.pptxVIP

Angular 2入门简介——乔彦飞 qiaoyanfei@ContentMade By Yanfei QiaoQuickStartTour of HeroesArchitectureBasics开发者指南Cookbookhttps://angular.io/docs/ts/latest/api/API一、QuickstartMade By Yanfei Qiao前提：已安装Node.js创建并配置项目创建Angular应用根组件添加main.ts，向Angular标识根组件添加index.html，即Angular应用的主页面构建并运行应用对应用做出改变创建并配置项目Made By Yanfei Qiao创建项目文件夹添加包定义和配置文件package.json 列出依赖的包，定义一些有用的脚本tsconfig.json TS编译配置文件typings.json TS声明文件systemjs.config.js SystemJS配置文件安装包 npm install二、Tour of HeroesMade By Yanfei Qiao实现过程根组件启动应用Made By Yanfei QiaoQuickstartThe Hero EditorMaster/DetailMultiple ComponentsServicesRouting根组件引入@Component装饰器输出Hero类注册组件输出AppComponent类https://angular.io/resources/live-examples/toh-1/ts/plnkr.html效果1返回Made By Yanfei Qiao模板样式https://angular.io/resources/live-examples/toh-2/ts/plnkr.html效果2返回Made By Yanfei Qiao多组件返回Made By Yanfei Qiao服务建议所有服务添加返回Made By Yanfei Qiao路由返回Made By Yanfei Qiao路由Made By Yanfei Qiao设置base标签在index.html的head标签中添加base href=/引入Router服务import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from @angular/router-deprecated;在元数据中声明directives: [ROUTER_DIRECTIVES],providers: [ ROUTER_PROVIDERS, HeroService]路由@RouteConfig([ { path: /heroes, name: Heroes, component: HeroesComponent }])Made By Yanfei Qiao路由配置router-outleta [routerLink]=[Heroes]Heroes/a三、ArchitectureMade By Yanfei QiaoMade By Yanfei QiaoModule（模块）Component（组件）所有的组件都是指令Template（模板）Metadata（元数据）Data Binding（数据绑定）Directive（指令）Service（服务）Dependency Injection（依赖注入）模块*app/main.ts（代码片段）*import { AppComponent } from ./ponent;*app/ponent.ts(代码片段)*export class AppComponent { }Made By Yanfei QiaoAngular应用是模块化的。简言之，我们使用许多模块组装成我们的应用。一个典型的模块是专于一个功能的紧密结合的代码块。一个模块在代码块中输出一些值，一般是像类的值。我们遇见的最多的模块就是输出组件类的模块。组件一个组件控制着屏幕上一块我们称之为视图的区域。我们在一个类中定义组件的应用逻辑（用来支持视图）。类和视图通过一个属性和方法的API进行交互。当用户使用一个应用时，Angular不断创建、更新和销毁组件。开发者可以在整个生命周期的任何时间通过可选的https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html生命周期钩子执行一些操作。Made By Yanfei Qiao模板我们使用**模板**来定义组件的视图。模板就是以HTML的形式告诉Angular如何渲染组件。大多数情况下一个模板看起来就像常规的HTML，可能有一些陌生（多一些Angular命令）。NgClass、Ng