初识Angular

学习Angular

1、环境WebStrom(推荐2017版本)

由于Angular2之后由Typescript编写，新版本支持的TypeScript版本较高，推荐新版本。

2、安装nodeJS

注意：可以将npm替换为cnpm

3、安装Angular cli

cnpm install -g @angular/cli

安装.png

用 ng v 检测有没有安装成功：如图

安装成功.png

4、安装TypeScript

cnpm install -g typescript

安装typescript.png

5、创建项目

（1）在命令窗口：ng new 项目名
（2）在WebStrom中File=>New=>project=>Angular CLI
比较慢，需要耐心等待

新建项目.png

6、会自动化的创建工程，根据package.json中的依赖（"dependencies"）自动生成node_modules文件。工程目录说明：

工程目录

e2e：端到端的测试目录（用来做自动测试的）
node_modules：第三方依赖包存放目录
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：tslin的配置文件（定义TypeScript代码质量检查的规则）

src目录
app目录：包含应用程序的组件和模块(代码目录)
（1）app.component.css ；app组件的样式
（2）app.component.html ；app组件的展示页面
（3）app.component.spec.ts；测试文件
（4）app.component.ts；app组件的逻辑文件

app.component.ts

（5）app.module.ts；这个文件表示模块；Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象
几个重要的属性如下：
declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类：组件、指令和管道。
exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板。
imports - 本模块组件模板中需要由其它导出类的模块。
providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。