angular cli安装

1、node.js官网下载安装最新的nodejs
https://nodejs.org/en/

2、安装angular-cli (视网络环境，安装的时间比较长)
https://github.com/angular/angular-cli
npm install -g @angular/cli
翻墙后安装多次（并且命令提示符以管理员身份运行安装都失败）
只好用cnpm来安装了 https://npm.taobao.org/
打开cmd（以管理员身份运行），将npm映射成淘宝的服务器

npm install -g cnpm --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org/)   

安装之前先安装一下typescript
cnpm install -g typescript
cnpm install -g @angular/cli

图片.png

cli的使用 ng help
ng --version查看安装版本

Paste_Image.png

使用ng new angular2start 创建项目

Paste_Image.png

cd angular2start
上面new一个项目的过程中会npm安装包，此时又要翻墙，
所以可以ctrl+c停止，再通过cnpm命令来安装

当然也可以用命令来跳过 npm对包的安装

ng new ngApp --skip-install
//简写
ng new ngApp -si
还可以指定样式形式
ng new ngApp -si --style=scss

Paste_Image.png
最后 ng serve 来启动项目 ng serve --open (加上--open是自动打开浏览器)
可以看到浏览器自动打开了 http://localhost:4200
(备注：ng serve --prod --aot 命令可以启用预编译，使生成的文件体积更小)

使用ng命令创建组件Components,指令Directives、管道Pipes、服务Services

ng generate component my-new-component
ng g component my-new-component # using the alias
 
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp

ng后面的g=generate创建的意思
scaffold       usage
Component     ng g component my-new-component
Directive     ng g directive my-new-directive
Pipe           ng g pipe my-new-pipe
Service     ng g service my-new-service
Class         ng g class my-new-class
Interface     ng g interface my-new-interface
Enum          ng g enum my-new-enum
Module       ng g module my-module

项目也可以用cnpm安装其它的包，如jQuery、bootstrap等

cnpm install jquery --save-dev
cnpm install @types/jquery --save-dev

cnpm install bootstrap --save-dev
cnpm install @types/bootstrap --save-dev

一直碰到一个问题就是引用node_modules中的css样式
例如想使用bootstrap的css样式，一般的做法是在.angular-cli.json中引入
像这样

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

不知道为啥我这样不起作用，不知道是哪里的问题(有人说是cnpm安装的问题...)
只好在styles.css中作一次@import引入

@import "~bootstrap/dist/css/bootstrap.css";

打开vsc编辑器，开启ng2开发学习之旅！！！！
vsc格式化代码的快捷键 alt+shift+f