1：环境搭建
今天给大家介绍4种环境搭建的方法。
一：Angular-cli的安装
请使用cnpm来安装，或者配置淘宝镜像。
使用原生npm安装可能会遇到的问题：
- 需要python的环境
- 可能会依赖某些franework导致会要求安装Visual Studio（在下文中会为大家介绍webstrom的配置）
- node-sass // 因为ZF导致，被墙掉了。
- node-gyp模块可能会编译错误。
如果还遇到问题可以参考：http://blog.csdn.net/zhy13087344578/article/details/60745667
二：Angular-seed
Angular的种子文件，他有很多的版本，我们今天通过官方的seed来安装。
官方的angular-seed地址：https://github.com/angular/angular2-seed
步骤：
- git clone https://github.com/angular/angular2-seed.git安装种子文件(没有git的，可以自己down zip下来，然后打开cmd，执行cnpm install)。
前置需安装的包文件
- npm install -g webpack webpack-dev-server typescript
- npm install
- npm start
- 访问本地 localhost:3000
seed文件的优点：
- 自带简单的路由
- 自带From模块
- 带有Http请求模块
- 体现出了Angular的核心功能
- 项目体量小
三：基于webpack安装（爽歪歪的方法）
- 优点：可以让我们自由的配置webpack.config.js
- 步骤：https://github.com/kunl/Angular-webpack-AOT
- 场景：从Node转到前端的公司或者项目推荐用这种方式
手动创建项目（真正的勇士）
- 条件：大神级别的使用方法（我不是大神，会简单的介绍一下）
- 优点：想要什么在项目中添加什么，非常快捷
- 步骤：
- 准备工作：
在开始搭建Angular环境前，还需要做一些准备工作，包括安装Angular所依赖的基础环境Node.js，可以在官网(https://nodejs.org/en/download/)下载安装，需要确认Node.js版本为v4.x.x以上，npm版本为v3.x.x以上。使用版本为node v5.11.0版本。
- 搭建步骤
1: 创建package.json
{
"name": "HelloByHand",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "npm run server",
"server": "webpack-dev-server –inline –colors –progress –port 3000"
},
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"reflect-metadata": "~0.1.8",
"core-js": "~2.4.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "~0.6.26"
},
"devDependencies": {
"@types/core-js": "~0.9.34",
"ts-loader": "~1.2.0",
"webpack": "~1.12.9",
"webpack-dev-server": "~1.14.0",
"typescript": "~2.0.0"
}
}
2：创建tsconfig.json
配置了typescript编译器的编译参数。
{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments":false,
"noImplicitAny": true,
"suppressExcessPropertyErrors": true,
"typeRoots": [
"node_modules/@types"
],
"exclude": [
"node_modules"
]
}
}
3：创建资源文件夹
在项目根目录下创建一个src文件夹
4：创建组件相关文件
在src目录下创建app.component.ts文件以及模板文件app.component.html，示例代码如下：
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'scr/app.component.ts'
})
export class AppComponent {}
//app.component.html
<h1>Hello World</h1>
5：创建app.module.ts文件
在Angular应用中需要用模块来组织一些功能紧密相关的代码块，每个应用至少有一个模块，习惯上把它叫做AppModule。在src目录下创建一个app.module.ts文件来定义AppModule，代码如下：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
6: 添加main.ts文件
Angular项目一般有一个入口文件，通过这个文件来串联起整个项目。示例代码如下：
//main.ts
import 'reflect-metadata';
import 'zone.js';
import { platforBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platforBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
7：创建index.html宿主页面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</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>加载中....</app-root>
<script src="bundle.js"></script>
</body>
</html>
8：创建webpack.config.js
//webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: './scr/main.js'
output: {
filename: './bundle.js'
},
resolve: {
root: [path.join(__dirname, 'scr')],
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
}
- 重点：一个Angular项目必须要有一个模块和一个组件。
2：详细介绍Angular-cli命令行工具
创建项目和组件：
- ng new (创建angular项目)
-
ng generate (创建项目中的组件等内容)
具体操作如下图：
1505046247(1).png
-
启动服务：
- ng serve --open (--open是在浏览器中打开的意思)
-
测试和打包
- ng test
- ng build
特点跟特性：借助了 Amber Cli （负责：项目构建、项目的组织架构等） / WebPack（负责：调试、打包、测试）
3: Angular文件结构分析
以Angular-cli创建的项目目录为基础。
- e2e 文件端对端测试
- src 我们主要的开发代码的存放位置
- angular-cli.json angular-cli配置
- karma.config.js 单元测试文件
- package.json npm包管理配置
- Protractor.conf.js 这也是测试的相关文件
- README.md 有我们的cli说明
- Tsconfig.json 我们的Typescript配置
- Tslint.json 是我们Typescipt代码格式校验文件
src 目录下结构
- app 根模块、根组件
- assets 放图片、字体文件等等
- environments 配置环境。生成环境、开发环境、测试环境
- index.html 单应用的唯一页面
- main.ts 整个项目的入口脚本
- polyfills.ts 兼容老版本的浏览器
- styles.css 全局样式配置
- test.ts 测试用例的ts
4：源码的位置分析
- @angular/core 存放核心代码，如变化监测机制、依赖注入机制、渲染等，核心功能的实现，装饰器也会存放在这个模块。
- @angular/common 存放一些常用的内置指令和内置管道等。
- @angular/froms 存放表单相关内置组件与指令。
- @angular/http 存放网络请求相关的服务等。
- @angular/router 存放路由相关
- @angular/platform-<X> 存放引导启动相关工具。
5：WebStrom配置Angular
- 选择File -> settings -> Languages & Frameworks -> Javascript，选择编译方式为ECMAScript 6。
- 选择File -> settings -> Languages & Frameworks -> Javascript->Libraries ->右侧面板选择 Add ->在弹出框中选择绿色加号，再选择目录 ->在弹出的窗口中选择当前项目下的node_modules 文件夹 ->一路ok和apply。等待IDE加载完毕即可。
6: Bootstrap等插件的安装使用
我们使用bootstrap的样式，在控制层方面（bootstrap涉及到js的地方）我们使用ngx-bootstrap。
官方地址：http://valor-software.com/ngx-bootstrap/#/涉及到javascript操作的部分在这个链接里找解决方案。
AngularCli项目集成Bootstrap步骤：
- npm install ngx-bootstrap bootstrap –save
- 在项目目录下的 .angular-cli.json中的“styles”参数中添加：
"../node_modules/bootstrap/dist/css/bootstrap.min.css" - 重启项目就可以直接使用bootstrap的样式了，例如form-group,btn…
7：启动过程详解
需要掌握的内容：
- 启动时加载哪儿页面。（index.html）
- 启动时加载哪个脚本。（main.ts）
- 启动时做了什么事情。
第三个问题要从main.ts来分析重点：
- 在main.ts中platformBrowserDynamic是动态引导项目加载。会把项目指引到AppModule中去。
- AppModule中的bootstrap元数据，会指定模块的根组件也就是app.component.ts
- 根组件暴露出select选择器为app-root。而index.html中加载了<app-root></app-root>标签。从而实现了页面的显示
