Angular介绍

Posted on 2020-03-19 19:43  张雪冬前端学习园地  阅读(466)  评论(0)  编辑  收藏  举报

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 { }