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的含义:

  1. appService作为当前组件的一个属性来使用;
  2. appService只能在组件类中使用,不能在组件模版中使用。

三、使用AngularCLI创建Angular项目

点击前往AngularCLI官网

(一)创建

  1. 安装命令:cnpm i @angular/cli
  2. 创建项目:ng new angular-base --minimal --inline-template false
  3. 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
Angular学习笔记一之项目构建与模块创建_第1张图片
ng serve有几个后缀名

后缀 含义
–open 应用构建完毕后在浏览器打开
–hmr 开启热更新
–oprt 更改应用运行端口

(三)构建项目时的初始化文件解析

  1. 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));

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

  1. app/app.component.ts
import { Component } from '@angular/core';

@Component({
  // 指定组件的使用方法
    // app-root => 
    // [app-root] => 
// .app-root =>
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>AngularBasetitle>
  <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>
body>
html>

四、共享模块

共享模块是Angular应用中模块级别的需要共享的组件或逻辑。

  1. 创建共享模块 ng g m shared g->generate m->module
    Angular学习笔记一之项目构建与模块创建_第2张图片
  2. 创建共享模块的组件 ng g c shared/components/Layout c->component
    加上路径的好处就是在模块中会自动引入组件。
    Angular学习笔记一之项目构建与模块创建_第3张图片
  3. 导出共享文件,在模块中必须把共享组件导出,这样依赖该模块的模块才能使用共享组件
    Angular学习笔记一之项目构建与模块创建_第4张图片
  4. 在根组件中使用共享模块
    1. 在app.module.ts中引入模块并且声明模块
    import { SharedModule } from './shared/shared.module';
    //--------------------------------------------------------------
    // ngModule内:
    imports: [BrowserModule, SharedModule],
    
    1. 在app.component.html中使用标记形式使用app-layout
    <div>app-rootdiv>
    <app-layout>app-layout>
    

你可能感兴趣的:(Angular,学习,笔记,angular)