UDN-企业互联网技术人气社区

板块导航

浏览  : 831
回复  : 2

[AngularJS] Angular2 Material Design开发环境搭建

[复制链接]
genie1003的头像 楼主
发表于 2017-1-9 15:19:00 | 显示全部楼层 |阅读模式
  Angular2和Angular1有什么区别?就是Java和JavaScript,雷锋和雷锋塔的区别。刚会用Angular1做些小项目,发现Angular2来了,据说性能上提升还是蛮多,所以还是从0开始吧。Angular2虽然还是支持用es5代码开发,但连官方教程都已经用TypeScript,对于之前没有接触过的人来说,学习还是有些成本的。

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

  流程:


  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.png

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

  生成生产环境代码:
  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. import { AppComponent } from './app.component';
  6. import { MaterialModule } from '@angular/material';

  7. @NgModule({
  8.   declarations: [
  9.     AppComponent
  10.   ],
  11.   imports: [
  12.     BrowserModule,
  13.     FormsModule,
  14.     HttpModule,
  15.     MaterialModule.forRoot()
  16.   ],
  17.   providers: [],
  18.   bootstrap: [AppComponent]
  19. })
  20. 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. // NOTE: Theming is currently experimental and not yet publically released!
  3. @include md-core();
  4. $primary: md-palette($md-deep-purple);
  5. $accent:  md-palette($md-amber, A200, A100, A400);
  6. $theme: md-light-theme($primary, $accent);
  7. @include angular-material-theme($theme);
  8. .m2app-dark {
  9.   $dark-primary: md-palette($md-pink, 700, 500, 900);
  10.   $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  11.   $dark-warn:    md-palette($md-deep-orange);
  12.   $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
  13.   @include angular-material-theme($dark-theme);
  14. }
复制代码

  打开根目录下的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. 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>
复制代码

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

相关帖子

发表于 2017-1-9 15:19:31 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

发表于 2017-1-9 15:26:14 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部