初识Angular2
初识Angular2
我们去写一个Angular应用:用Angular扩展语法写HTML模板,写组件类去管理这些模板,用服务添加应用逻辑,用模块打包组件和服务。 环境搭建mkdir demo cd demo npm init 根据 { "name": "demo","version": "1.0.0","description": "","scripts": { "postinstall": "./node_modules/.bin/typings install" },"author": "","license": "ISC","dependencies": { "@angular/common": "~2.1.0","@angular/compiler": "~2.1.0","@angular/core": "~2.1.0","@angular/forms": "~2.1.0","@angular/http": "~2.1.0","@angular/platform-browser": "~2.1.0","@angular/platform-browser-dynamic": "~2.1.0","@angular/router": "~3.1.0","@angular/upgrade": "~2.1.0","angular-in-memory-web-api": "~0.1.5","bootstrap": "^3.3.7","core-js": "^2.4.1","reflect-metadata": "^0.1.8","rxjs": "5.0.0-beta.12","zone.js": "^0.6.25" },"devDependencies": { "ts-loader": "^0.8.2","typescript": "^2.0.3","typings": "^1.4.0","path": "^0.12.7","webpack": "^1.13.2","webpack-dev-server": "^1.16.1" } } 简单解释下: 创建其他的配置文件配置文件 { "compilerOptions": { "target": "es5","module": "commonjs","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": true,"noImplicitAny": true,"declaration": false } } 配置文件 { "globalDependencies": { "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504" } } 现在运行 npm install 安装 package.json 里所有的依赖包,过程可能会有些慢(如果你开了 VPN 就不存在这问题),这里推荐使用淘宝镜像命令加快安装速度 如果在运行 npm install 之后没有出现 typings 目录,你就需要通过命令手动安装它: 创建应用入口在项目目录中创建 app 子目录,接着在 app 目录下创建 app.module.ts,也就是目前项目的根模块。 mkdir app touch app/app.module.ts 在刚创建的 app.module.ts 文件中添加下面代码: // zone 为异步任务提供hook支持,主要应用于提高脏检查效率和降低性能损耗 // reflect-metadata 为Decorator提供反应射API import 'zone.js/dist/zone'; import 'reflect-metadata'; // 引入NgModule装饰器 import { NgModule } from '@angular/core'; // 引入浏览器模块 import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ] }) export class AppModule {} NgModules 把 Angular 应用组织成了一些功能相关的代码块。 Angular 本身也被拆成了一些独立的 Angular 模块。 这让你可以只导入你应用中所需的 Angular 部件,以得到较小的文件体积。每个 Angular 应用都至少有一个模块: 根模块 ,在这里它叫做 AppModule 。 创建组件,并添加到应用中每个 Angular 应用都至少有一个根组件,整个应用由一个个组件组成,而组件化(Component)则是 Angular 的核心灵魂。 创建组件 AppComponent,即文件 app.component.ts,在其中添加代码: import { Component } from '@angular/core'; // 为 AppComponent 组件类添加注解 @Component({ selector: 'my-app',template: '<h1>My First Angular App</h1>' }) export class AppComponent {}
编辑 // zone 为异步任务提供hook支持,主要应用于提高脏检查效率和降低性能损耗 // reflect-metadata 为Decorator提供反应射API,注意:Decorator是ES6的提案 import 'zone.js/dist/zone'; import 'reflect-metadata'; // 引入NgModule装饰器 import { NgModule } from '@angular/core'; // 引入浏览器模块 import { BrowserModule } from '@angular/platform-browser'; //引入AppComponent组件 import {AppComponent} from './app.component'; @NgModule({ imports: [ BrowserModule ],declarations:[AppComponent],bootstrap:[AppComponent] }) export class AppModule {}
启动应用文件创建 main.ts 让 Angular 加载这个启动文件,在其中添加如下代码: // 引入启动器 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // 引入入口文件 import { AppModule } from './app.module'; // 启动应用 const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); 为什么要分别创建 main.ts 、应用模块 和应用组件的文件呢? 因为应用的引导过程与 创建模块或者 展现视图是相互独立的。 创建应用的宿主页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Angular2 QuickStart</title> </head> <body> <!-- 对应 @Component({ selector: 'my-app',... }) --> <my-app></my-app> <!-- 编译打包后的文件 --> <script src="dist/bundle.js"></script> </body> </html> 创建webpack.config.js我们使用 webpack 作为编译打包工具,就需要创建 webpack.config.js, var path = require('path'); module.exports = { entry: { main: './app/main.ts' },output: { path: path.resolve(__dirname,'dist'),publicPath: '/dist/',filename: 'bundle.js' },module: { loaders: [ { test: /.ts$/,loader: 'ts' } ] },// require 文件时可省略后缀 .js 和 .ts resolve: { extensions: ['','.js','.ts'] },// 配置 webpack-dev-server devServer:{ historyApiFallback: true,hot: true,inline: true,port: 3000 // 修改端口,一般默认是8080 } }; 修改 "scripts": { "start": "webpack-dev-server --inline --hot --colors --progress","postinstall": "./node_modules/.bin/typings install" }, 一切就绪,先不急着启动 webpack-dev-server,初学者经常遇到的坑,关于 webpack-dev-server 无法让浏览器在代码修改后进行热替换,首页要确保是否全局安装了 webpack-dev-server,如果没有就运行下面命令: ok!运行项目
简单的数据绑定我们来修改下现在页面上的内容,改为程序员常见的 import { Component } from '@angular/core'; // 为 AppComponent 组件类添加注解 @Component({ selector: 'my-app',template: '<h1>Hello {{title}}</h1>',styles:['h1{color:red}'] }) export class AppComponent { title='World'; }
好了,我们保存一下,页面上就能看到对应的变化。 export class AppComponent { title='World'; onKeyup1(userInput:string){ //这是typescript的写法,定义你的参数为string类型,并在调用的时候做检查 this.title=userInput; } } 保存更改的内容你会发现,我们实现了之前想要的效果;这个时候我们回过头来看最开始的那张图,看看angular2中的八大构架,大概能理解几个,我想除了依赖注入,其他的大致都有了了解,对于angular是如何运作的应该清楚了,那就动手试试吧! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |