Angular起步篇

1：环境搭建

今天给大家介绍4种环境搭建的方法。

一：Angular-cli的安装

官方指导文档：www.angular.cn/guide/quickstart

请使用cnpm来安装，或者配置淘宝镜像。
使用原生npm安装可能会遇到的问题：

1. 需要python的环境
2. 可能会依赖某些franework导致会要求安装Visual Studio（在下文中会为大家介绍webstrom的配置）
3. node-sass // 因为ZF导致，被墙掉了。
4. node-gyp模块可能会编译错误。

如果还遇到问题可以参考：http://blog.csdn.net/zhy13087344578/article/details/60745667

二：Angular-seed

Angular的种子文件，他有很多的版本，我们今天通过官方的seed来安装。

官方的angular-seed地址：https://github.com/angular/angular2-seed

步骤：

1. git clone https://github.com/angular/angular2-seed.git安装种子文件(没有git的，可以自己down zip下来，然后打开cmd，执行cnpm install)。

前置需安装的包文件

1. npm install -g webpack webpack-dev-server typescript
2. npm install
3. npm start
4. 访问本地 localhost:3000

seed文件的优点：

1. 自带简单的路由
2. 自带From模块
3. 带有Http请求模块
4. 体现出了Angular的核心功能
5. 项目体量小

三：基于webpack安装（爽歪歪的方法）

• 优点：可以让我们自由的配置webpack.config.js
• 步骤：https://github.com/kunl/Angular-webpack-AOT
• 场景：从Node转到前端的公司或者项目推荐用这种方式

手动创建项目（真正的勇士）

• 条件：大神级别的使用方法（我不是大神，会简单的介绍一下）
• 优点：想要什么在项目中添加什么，非常快捷
• 步骤：

1. 准备工作：

在开始搭建Angular环境前，还需要做一些准备工作，包括安装Angular所依赖的基础环境Node.js，可以在官网(https://nodejs.org/en/download/)下载安装，需要确认Node.js版本为v4.x.x以上，npm版本为v3.x.x以上。使用版本为node v5.11.0版本。

2. 搭建步骤

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
Hello World

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宿主页面

  
  
  

  
  


  加载中....
  

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命令行工具

官方文档：https://github.com/angular/angular-cli/wiki

创建项目和组件：

• ng new (创建angular项目)

• ng generate (创建项目中的组件等内容)
  具体操作如下图：

  
  
  

  1505046247(1).png

• 启动服务：

  • ng serve --open (--open是在浏览器中打开的意思)

• 测试和打包

  • ng test
  • ng build

特点跟特性：借助了 Amber Cli （负责：项目构建、项目的组织架构等） / WebPack（负责：调试、打包、测试）

3: Angular文件结构分析

以Angular-cli创建的项目目录为基础。

1. e2e 文件端对端测试
2. src 我们主要的开发代码的存放位置
3. angular-cli.json angular-cli配置
4. karma.config.js 单元测试文件
5. package.json npm包管理配置
6. Protractor.conf.js 这也是测试的相关文件
7. README.md 有我们的cli说明
8. Tsconfig.json 我们的Typescript配置
9. Tslint.json 是我们Typescipt代码格式校验文件

src 目录下结构

1. app 根模块、根组件
2. assets 放图片、字体文件等等
3. environments 配置环境。生成环境、开发环境、测试环境
4. index.html 单应用的唯一页面
5. main.ts 整个项目的入口脚本
6. polyfills.ts 兼容老版本的浏览器
7. styles.css 全局样式配置
8. test.ts 测试用例的ts

4：源码的位置分析

• @angular/core 存放核心代码，如变化监测机制、依赖注入机制、渲染等，核心功能的实现，装饰器也会存放在这个模块。
• @angular/common 存放一些常用的内置指令和内置管道等。
• @angular/froms 存放表单相关内置组件与指令。
• @angular/http 存放网络请求相关的服务等。
• @angular/router 存放路由相关
• @angular/platform- 存放引导启动相关工具。

5：WebStrom配置Angular

1. 选择File -> settings -> Languages & Frameworks -> Javascript，选择编译方式为ECMAScript 6。
2. 选择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步骤：

1. npm install ngx-bootstrap bootstrap –save
2. 在项目目录下的 .angular-cli.json中的“styles”参数中添加：
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
3. 重启项目就可以直接使用bootstrap的样式了，例如form-group,btn…

7：启动过程详解

需要掌握的内容：

1. 启动时加载哪儿页面。（index.html）
2. 启动时加载哪个脚本。（main.ts）
3. 启动时做了什么事情。

第三个问题要从main.ts来分析重点：

1. 在main.ts中platformBrowserDynamic是动态引导项目加载。会把项目指引到AppModule中去。
2. AppModule中的bootstrap元数据，会指定模块的根组件也就是app.component.ts
3. 根组件暴露出select选择器为app-root。而index.html中加载了标签。从而实现了页面的显示