一、简介
Angular是三大框架之一，是最早开始出现并流行的框架。它是使用HTML、CSS、TypeScript编写的一个重量级框架，为大型应用开发而设计。使用Angular开发出来的客户端应用是高度模块化的。Angular提供了cli工具，组件和模块都可以使用cli工具提供的命令行来创建。Angular对于状态管理是相当到位的，可以轻松实现组件之间的数据共享。
二、Angular架构
（一）模块
Angular应用是由一个个模块组成的。这里的模块就是ngModel，是Angular中组织代码结构的一种方式。一个Angular应用至少有一个ngModel，称之为根模块。Angular应用启动过程中会使用根模块。在Angular中,ESModel和ngModel是同时使用的。ESModel是以文件为单位的，而一个ngModel可以由多个文件组成。ngModel是由NgModel装饰的类。
（二）组件
组件是用来描述用户界面，包括三部分：组件类（界面逻辑）、组件模版（HTML）、组件样式（样式：css less scss）。
在Angular中至少有一个根组件用于项目的启动。组件类是用Component装饰器装饰的类。组件是必须属于一个ngModel的，ngModel为组件提供的编译时的上下文环境。同一个组件不能属于两个模块。其他模块想使用该组件，就必须引入当前模块。
（三）服务
服务用来放置多个组件之间可以共享的数据或者逻辑。服务用于解耦组件类当中的代码。服务是用Injectable装饰器装饰的类。
Angular中的服务被设计为单例模式，这也是实现组件之间共享数据的基础。
服务是一个类，使用服务类时，按照之前的逻辑，是要使用new Service()创建一个类的实例对象来使用类的，但是服务与组件是高度分离的，服务的参数可能会有所修改，所以在使用服务类的时候不能用new关键字来创建服务类实例。
其实Angular内置的依赖注入系统会自动帮我们创建服务的实例对象。
在组件中使用服务，只需要在constructor中传递形参，并且通过类型告诉Angular你需要引入什么服务。
import { AppService } from "./AppService"
export class AppComponent {
constructor (
private appService: AppService
) {}
}
private的含义：
- appService作为当前组件的一个属性来使用；
- appService只能在组件类中使用，不能在组件模版中使用。
三、使用AngularCLI创建Angular项目
点击前往AngularCLI官网
（一）创建
- 安装命令：
cnpm i @angular/cli - 创建项目：
ng new angular-base --minimal --inline-template false - ng new 的后缀列表
| 后缀 | 缩写 | 含义 | 数据类型 | 默认值 |
|---|---|---|---|---|
| –skip-git | 跳过初始化git仓库 | boolean | false | |
| –minimal | 创建一个不带单元测试的精简项目 | boolean | false | |
| –skip-install | 跳过模块安装环节 | boolean | false | |
| –inline-template | -t | 在minimal状态下，html和ts文件是在一个文件里的，这个指令可以让html文件从ts文件抽离出来 | boolean | |
| –inline-style | -s | 将样式文件从类文件中抽离出来 | boolean | |
| –prefix | -p | 修改angular-cli创建的组件的前缀 | string | app |
（二）构建项目
在初始化项目之后，package.json中为我们初始化好了运行项目的命令，也就是ng serve
ng serve有几个后缀名
| 后缀 | 含义 |
|---|---|
| –open | 应用构建完毕后在浏览器打开 |
| –hmr | 开启热更新 |
| –oprt | 更改应用运行端口 |
（三）构建项目时的初始化文件解析
- main.ts
// Angular应用程序的启动在不同平台上是不一样的
// 在浏览器中启动需要引入platformBrowserDynamic，该方法返回平台实例对象
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 引入根模块 用于启动应用程序
import { AppModule } from './app/app.module';
// 启动应用程序
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
- app/app.module.ts
// ngModule是Angular的模块装饰器
import { NgModule } from '@angular/core';
// BrowserModule是浏览器解析的模块
// CommonModule提供各种服务和指令，比如NgIf、NgFor等,它是一个通用模块，可以在任何平台上使用
// BrowserModule导入了CommonModule，又重新导出了CommonModule，所以在浏览器中使用CommonModule时，只需要导入BrowserModule
import { BrowserModule } from '@angular/platform-browser';
// 引入根组件
import { AppComponent } from './app.component';
// 使用@ngModule装饰器来定义一个模块，
// @ngModule装饰器接受一个元数据对象
@NgModule({
// 声明当前模块拥有哪些组件
declarations: [
AppComponent
],
// 声明当前模块依赖哪些模块
imports: [
BrowserModule
],
// 声明当前模块拥有哪些服务，这些服务只能在当前组件中使用
providers: [],
// 可引导组件，Angular会在引导过程中把它加载到DOM中
bootstrap: [AppComponent]
})
export class AppModule { }
- app/app.component.ts
import { Component } from '@angular/core';
@Component({
// 指定组件的使用方法
// app-root => <app-root></app-root>
// [app-root] => <div app-root></div>
// .app-root => <div class="app-root"></div>
selector: 'app-root',
// 当前组件对应模版
// tempalte/templateUrl
templateUrl: './app.component.html',
// 组件样式文件
// styles/styleUrls
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-base';
}
4.index.html文章来源：https://www.toymoban.com/news/detail-722774.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularBase</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- 通过标记的形式调用了app-root-->
<!--启动模块下边的启动组件的名字-->
<app-root></app-root>
</body>
</html>
四、共享模块
共享模块是Angular应用中模块级别的需要共享的组件或逻辑。文章来源地址https://www.toymoban.com/news/detail-722774.html
- 创建共享模块
ng g m sharedg->generate m->module
- 创建共享模块的组件
ng g c shared/components/Layoutc->component
加上路径的好处就是在模块中会自动引入组件。
- 导出共享文件，在模块中必须把共享组件导出，这样依赖该模块的模块才能使用共享组件
- 在根组件中使用共享模块
- 在app.module.ts中引入模块并且声明模块
import { SharedModule } from './shared/shared.module'; //-------------------------------------------------------------- // ngModule内： imports: [BrowserModule, SharedModule],- 在app.component.html中使用标记形式使用app-layout
<div>app-root</div> <app-layout></app-layout>
到了这里，关于Angular学习笔记一之项目构建与模块创建的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
