Angular4学习笔记01——基本安装

##Angular4——安装环境 首先须要安装node.js和npm，最新的nodejs已经集成了npm，因此不须要单独安装npm了。
直接下载nodejs的安装包，下一步直到安装结束。
安装完以后，在cmd窗口下，经过node - v和npm -v来查询node和npm版本，若是正确的现实版本号，则说明node和npm安装成功。

安装完以后能够指定一下npm库的位置，推荐使用淘宝镜像地址，提升下载插件速度，若不指定也能够，可是会直接在国外服务器下载，速度较慢。

npm config set registry https://registry.npm.taobao.org 
npm -loglevel info install grunt
复制代码

如果有本身的私有库服务器也是能够指定在这里的。 前面的安装工做完成后，调用下面的指令，

npm install -g @angular/cli
npm install node-sass --save-dev
复制代码

安装CLI工具，调用

ng -v
复制代码

若是能出现版本号和angular标识，则说明CLI安装完成。

####一、建立项目 ng new XXXX(项目名称) 能够经过命令行的方法建立一个须要的项目。

如图是一个test的项目，参照如图所示，说明一下angular4项目的目录结构。

首层目录：
node_modules        第三方依赖包存放目录
e2e                 端到端的测试目录  用来作自动测试的
src                 应用源代码目录  
.angular-cli.json   Angular命令行工具的配置文件。后期可能会去修改它，引一些其余的第三方的包  好比jquery等
karma.conf.js       karma是单元测试的执行器，karma.conf.js是karma的配置文件
package.json        这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上咱们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期咱们可能会修改这个文件。
protractor.conf.js  也是一个作自动化测试的配置文件
README.md           说明文件
tslint.json         是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它
复制代码

src目录：
app目录               包含应用的组件和模块，咱们要写的代码都在这个目录
assets目录            资源目录，存储静态资源的  好比图片
environments目录      环境配置。Angular是支持多环境开发的，咱们能够在不一样的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
index.html            整个应用的根html，程序启动就是访问这个页面
main.ts               整个项目的入口点，Angular经过这个文件来启动项目
polyfills.ts          主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
styles.css            主要是放一些全局的样式
tsconfig.app.json     TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
tsconfig.spec.json    不用管
test.ts               也是自动化测试用的
typings.d.ts          不用管
复制代码

app目录：
app.component.css		组件样式
app.component.html		组件模板页面
app.component.spec.ts	暂时母鸡
app.component.ts		组件
app.module.ts			模块
复制代码

这里的css和html和通常的html页面没有太大区别，比较重要的是组件和模块。下面详细看一下组件和模块文件的内容：

/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';

/*用装饰器定义了一个组件以及组件的元数据  全部的组件都必须使用这个装饰器来注解*/
@Component({
  /*组件元数据  Angular会经过这里面的属性来渲染组件并执行逻辑
  * selector就是css选择器，表示这个组件能够经过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展现该组件的内容
  *templateUrl  组件的模板，定义了组件的布局和内容
  *styleUrls   该模板引用那个css样式
  * */
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
/*AppComponent原本就是一个普通的typescript类，可是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，须要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
  /*这个类实际上就是该组件的控制器，咱们的业务逻辑就是在这个类中编写*/
  title = '学习Angular';
}
复制代码

组件相关的概念：
1.组件元数据装饰器（@Component）
简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类.
Component装饰器包含多个属性，这些属性的值叫作元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑。
*2.模板（Template） *
咱们能够经过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，通常来讲，模板看起来很像html，可是咱们能够在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。
*3.控制器（controller） *
控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件全部的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器经过数据绑定与模板来通信，模板展示控制器的数据，控制器处理模板上发生的事件。
...
还有其余的项目一些属性，在后面使用到的时候再具体说明

import { StarsComponent } from './stars/stars.component';


@NgModule({
  declarations: [//声明模块中有哪些东西，只能声明 组件 指令 管道
    AppComponent,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    CarouselComponent,
    ProductComponent,
    StarsComponent
  ],
  imports: [//声明该模块依赖的模块
    BrowserModule
  ],
  providers: [],//默认为空，声明模块中听过的服务
  bootstrap: [AppComponent]//声明模块的主组件
})
export class AppModule { }
复制代码

####二、安装第三方插件 安装jQuery
npm install jquery --save
安装bootstrap
npm install bootstrap --save

安装好的第三方依赖在package.json文件中体现依赖名和版本：

"private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
复制代码

在安装完jquery和bootstrap后，须要在.angular-cli.json文件里面对它们的js和css进行引用：

"testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],
  "environmentSource": "environments/environment.ts",
复制代码

引用完以后还没法直接使用jQuery和bootstrap的内容，由于anjular是使用的typescript，因此还须要安装一下jquery和bootstrap的类型文件：
npm install @types/jquery --save npm install @types/bootstrap --save
让typescript能够去识别jquery和bootstrap

####三、运行项目 运行一个angular项目，能够依赖于开发工具，也能够经过命令行的形式，在对应项目的根目录下执行命令行： ng serve就能够启动项目。