1.搭建Angular2项目

简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点,可参考本人的另一篇文章Linux系统下安装Angular2开发环境(Ubuntu16.0)

1. pakeage.json配置文件:是用来声明项目中使用的模块,在部署环境时,只要在pakeage所在的目录执行npm install命令就可以安装所有需要的模块了.
新建一个文件夹作为项目的根目录,整个项目的文件都存放在这个文件夹下面.在根目录下创建一个package.json的配置文件,该文件描述了npm包的所有相关信息,
包括作者,简介,包依赖,构建等信息,其格式必须是严格的json格式.
如下配置:
{
"name":"helloword", //不能在name中包含node,js等字样.
"version":"1.0.0",
"private":"false", //private设置为true时,npm会拒绝发布,这样会防止repositories不小心被发布出去.
"description":"hello-world project for angular 2",
"repository":"https://baidu.com/", //可选字段,用来指示代码存放的位置.
"bower":"^1.7.7", //可选,包管理器
"http-server":"^0.9.0", //可选,轻量的web服务器
"scripts":{
"server":"webpack-dev-server --inline --colors --progress --port 3000",
"start":"npm run server"
}, //可选,实际上指npm-scripts
"License":"MIT",
"devDependencies":{
"@types/core-js":"-0.9.34",
"ts-loader":"-1.2.0",
"typescript":"-2.0.0",
"webpack":"-1.12.9",
"webpack-dec-server":"-1.14.0"
},
"dependencies":{
"@angular/common": "^2.3.1", //angular 开发组提供的服务,管道和指令
"@angular/compiler": "^2.3.1", //angular的模板编译器,它会解析模板,并且把模板转换成代码,以供应用程序运行和渲染
"@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"
}
}
配置介绍:
scripts:可以使用调用一些脚本,或封装一些命令.
devDependencies:项目开发时所依赖的一些工具包.
dependencies:项目依赖的基础包.
1.1 http-server介绍：http-server是一个简单的零配置命令行http服务器，基于node.js。
在命令行的使用:$node http-server
在package.json中定义的方式：
"scripts":{
"start":"http-server -a 0.0.0.0 -p 8000",
}
其中的参数：
-p 端口号 (默认 8080)
-a IP 地址 (默认 0.0.0.0)
-d 显示目录列表 (默认 'True')
-i 显示 autoIndex (默认 'True')
-e or --ext 如果没有提供默认的文件扩展名(默认 'html')
-s or --silent 禁止日志信息输出
--cors 启用 CORS
-o 在开始服务后打开浏览器
-h or --help 打印列表并退出
-c 为 cache-control max-age header 设置Cache time(秒) ，禁用 caching, 则值设为 -1 .

2. tsconfig.json文件:放在根目录下,它配置了TypeScript编译器的编译参数.
如:
{
"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"
]
},
"compileOnSave":"true",
"exclude":["node_modules"]
}
其主要配置说明:
module:组织代码的方式,
target:编译目标平台(ES3,ES5,ES6)
sourceMap:把ts文件编译成.js文件时,是否生成对应的SourceMap文件.
emitDecoratorMetadata:让TypeScript支持为带有装饰器的声明生成元数据;
experimentalDecorators:是否启用实验性装饰器特性.
typeRoots:指定第三方库的类型定义文件的存放位置,推荐使用node_modules/@types文件夹.

3. 创建资源文件夹:到这一步,angular项目的基本配置文件创建完成,接下来在项目根目录下创建一个src文件夹,这个文件夹将存放项目的业务代码文件.

4. 创建组件相关文件:在src目录下创建app.component.ts文件以及模板文件app.component.html
如://app.component.ts
import { component } from '@angular/core';

@Component({
selector:'hello-world',
templateUrl:'src/app.component.html'
})
export class AppComponent{}

<--app.component.html-->
<h3>hello world</h3>

@Component装饰器用来告诉angular怎样创建这个组件,在组件中可以定义该组件的DOM元素名称,如selector:'hello-world',也可以用templateUrl引入模板.
这样在其他文件中就可以通过这个类名引用该组件.

5. 创建app.module.ts文件:在Angular应用中需要用模块来组织一些功能紧密相关的代码块,每个应用至少又一个模块.
如://app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component'

@NgModule({
declarations:[AppComponent],
imports:[BrowserModule],
boostrap:[AppComponent]
})
export class AppModule{}
说明:
@NgModule:用于定义模块用的装饰器.
declarations:导入模块以来的组件,指令等.
imports:用来导入当前模块所需的其他模块.几乎每个应用的跟模块都需要导入BrowserModule模块,它注册了一些关键的Provider和通用的指令,所以在imports属性中配置,作为
公用模块共全局调用.
bootstrap:标记出引导组件,在Angular启动应用时,将被标记的组件渲染到模板中.

6. 添加main.ts文件:Angular项目一般有一个入口文件,通过这个文件来串联起整个项目.
如://main.ts
import 'reflect-metadata';
import 'zone.js'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch(err=>console.error(err));
说明:要启动应用,主要依赖于Angular自带的platformBrowserDynamic函数和应用模块AppModule,通过调用platformBrowserDynamic().bootstrapModule()方法,来编译启动
AppModule模块.

7. 创建index.html宿主页面:
这里就不详细列出,主要是在body中添加<hello-world></hello-world>自定义标签,和引入js脚本<script src='bundle.js'></script>
其中的<hello-world></hello-world>标签就是在根组件app.component.ts中定义的selector.

8. 配置打包:在package.json文件的devDependencies{
...
"webpack":"~1.12.9",
"webpack-dev-server":"~1.14.0"
}
其中已经设置了打包工具webpack,webpack-dev-server是一个小型的服务器.开发时项目可以在这个服务器上运行.webpack也又自己的配置文件,在根目录下创建一个webpack.config
.js文件,其配置如下:
//webpack.config.js
var webpack=require('webpack');
var path=require('path');
module.exports={
entry:"./src/main,ts",
output:{
//制定打包后的输出文件名,这个文件需要被引入到index.html中
filename:"./bundle.js"
},
resolve:{
root:[path.join(__dirname,'src')],
extensions:['','.ts','.js']
}
module:{
loader:[
{test:/\.ts$/,loader:'ts-loader'}
]
}
};
其中主要的配置说明:
entry:页面入口文件配置,可以是一个或者多个入口文件
output:对应的输出项配置,输出入口文件编译后的文件.
resolve:定义了解析模块路径时的配置,常用的是extensions,可以用来指定模块的后缀,这样引入模块时就不需要写后缀,它会自动补全.
module.loaders:它告知webpack每一类文件都需要使用什么加载器来处理.

9. 最后:
1.在根目录下运行npm -install命令,npm会根据package.json配置文件,安装所有依赖包,安装的过程中,会自动创建一个node_modules文件夹,项目依赖的包都安装在其中.
2.运行npm start命令启动服务.
3.最后在浏览器中输入localhost:3000,可以看到项目启动后效果.