I. Overview
Despite its name Angular5, it's actually only the fourth version of this front-end framework that was born in 2012:
It seems that a new version will be released almost half a year ago, but in fact, since the rewritten version 2, the development interface and core ideas have been stabilized, and the compatibility with the previous version has been basically maintained.
In 5this new release, the Angularteam has focused improvements on the following features:
- Easier to build progressive
Webapps - __P__rogressive __W__eb __A__pp - Use the build optimizer to weed out dead code for smaller apps and faster network load times
- Make materialized design components compatible with server-side rendering
PWAIt is Googlea standard proposed to enable web applications to obtain a user experience comparable to native applications on mobile terminals. An PWAapplication mainly uses Service Workerand browser cache to improve the interactive experience. It can not only be directly deployed on the mobile phone desktop, but also can be used offline:
Second, the introduction of the angular environment
AngularIt is recommended TypeScriptto develop applications that require an online compiler ( JIT) to compile the code on-the-fly, or a precompiler ( AOT) to compile the code ahead of time during development.
In order to avoid this tedious process affecting Angularthinking about the essence of the framework, we have configured and packaged these necessities as necessary to adapt to online writing and experimentation. Now just import a library a5-loaderand you're done.
The following figure shows the composition of the library, in which the blue components are packaged in the library:
You may notice that Angularthe frame is not blue. Indeed, we didn't package it a5-loaderin , but let the module loader( SystemJS) load it automatically according to the needs of the application. The purpose of this is to align the application code with the back- end construction method used in subsequent courses .
If you are interested in this library, you can visit the http://github.com/hubwiz/a5-loader repository on github.
3. Create Angular Components
AngularIt is a component-oriented front-end development framework. If you have been engaged in the development of C/S graphical applications, you should know the meaning of the word component . Basically, components represent some program units with a graphical interface and inherent logic capabilities. The following diagram lists the three components used to implement ping-pong switching:
Components provide good reusability. On the basis of a bunch of components, we can implement quite complex interactive functions using simple glue code.
Now let's create the Angularcomponent, the code is fairly simple:
@Component({
selector: "ez-app",
template: `<h1>Hello,angular5</h1>`
})
class EzComp{}
In the Angularframework, __component__ refers to a Componentclass with a decorator applied. ComponentThe role of the decorator is to attach metadata information to the decorated class:
AngularThis metadata is used to construct views when the framework compiles the app to bootstrap. Two of these metadata are very important:
- selector : The selector of the component's host element
CSS, which declares the rendering anchor of the component in the DOM tree - template : The template of the component, the framework will use this template as a blueprint to build the view
Fourth, create an Angular module
AngularThe core of the framework is componentization, and its design goal is to adapt to the development of large-scale applications. Therefore, NgModulethe concept of modules ( ) is introduced in application development to organize different components (and services). An Angular application needs to create at least one module.
In order to distinguish it from the module concept of the JavaScript language itself, __NG module__ will be used in this course to represent an Angular module.
Similar to a component, an NG module is a NgModuleclass with a decorator applied. For example, the following code creates an NG module EzModule:
@NgModule({
imports: [ BrowserModule ],
declarations: [ EzComp ],
bootstrap: [ EzComp ]
})
class EzModule{}
Likewise, NgModuledecorators are used to attach module metadata to the decorated class, which can be observed by looking at the decorated class's __annotations__properties :
NgModuleThe decorator declares some key metadata to inform the framework which NG modules to load, which components to compile, and which components to bootstrap:
- imports : external NG modules that need to be imported
- declarations : Components created by this module, components added to this metadata will be compiled
- bootstrap : declares which component to boot, it must be a compiled component
It is important to emphasize bootstrapthat the component declared by the metadata must be a compiled component: it either belongs to importsan external NG module imported using the metadata, or declarationsa local component that has been declared in the metadata.
NG modules BrowserModuleare defined in packages @angular/platform-browserand are an important part of Angular's cross-platform strategy. BrowserModuleIt encapsulates the core function implementation under the browser platform, and other platform implementations corresponding to it include:
- ServerModule: Server implementation
- WorkerAppModule：WebWorker实现
Usually, when developing web applications, we need to introduce BrowserModulethis NG module.
5. Start the Angular application
In the previous lesson, we've created a component and an NG module, but it seems to just define a bunch of metadata, and hardly write much worthwhile code. But that's one of the hallmarks of the Angular framework: declarative development . This metadata is important information used to declare to the framework how to bootstrap the application.
The startup code is very simple, introducing platformBrowserDynamic()factory functions, creating a platform instance, and starting the specified module:
<pre> import { platformBrowserDynamic } from "@angular/platform-browser-dynamic" const pref = platformBrowserDynamic() pref.bootstrapModule(EzModule) </pre>
√ Platform object: PlatformRef
platformBrowserDynamic()The function returns an PlatformRefobject (Angular's abstraction of the platform). The most important function of this function is that it creates a real-time (__J__ust __I__n __T__ime) compiler inside it, which can compile NG modules and components in real time online, which is also called dynamic ( Dynamic) reason:
The method of the platform object is bootstrapModule()used to start the specified NG module. Most of the startup work is to use the JIT compiler to compile the NG modules and components. When these compilation tasks are completed, the specified components are rendered according to the bootstrapmeta .
6. Why is it so complicated?
Maybe you already feel a little complicated: you have to write so much Hello,Worldcode just to write one.
In fact, these complexities have been gradually introduced with the development of Angular. On the positive side, the options provided to developers have gradually increased, and the applicable scenarios have increased.
For example, before the official version of Angular 2, there was no concept of NG modules. You only need to write a component to start the application directly. The Angular team's intended use case is large-scale front-end application development, so the explicit NG module declaration requirements are also easy to understand. However, even for small applications, since only one NG module can be used, this increase in complexity is not much, but only increases the cost of learning and applying this new concept.
Another obvious complication is the introduction of a multi-platform strategy. Angular wants to make applications run (basically) directly across multiple platforms such as browsers, servers, etc. Therefore, it is inevitable to abstract an intermediate layer, and we need to explicitly select the corresponding platform implementation module in the application:
The third complexity comes from support for precompilation ( AOT: Ahead Of Time). In the early days, Angular only had just-in-time compilation ( JIT: Just In Time), which meant that the application code was compiled at runtime. The first problem with just-in-time compilation is that the compiler code needs to be packaged in the application, which increases the size of the final released application code; the other problem is that compilation takes time, which increases the waiting time for users to open the application. Therefore, the current Angular supports both JIT and AOT, but the application that starts JIT compilation and the application that starts AOT compilation need to be explicitly selected at present:
For Angular, compilation transforms the entry NG module definition into an NG module factory ( NgModuleFactory). For JIT, this step is implicit bootstrapModule(). For AOT, the generation of the module factory is over, and the generated bootstrapModuleFactory()module factory can be called when the application starts.
Although AOT compilation is usually used during the build phase, we can simulate this two-step process in the browser.
7. Understand the original intention of Angular
In addition to the complexity caused by the powerful functions of the framework itself, another source of complexity of Angular lies in its highly encapsulated declarative API, which makes it difficult for developers to figure out and gain insight into the implementation mechanism of the framework. Difficult to analyze and troubleshoot:
Angular cannot be used as a black box.
On the one hand, the reason is that Angular provides the API development interface with its declarative template syntax as the core. The template written by the developer is only rendered the final view object after the framework is quite complexly compiled. If you don't try to understand what's going on in the process from template to view object, I'm sure you'll always feel a sense of loss of control.
On the other hand, Angular is a framework that frames the application and leaves some gaps for developers to fill in. It's hard to get the most out of a framework without knowing as much as possible about how the framework works.
The starting point of developing Angular is to write the user interface in HTML. Think how easy it is to develop a static web page, and you will know what a good idea:
The problem with native HTML is that, firstly, it requires JavaScript to achieve decent user interaction, and secondly, it only has so many tags available to take on the task of developing a user interface.
Since browsers cannot directly interpret <ez-gauge>such tags, the Angular team introduced the concept of a compiler: Before sending it to the browser, the HTML with the extension tag is translated into the native HTML supported by the browser:
Click here to continue with this article:
http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/#1/9
Written at the end of the article: I believe that many students who study angular have read our content, and they should be more or less helpful. I hope this course can bring you more help, so that you can enter the world of angular5 faster. For more exciting content, please move to: