Angular2 Material Design开发环境搭建

　　Angular2和Angular1有什么区别？就是Java和JavaScript，雷锋和雷锋塔的区别。刚会用Angular1做些小项目，发现Angular2来了，据说性能上提升还是蛮多，所以还是从0开始吧。Angular2虽然还是支持用es5代码开发，但连官方教程都已经用TypeScript，对于之前没有接触过的人来说，学习还是有些成本的。

　　作为一个新手，搭建环境还是折腾了很久，所以记录下来方便其他新手。

　　流程:

• 使用 angular-cli创建项目
• 集成 Angular Material
  

　　angular-cli和Angular Material目前都还在beta阶段，毕竟Angular2正式发布也没有很久，用于生产请自己斟酌。

　　创建Angular2项目

　　安装angular-cli

1. npm install -g angular-cli

复制代码

　　在适当的位置创建项目

1. ng new angular2Demo
   
2. cd angular2Demo
   
3. ng serve

复制代码

　　创建过程会自动使用npm下载依赖,ng serve即启动内置的服务器,默认端口4200。使用浏览器打开 http://localhost:4200，可以看到项目已经启起来了。

　　此时打开chrome的network,可以发现有个vendor.bundle.js特别大，有2M多，图上4M多是因为我已经加了Material库。这是webpack把所有依赖的库都打包在一起了，而且没有任何压缩。

　　显然这么大的文件放到生产环境中是不合适的。这是因为默认情况下,启动的是开发模式。

　　生成生产环境代码:

1. ng build --prod --env=prod

复制代码

　　执行后，会在项目根目录下生成dist目录，所有优化后的代码

　　以生产模式启动服务器

1. ng serve --prod

复制代码

　　再看network,发现所有资源自动打上了版本号vendor.xxx.bundle.js也被压到了200多k。

　　集成Material

　　安装　

　　Material是以组件的形式开发的，所以安装也使用npm

1. npm install --save @angular/material

复制代码

　　2.修改app.module.ts

　　打开src/app/app.module.ts,引入material模块

1. import { BrowserModule } from '@angular/platform-browser';
   
2. import { NgModule } from '@angular/core';
   
3. import { FormsModule } from '@angular/forms';
   
4. import { HttpModule } from '@angular/http';
   
5. 
   
6. import { AppComponent } from './app.component';
   
7. import { MaterialModule } from '@angular/material';
   
8. 
   
9. @NgModule({
   
10.   declarations: [
    
11.     AppComponent
    
12.   ],
    
13.   imports: [
    
14.     BrowserModule,
    
15.     FormsModule,
    
16.     HttpModule,
    
17.     MaterialModule.forRoot()
    
18.   ],
    
19.   providers: [],
    
20.   bootstrap: [AppComponent]
    
21. })
    
22. export class AppModule { }

复制代码

　　引入css样式

　　在src目录下新建material-design.scss:

1. [url=home.php?mod=space&uid=45209]@Import[/url] '~@angular/material/core/theming/all-theme';
   
2. 
   
3. // NOTE: Theming is currently experimental and not yet publically released!
   
4. @include md-core();
   
5. $primary: md-palette($md-deep-purple);
   
6. $accent:  md-palette($md-amber, A200, A100, A400);
   
7. $theme: md-light-theme($primary, $accent);
   
8. @include angular-material-theme($theme);
   
9. .m2app-dark {
   
10.   $dark-primary: md-palette($md-pink, 700, 500, 900);
    
11.   $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
    
12.   $dark-warn:    md-palette($md-deep-orange);
    
13.   $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
    
14.   @include angular-material-theme($dark-theme);
    
15. }

复制代码

　　打开根目录下的angular-cli.json，styles配置增加刚刚的文件

1. "apps": [
   
2.     {
   
3.       "root": "src",
   
4.       "outDir": "dist",
   
5.       "assets": [
   
6.         "assets",
   
7.         "favicon.ico"
   
8.       ],
   
9.       "index": "index.html",
   
10.       "main": "main.ts",
    
11.       "test": "test.ts",
    
12.       "tsconfig": "tsconfig.json",
    
13.       "prefix": "app",
    
14.       "mobile": false,
    
15.       "styles": [
    
16.         "styles.css",
    
17.         "material-design.scss"
    
18.       ],
    
19.       "scripts": [],
    
20.       "environments": {
    
21.         "source": "environments/environment.ts",
    
22.         "dev": "environments/environment.ts",
    
23.         "prod": "environments/environment.prod.ts"
    
24.       }
    
25.     }
    
26.   ],

复制代码

　　配置MaterialDesign字体

　　index.html增加：

1. <link href="//fonts.lug.ustc.edu.cn/icon?family=Material+Icons" rel="stylesheet">

复制代码

　　使用了中科大的google font镜像

　　如果需要用到md-slider(可拖动的进度条)和md-slide-toggle(带滑动动画的开关),还需要安装HammerJS，否则到此环境搭建已完成。

1. npm install –save hammerjs
   
2. 
   
3. npm install –save-dev @types/hammerjs

复制代码

　　修改src/app/app,module.ts,引入hammerjs

1. import 'hammerjs';

复制代码

　　修改src/tsconfig.json,配置types增加hammerjs

1. {
   
2.   "compilerOptions": {
   
3.     "baseUrl": "",
   
4.     "declaration": false,
   
5.     "emitDecoratorMetadata": true,
   
6.     "experimentalDecorators": true,
   
7.     "lib": ["es6", "dom"],
   
8.     "mapRoot": "./",
   
9.     "module": "es6",
   
10.     "moduleResolution": "node",
    
11.     "outDir": "../dist/out-tsc",
    
12.     "sourceMap": true,
    
13.     "target": "es5",
    
14.     "typeRoots": [
    
15.       "../node_modules/@types"
    
16.     ],
    
17.     "types": [
    
18.       "hammerjs"
    
19.     ]
    
20.   }
    
21. }

复制代码

　　所有配置到此结束，我们写一段简单的代码测试一下。

　　编辑src/app/app.component.html:

1. <md-progress-spinner mode="indeterminate" ></md-progress-spinner>

复制代码

　　启动服务器，如果所有配置没有错，页面上应该显示旋转的进度圈。

路过 帮顶 嘿嘿

个人觉得js是一种解释性语言，它提供了一个非常方便的开发过程，不需要编译，js与HTML标识结合在一起，从而方便用户的使用操作。