1：环境搭建
今天给大家介绍4种环境搭建的方法。
一：Angular-cli的安装
官方指导文档：www.angular.cn/guide/quickstart
请使用cnpm来安装，或者配置淘宝镜像。
使用原生npm安装可能会遇到的问题：
- 需要python的环境
- 可能会依赖某些franework导致会要求安装Visual Studio（在下文中会为大家介绍webstrom的配置）
- node-sass // 因为ZF导致，被墙掉了。
- node-gyp模块可能会编译错误。
如果还遇到问题可以参考：http://blog.csdn.net/zhy13087...
二：Angular-seed
Angular的种子文件，他有很多的版本，我们今天通过官方的seed来安装。
官方的angular-seed地址：https://github.com/angular/an...
步骤：
- git clone https://github.com/angular/an...安装种子文件(没有git的，可以自己down zip下来，然后打开cmd，执行cnpm install)。
前置需安装的包文件
- npm install -g webpack webpack-dev-server typescript
- npm install
- npm start
- 访问本地 localhost:3000
seed文件的优点：
三：基于webpack安装（爽歪歪的方法）
- 优点：可以让我们自由的配置webpack.config.js
- 步骤：https://github.com/kunl/Angul...
- 场景：从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"
]
}
}
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 { }
//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命令行工具
官方文档：https://github.com/angular/an...
创建项目和组件：
- ng new (创建angular项目)
- ng generate (创建项目中的组件等内容)
具体操作如下图：
http://chuantu.biz/t6/44/1505...
-
启动服务：
- 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...涉及到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）
- 启动时做了什么事情。
原文链接：https://www.f2er.com/angularjs/146111.html第三个问题要从main.ts来分析重点：
