引子：
- 这是关于Angular2框架的学习记录笔记。秉着”学于网络,归于网络“的精神将学习过程记录下来,供后来者以参考。
- 该笔记参考了两本书：《揭秘Angular2》和《Angular权威教程(ng-book2-r34中文)》。相关PDF文档很好找。
- 学习过程为看两本书的讲解并运行示例代码,反复推敲。
- 学习推荐路线为：组件 -> 路由。然后学习其他核心模块。
一、工程配置文件
一个最简单的Angular2的工程由这2个配置文件组成。
1.1 package.json
所有的基于nodejs的项目都会有一个package.json文件，里面会定义项目名称、版本、依赖的库，以及脚本。
主要字段：
- name,项目名称
- version，项目版本
- description,项目描述
- scripts，定义了几个可以使用npm运行的脚本
- devDependencies，项目开发时需要的一些工具包
- dependencies，项目依赖的基础包
"name": "my-project1",
"version": "0.0.0",
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
1.2 tsconfig.json
配置了TypeScript编译器的编译参数。
主要字段：
- module，代码的组织方式
- target，编译目标平台
- sourceMap，生产js文件时是否生成对应的sourceMap文件。
- emitDecoratorMetadata,使TypeScript支持为带有装饰器的声明,生成元数据。
- experimentalDecorators，是否启用实验性装饰器特性。
- typeRoots，指定第三方库的类型定义文件的存放位置,推荐node_module/@types文件夹。
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
二、组件相关文件
app组件相关文件，包括2个文件。
2.1 app.components.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
1)导入组件模块Component
2)通过装饰器告诉Angular如何创建这个组件
3)定义一个组件类并对外输出该类
2.2 app.module.ts
Angular中使用模块组织一些功能紧密相关的代码块。而且至少有一个模块,习惯上称为AppModule。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
1)@NgModule,用于定义模块用的装饰器。
2)declarations，导入模块依赖的组件、指令等。
3)imports,导入当前模块所需要的其他模块。
2.3 main.ts
Angular项目入口文件。
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
编译启动AppModule模块。
2.4 index.html宿主页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyProject1</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
1)<app-root>标签在app.component.ts中定义的selector。
三、打包工具
将项目打包编译,工具可以有Webpack、Gulp等。
方案一：
algular-cli(内核也是webpack),使用命令:ng install、ng build、ng server等命令进行构建。
方案二：
webpack配置方案。
这里使用方案一.
{
"project": {
"version": "1.0.0-beta.28.3",
"name": "my-project1"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
至此,项目搭建完成。
<全文结束>
网友评论