Angular2.0-第一节-1小时快速上手

发表于 | 分类于 ，

Angular-CLI 安装配置

简介

工具链 Tool Chains based on NodeJs

  • GRUNT
  • KARMA
  • Jasmine
  • less
  • sass

前端风格

  • 扁平化极简主义
  • 模拟物料风格

安装

安装方法一

1
2
3
4
5
$ npm install -g angular-cli
$ ng --version
$ ng help
$ ng new my-project1
$ ng serve # 启动项目

Widnows平台，node-gyp 这个包可能需要安装 Visual Studio （社区版）即可

npm 删除设置用法

1
$ npm config delete registry

安装方法2

淘宝npm
https://npm.taobao.org/
教程建议使用 cnpm 来安装 Angular-CLI, 会解避免方法一中的问题。

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

清理

官方都是推荐用新版@angular/cli
按官方github试着先清掉再安装

1
2
3
4
5
6
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

参考
angular-cli安装 这两种全局安装有什么区别

ng generate

参数

  • cl:class
  • c:component
  • d:directive
  • e:enum
  • m:module
  • p:pipe
  • s:service

简化用法

1
$ ng g c User

启动参数

1
$ ng server --prod --aot

启动了aot后，还会启动tree shaking（最小化编译），生成最小化bundle

ahead of time compile 提前编译,与jit对应

注：使用上述方法即可启用AOT，官网商的文章过时了！

编译

1
$ ng build --prod --aot

生成dist目录

自动化测试

karma 工具的使用。

1
$ ng test

Angular 种的3大核心概念

  • Component
  • Module
  • Route

Angular 核心架构思想

  • 组件化
  • 依赖注入
  • 数据绑定

UI库

  • Angular-Material
  • Prime-NG
  • ng2-bootstrap
  • ionic

NiceFish