Table of contents
3. Angular application: knowledge points
4. Comparison with other frameworks
1 Introduction
Angular is an application design framework and development platform designed to create efficient and elegant single-page applications.
Angular is a
development platform built on TypeScript. it includes:
-
A component-based framework for building scalable web applications
-
A set of well-integrated libraries covering a wide range of functionality, including routing, form management, client-server communication, and more
-
A set of development tools to help you develop, build, test and update your code
With Angular, you get the benefits of the platform, whether it's a one-person project or an enterprise application. One of Angular's design goals is to make updating easy, so you can upgrade to the latest Angular version with minimal cost. Most importantly, Angular's ecosystem consists of a diverse team of 1.7 million developers, library authors, and content creators.
2. Features
2.1 Across multiple platforms
Learn to build applications with Angular, and then reuse that code and capabilities across multiple applications on a variety of different platforms - web, mobile web, mobile apps, native apps, and desktop native apps.
2.2 Speed and performance
Achieve the highest speed possible on today's (and tomorrow's) web platform with Web Workers and server-side rendering.
Angular puts scalability in your hands.
Based on RxJS, Immutable.js and other push models, it can adapt to massive data requirements.
2.3 Wonderful tools
Quickly implement features using simple, declarative templates. Extend the templating language with custom components and a large number of existing components. Get instant help and feedback for Angular in virtually any IDE. All of this is to help you write beautiful applications, not to rack your brains to make the code "usable".
3. Angular application: knowledge points
3.1 Components
Components are the modules that make up the application. A component consists of three parts: a TypeScript class with decorators, an HTML template, and a style file. The decorator specifies the following Angular-specific information:@Component()@Component()
-
A CSS selector used to define how the component is used in the template. HTML elements in the template that match this selector will become instances of this component.
-
An HTML template that tells Angular how to render this component
-
An optional set of CSS styles that define the appearance of HTML elements in the template
Below is a minimal Angular component.
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: `
<h2>Hello World</h2>
<p>This is my first component!</p>
`
})
export class HelloWorldComponent {
// 组件相关属性、方法等。
}To use this component, write the following in your template:
<hello-world></hello-world>When Angular renders this component, the resulting DOM looks like this:
<hello-world>
<h2>Hello World</h2>
<p>This is my first component!</p>
</hello-world>Angular's component model provides powerful encapsulation capabilities and an intuitive application structure. Components also make your app easier to unit test and can improve the overall readability of your code.
3.2 Templates
Each component has an HTML template that declares how the component should be rendered. You can inline it or define this template with a file path.
Angular adds some syntax elements to extend HTML, allowing you to insert dynamic values from components. Angular automatically updates the rendered DOM when the component's state changes. One application of this feature is to insert dynamic text, as shown in the example below.
<p>{
{ message }}</p>Here the value of message comes from the component class:
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-interpolation',
templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
message = 'Hello, World!';
}When the app loads the component and its template, the user will see the following:
<p>Hello, World!</p>Note the double curly braces used here -- they instruct Angular to interpolate the contents.
Angular also supports property binding to help you set property and attribute values of HTML elements and pass these values to the application's presentation logic.
<p
[id]="sayHelloId"
[style.color]="fontColor">
You can set my color in the component!
</p>Note the square brackets used here -- the syntax indicates that you are binding a Property or Attribute to a value in the component class.
Event listeners can be declared to listen for and respond to user actions such as key presses, mouse movements, clicks, and touches. You can declare an event listener by specifying the event name in parentheses:
<button
type="button"
[disabled]="canClick"
(click)="sayMessage()">
Trigger alert message
</button>The previous example calls a method defined in the component class:
sayMessage() {
alert(this.message);
}Here is an example of interpolation and binding in Angular templates:
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-bindings',
templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
fontColor = 'blue';
sayHelloId = 1;
canClick = false;
message = 'Hello, World';
sayMessage() {
alert(this.message);
}
}<button
type="button"
[disabled]="canClick"
(click)="sayMessage()">
Trigger alert message
</button>
<p
[id]="sayHelloId"
[style.color]="fontColor">
You can set my color in the component!
</p>
<p>My color is {
{ fontColor }}</p>Directives can be used to add additional functionality to templates. The most commonly used directives in Angular are *ngIf and *ngFor. You can use directives to perform various tasks, such as dynamically modifying the DOM structure. You can also create great user experiences with custom directives.
The following codes are *ngIf examples of directives.
import { Component } from '@angular/core';
@Component({
selector: 'hello-world-ngif',
templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
message = "I'm read only!";
canEdit = false;
onEditClick() {
this.canEdit = !this.canEdit;
if (this.canEdit) {
this.message = 'You can edit me!';
} else {
this.message = "I'm read only!";
}
}
}<h2>Hello World: ngIf!</h2>
<button type="button" (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEdit">
<p>You can edit the following paragraph.</p>
</div>
<ng-template #noEdit>
<p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>
<p [contentEditable]="canEdit">{
{ message }}</p>Angular's declarative templates make it possible to completely separate the logic and appearance of the application. Templates are based on standard HTML, so they are easy to build, maintain and update.
3.3 Dependency Injection
Dependency Injection lets you declare dependencies on TypeScript classes without worrying about how to instantiate them, Angular takes care of the chores for you. This design pattern allows you to write more testable and flexible code. Although understanding dependency injection is not essential to getting started with Angular, it is strongly recommended as a best practice, and all aspects of Angular itself utilize it to some degree.
To illustrate how dependency injection works, consider the following example. logger.service.ts A class is defined in the first file Logger . It contains a writeCount function that logs a number to the console.
import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'})
export class Logger {
writeCount(count: number) {
console.warn(count);
}
}Next, hello-world-di.component.ts an Angular component is defined in the file. This component contains a button that uses writeCount the functions of this Logger class. private logger: Logger To access this functionality, inject Logger the service into the class by adding it to the constructor HelloWorldDI .
import { Component } from '@angular/core';
import { Logger } from '../logger.service';
@Component({
selector: 'hello-world-di',
templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent {
count = 0;
constructor(private logger: Logger) { }
onLogMe() {
this.logger.writeCount(this.count);
this.count++;
}
}4. Comparison with other frameworks
Through a basic example above, we can see some differences between Angular and other popular frameworks (Vue, React) at present. Of course, everyone has a different point of view when comparing these frameworks, and they all have their own preferences. All in actual project development It is best to choose the one that suits you in the process. The following are some of my own feelings about using these frameworks.
First of all, let’s talk about the Angular framework. The Angular framework is a bit like the framework in java development. For example, the SSH framework for enterprise-level development before is relatively mature on the whole, with better performance, stability, and security. The project Some implementations in are also implemented with reference to existing standards as much as possible. The ecology of the project and the community are relatively large. There is a whole set of solutions in the project. Behind the Angular framework is Google. The overall experience in all aspects is still good. Most front-ends such as financial institutions and banks will choose the Angular framework. The disadvantage is that Compared with Vue and React, it is more difficult to get started, mainly because some concepts of the Angular framework come from the backend, such as dependency injection.
Secondly, let’s talk about the Vue framework, Vue is an open source Model-View-View-Model (MVVM) front-end JavaScript library. It is called a progressive framework. The difficulty of getting started with the Vue framework is the least difficult of these frameworks. Generally, the Vue framework is preferred in small companies or some small projects. The Vue framework is similar to the realization of some related logic code wrapped in HTML. The disadvantage is that it is limited to modules and not flexible enough. The advantage is that it is fast, convenient, and very fast to use.
Finally, let’s talk about the React framework. The React framework is mainly a UI library. Unlike Angular, which provides a complete set of corresponding solutions, it is more flexible to use. You can choose the corresponding library to use together, for example, react+redux, MobX or others When used together with the state management library of the flux mode, it becomes a powerful solution. The React framework is similar to some HTML-related things wrapped in javascript, which makes it more flexible to write and more convenient to customize.