Angulay介绍
1.介绍：是一个用于Html和TypeScript构建客户端应用平台与框架。Angular 本身就是用 TypeScript 写成的。基本构造块是 NgModule，它为组件提供了编译的上下文环境。
NgModule 会把相关的代码收集到一些功能集中
2.安装和创建项目：
- 安装脚手架：npm install -g @angular/cli
- 创建项目：ng new my-app
- 运行项目：ng serve --open 或者 npm start
3.模块的介绍：
- 它拥有自己的模块化系统，称作 NgModule。一个 NgModule 就是一个容器也就是模块，每个 Angular 应用都至少有一个 NgModule 类，也就是根模块
- NgModule 是一个带有
@NgModule()装饰器的类，它是一个函数，接收一个元数据对象，该对是用来描述模块的
4.项目列表的介绍：
1 首层目录 2 |--e2e // 自动化集成测试目录 3 |-- node_modules // npm/cnpm第三方依赖包存放目录 4 |-- src // 应用源代码目录 5 |-- .editorconfig // 不同编译器统一代码风格 6 |-- .gitignore // git中的忽略文件列表 7 |-- angular.json // Angular的配置文件 8 |-- browserslist // 配置浏览器兼容性的文件 9 |-- karma.conf.js // 自动化测试框架Karma的配置文件 10 |-- package-lock.json // 依赖包版本锁定文件 11 |-- package.json // 标准的npm工具的配置文件 12 |-- README.md // 项目说明的MakeDown文件 13 |-- tsconfig.app.json // app项目的TypeScript的配置文件 14 |-- tsconfig.json // 整个工作区的TypeScript配置文件 15 |-- tsconfig.spec.json // 用于测试的TypeScript配置文件 16 |-- tslint.json // TypeScript的代码静态扫描配置 17 18 19 |-- src目录 20 |-- app // 工程源码目录 21 |-- assets // 资源目录 22 |-- environments // 环境配置目录 23 |-- favicon.ico // header里的icon 24 |-- index.html // 单页应用的宿主HTML 25 |-- main.ts // 入口ts文件 26 |-- polyfills.ts // 不同浏览器兼容脚本加载 27 |-- karma.conf.js // 自动化测试框架Karma的配置文件 28 |-- style.css // 整个项目的全局css 29 |-- test.ts // 测试入口 30 31 32 |-- app目录 33 |-- app-routing.module.ts // app路由 34 |-- app.component.css // app的css 35 |-- app.component.html // app的html(也就是要写html的部分) 36 |-- app.component.spec.ts // app的测试 37 |-- app.component.ts // app的组件 38 |-- app.module.ts // app的模块 39 |-- environments目录 40 |-- environments.prod.ts // 生产环境 41 |-- environments.ts // 开发环境
1 // 根模块：app.module.ts模块 2 3 // 该文件是Angular根模块，告诉Argular如何组装应用 4 5 // BrowserModule：浏览器解析的模块 6 import { BrowserModule } from '@angular/platform-browser'; 7 // Angular核心模块 8 import { NgModule } from '@angular/core'; 9 10 // 路由模块 11 import { AppRoutingModule } from './app-routing.module'; 12 13 // 根组件 14 import { AppComponent } from './app.component'; 15 import { NewsComponent } from './components/news/news.component'; 16 17 // 导入双向数据绑定用到的模块 18 import { FormsModule } from '@angular/forms' 19 20 // @NgModule：装饰器，接受一个元数据对象，告诉Angular如何编译和启动应用 21 @NgModule({ 22 declarations: [ // 配置当前项目运行的组件 23 AppComponent, NewsComponent 24 ], 25 imports: [ // 配置当前模块运行依赖的其他模块。 26 BrowserModule, 27 AppRoutingModule, 28 FormsModule 29 ], 30 providers: [], // 配置项目所需要的服务 31 32 bootstrap: [AppComponent] // 指定应用的主视图（称为根组件）通过引导AppModule来启动应用，一般写的是根组件 33 }) 34 export class AppModule { }