1. Introduction
Angular is one of the three major frameworks, and it is the earliest and popular framework. It is a heavyweight framework written using HTML, CSS, and TypeScript, and is designed for large-scale application development. Client applications developed using Angular are highly modular. Angular provides the cli tool. Components and modules can be created using the command line provided by the cli tool. Angular is quite good at state management and can easily share data between components.
2. Angular architecture
(1) Module
Angular applications are composed of modules. The module here is ngModel, which is a way of organizing code structure in Angular. An Angular application has at least one ngModel, called the root module. The root module is used during Angular application startup. In Angular, ESModel and ngModel are used at the same time. ESModel is based on files, and an ngModel can be composed of multiple files. ngModel is a class decorated by NgModel.
(2) Components
Components are used to describe user interfaces and include three parts: component class (interface logic), component template (HTML), and component style (style: css less scss).
There is at least one root component in Angular that is used to start the project. A component class is a class decorated with the Component decorator. Components must belong to an ngModel, and ngModel provides the compile-time context for the component. The same component cannot belong to two modules. If other modules want to use this component, they must import the current module.
(3) Service
Services are used to place data or logic that can be shared between multiple components. Services are used to decouple code from component classes. Services are classes decorated with the Injectable decorator.
Services in Angular are designed as singletons, which is also the basis for sharing data between components.
A service is a class. When using a service class, according to the previous logic, you need to create new Service()an instance object of the class to use the class. However, services and components are highly separated, and the parameters of the service may be modified, so when using When using service classes, newkeywords cannot be used to create service class instances.
In fact, Angular's built-in dependency injection system will automatically create service instance objects for us.
To use a service in a component, you only need to pass formal parameters in the constructor and tell Angular what service you need to introduce through the type.
import {
AppService } from "./AppService"
export class AppComponent {
constructor (
private appService: AppService
) {
}
}
privatemeaning:
- appService is used as a property of the current component;
- appService can only be used in component classes, not component templates.
3. Use AngularCLI to create an Angular project
Click to go to AngularCLI official website
(1) Create
- Installation command:
cnpm i @angular/cli - Create project:
ng new angular-base --minimal --inline-template false - Suffix list of ng new
| suffix | abbreviation | meaning | type of data | default value |
|---|---|---|---|---|
| –skip-git | Skip initializing the git repository | boolean | false | |
| –minimal | Create a stripped-down project without unit tests | boolean | false | |
| –skip-install | Skip module installation | boolean | false | |
| –inline-template | -t | In the minimal state, the html and ts files are in one file. This command can extract the html file from the ts file. | boolean | |
| –inline-style | -s | Extract style files from class files | boolean | |
| –prefix | -p | Modify the prefix of components created by angular-cli | string | app |
(2) Construction project
After initializing the project, the command to run the project is initialized for us in package.json, that is, ng serve
ng serve has several suffix names.
| suffix | meaning |
|---|---|
| –open | After the application is built, open it in the browser |
| –hmr | Enable hot update |
| –oprt | Change the application running port |
(3) Initialization file analysis when building the project
- 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>
4. Shared modules
Shared modules are components or logic that need to be shared at the module level in Angular applications.
- Create shared module
ng g m sharedg->generate m->module
- The advantage of creating a shared module component
ng g c shared/components/Layoutc->component
and adding the path is that the component will be automatically introduced in the module.
- Export shared files. Shared components must be exported in the module so that modules that depend on the module can use the shared components.
- Use shared modules in root component
- Introduce the module in app.module.ts and declare the module
import { SharedModule } from './shared/shared.module'; //-------------------------------------------------------------- // ngModule内： imports: [BrowserModule, SharedModule],- Use app-layout in app.component.html using markup form
<div>app-root</div> <app-layout></app-layout>