angular学习总结一——安装

angular学习总结一（安装及常用命令）

环境安装

1.安装nodejs、npm、python2（Python3好像不可以）
2.安装@angular/cli，npm install -g @angular/cli@latest
当前环境如下

zengwe@zengwe-PC:inactive$ python -V
Python 2.7.13
zengwe@zengwe-PC:inactive$ node -v
v6.3.1
zengwe@zengwe-PC:inactive$ npm -v
4.4.2
zengwe@zengwe-PC:inactive$ ng version
@angular/cli: 1.2.4
node: 6.3.1
os: linux x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/compiler-cli: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/platform-server: error
@angular/router: 4.3.1

创建项目

new 一个项目

zengwe@zengwe-PC:html$ ng new test1
You are running version 6.3.1 of Node, which will not be supported in future
versions of the CLI. The official Node version that will be supported is 6.9 and greater.

To disable this warning use "ng set --global warnings.nodeDeprecation=false".installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.

此时会卡在这里windows下按ctrl+c，Linux下ctrl+d

目录结构如下

zengwe@zengwe-PC:test1$ tree   -I '*node_module*' ./
./
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json
5 directories, 25 files

进入目录

zengwe@zengwe-PC:test1$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
zengwe@zengwe-PC:test1$ ng server
You are running version 6.3.1 of Node, which will not be supported in future
versions of the CLI. The official Node version that will be supported is 6.9 and greater.

To disable this warning use "ng set --global warnings.nodeDeprecation=false".** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: ba2d865244aa9d57a756                                                              
Time: 19053ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 178 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.28 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.19 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

访问127.0.0.1:4200

此时成功了，如果失败，查看error的提示，stackOverflow，baidu，google，答案真的不要太多，注意keywords：angular2/4，不然是angularJS的答案

常用命令

首先要学会看命令参数

zengwe@zengwe-PC:test1$ ng help
You are running version 6.3.1 of Node, which will not be supported in future
versions of the CLI. The official Node version that will be supported is 6.9 and greater.

To disable this warning use "ng set --global warnings.nodeDeprecation=false".ng build 
  Builds your app and places it into the output path (dist/ by default).
  aliases: b
  --target (String) (Default: development) Defines the build target.
  ……
  ……

我目前常用到的命令（开发阶段）

ng new project ##新建一个项目
ng server ##运行这个项目
ng g c MyComponent #创建一个组件，他默认会在app.module.ts中被declare，因为在ng help中没的这个的提示，所以到先在我都不知道怎么样解决这个问题，希望有人解惑！
ng g m MyModule #创建一个module

需要部署到服务器或者与后端正式对接时需要build这个小项目时

ng build –base-href –prod##–base-href 改变index.html中中的路径，angular的运行的路由就是以这个路径为根，–prod 首先引入的是src/environments/environment.prod.ts，且生成额文件还会被压缩

angular-cli.json中的配置

zengwe@zengwe-PC:test1$ cat .angular-cli.json 
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "test1"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

“outDir”: “dist”#build时生成文件的位置，
“deployUrl”:”/v/eps/”#静态文件的位置
别的看字面意思应该是可以懂的
ps：在linux可能看不到angular-cli.json，因为在创建是生成的是 .angular-cli.json,最前面的点让文件隐藏了，$ls -a 可以显示，在资源管理下ctrl+h