Angular介绍

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.项目列表的介绍：

　　

　　

 首层目录
 |--e2e // 自动化集成测试目录
 |-- node_modules // npm/cnpm第三方依赖包存放目录
 |-- src // 应用源代码目录
 |-- .editorconfig // 不同编译器统一代码风格
 |-- .gitignore // git中的忽略文件列表
 |-- angular.json // Angular的配置文件
 |-- browserslist // 配置浏览器兼容性的文件
 |-- karma.conf.js // 自动化测试框架Karma的配置文件
 |-- package-lock.json // 依赖包版本锁定文件
 |-- package.json // 标准的npm工具的配置文件
 |-- README.md // 项目说明的MakeDown文件
 |-- tsconfig.app.json // app项目的TypeScript的配置文件
 |-- tsconfig.json // 整个工作区的TypeScript配置文件
 |-- tsconfig.spec.json // 用于测试的TypeScript配置文件
 |-- tslint.json // TypeScript的代码静态扫描配置

 |-- src目录
 |-- app // 工程源码目录
 |-- assets // 资源目录
 |-- environments // 环境配置目录
 |-- favicon.ico // header里的icon
 |-- index.html // 单页应用的宿主HTML
 |-- main.ts // 入口ts文件
 |-- polyfills.ts // 不同浏览器兼容脚本加载
 |-- karma.conf.js // 自动化测试框架Karma的配置文件
 |-- style.css // 整个项目的全局css
 |-- test.ts // 测试入口

 |-- app目录
 |-- app-routing.module.ts // app路由
 |-- app.component.css // app的css
 |-- app.component.html // app的html(也就是要写html的部分)
 |-- app.component.spec.ts // app的测试
 |-- app.component.ts // app的组件
 |-- app.module.ts // app的模块
 |-- environments目录
 |-- environments.prod.ts // 生产环境
 |-- environments.ts // 开发环境

 // 根模块：app.module.ts模块

 // 该文件是Angular根模块，告诉Argular如何组装应用

 // BrowserModule：浏览器解析的模块
 import { BrowserModule } from '@angular/platform-browser';
 // Angular核心模块
 import { NgModule } from '@angular/core';

 // 路由模块
 import { AppRoutingModule } from './app-routing.module';

 // 根组件
 import { AppComponent } from './app.component';
 import { NewsComponent } from './components/news/news.component';

 // 导入双向数据绑定用到的模块
 import { FormsModule } from '@angular/forms'

 // @NgModule：装饰器，接受一个元数据对象，告诉Angular如何编译和启动应用
 @NgModule({
   declarations: [ // 配置当前项目运行的组件
     AppComponent, NewsComponent
   ],
   imports: [ // 配置当前模块运行依赖的其他模块。
     BrowserModule,
     AppRoutingModule,
     FormsModule
   ],
   providers: [],  // 配置项目所需要的服务

   bootstrap: [AppComponent] // 指定应用的主视图（称为根组件）通过引导AppModule来启动应用，一般写的是根组件
 })
 export class AppModule { }