Angular学习笔记一之项目构建与模块创建

一、简介

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

<!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应用中模块级别的需要共享的组件或逻辑。

创建共享模块 ng g m shared g->generate m->module
创建共享模块的组件 ng g c shared/components/Layout c->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>