AngularJS2.0 Tutorial Series (i)

Why ANGULAR2

Angular1.x obviously very successful, then, why do we have to turn violently to Angular2?

Limitations of performance

Angularjs was originally an internal tool for designers to quickly build HTML forms. Over time, various features are added to suit the development of applications in different scenarios. However, due to the initial architectural constraints (such as bindings and templating mechanisms), performance improvements have been very difficult.

Fast-changing Web

In terms of language, ECMASCRIPT6 's standards have been completed, which means that browsers will soon support new features such as modules, classes, lambda expressions, generator, and so on, which will significantly change the development experience of JavaScript.

In terms of development patterns, Web Components will also be implemented quickly. However, existing frameworks, including angular1.x support for Web Components, are not good enough.

Mobile

Think about 5 years ago ... The current computing model has changed dramatically, with phones and tablets everywhere. Angular1.x is not specifically optimized for mobile applications and lacks key features such as cached precompiled views, touch support, and so on.

Simple to use

To tell the truth, angular1.x is too complicated, the learning curve is too steep, which is daunting. The angular team wants to encapsulate the complexity in Angular2 better, making the exposed concepts and development interfaces simpler.

Rob Eisenberg/Angular 2.0 Team ES6 tool Chain

It's not easy to make the Angular2 app run, because it uses too many technologies that are not supported by the current mainstream browser. So, we need a tool chain:

ANGULAR2 is the future-oriented technology, requires the browser to support the es6+, we have to try now, we need to add some shims to erase the current browser and ES6 differences:

• SYSTEMJS -Universal Module Loader supports JS module loading in various formats such as AMD, CommonJS, ES6, etc.
• es6-module-loader -ES6 module loader, SYSTEMJS will automatically load this module
• traceur -ES6 transcoding to convert ES6 code to ES5 code supported by the current browser. SYSTEMJS will automatically load this module.

First knowledge of ANGULAR2

Writing a Angular2 Hello World app is fairly simple and goes in three steps:

1. Introduction of ANGULAR2 predefined types

Import {Component,view,bootstrap} from "Angular2/angular2";

Import is a ES6 keyword used to introduce a type definition from a module. Here we introduce three types from the ANGULAR2 Module Library: The component class, the view class, and the bootstrap function.

2. Implement a ANGULAR2 component

Implementing a ANGULAR2 component is also simple, defining a class, and then adding annotations to the class:

@Component ({selector: "Ez-app"}) @View ({Template:"}) class ezapp{ }

Class is also a keyword for ES6, which defines a class. Both @Component and @view are additional meta-information for class Ezapp, known as annotation/annotation.

The most important function of the @Component is to specify which DOM object the component renders to by using the Selector property (the value is a CSS selector). The most important function of @View is to specify the rendered template through the Templates property.

3. Rendering components to the DOM

To render the component to the DOM, you need to use the bootstrap/bootstrap function:

Bootstrap (Ezapp);

The purpose of this function is to inform the ANGULAR2 framework to render the Ezapp component onto the DOM tree.

Is it simple? I know you must still have doubts, do not worry, we slowly put the missing knowledge points to fill!

Note/annotation

You must be curious about what @component and @view are going on. Looks like a decorator in other languages (like Python), isn't it?

There is no adorner in the ES6 specification. This actually takes advantage of an experimental feature of traceur: annotations. adding annotations to a class is equivalent to setting the annotations property of the class:

// annotation notation @Component ({selector: "Ez-app"}) class ezapp{...}

Equivalent to:

= [new Component ({selector: "Ez-app"})];

Obviously, annotations can be seen as syntactic sugars at the compiler (traceur) level, but unlike Python decorators, annotations are only placed in annotation at compile time, and the compiler does not explain the unfolding-the work of this interpretation is Angular2 done:

It is said that the function of the annotations is that the ANGULAR2 team presented to the Traceur team, which is not the default option for Traceur, so you see that we configure SYSTEMJS to open annotations when using the Traceur module:

System.config ({map:{traceur:"lib/traceur"True}});

Summary

If you know a little bit of angular1.x bootstrap, you may be vaguely aware of some of the changes in bootstrap in Angular2-I'm not referring to changes in code form.

Components as the core

In angular1.x, Bootstrap is expanded around DOM elements, whether you use Ng-app or manually perform the bootstrap () function, the bootstrap process is built on the DOM.

In Angular2, Bootstrap starts around the component, you define a component, and then you start it. If you don't have a component, you won't even be able to use angular2!.

Support for multiple rendering engines

At the core of the component rather than the DOM, it means that ANGULAR2 is isolating the DOM dependency on the kernel-dom only exists as an optional rendering engine:

In the above diagram, DOM render has been implemented, Server render is being tested, IOS render and Android render are predictable features, although we don't see the timesheet.

It's kind of like react.

This article is for the Wisdom Network-online learning programming provided, the course path is: http://www.hubwiz.com/course/5599d367a164dd0d75929c76/. Forward please assign the original link: http://www.cnblogs.com/jasonnode/p/4666565.html

AngularJS2.0 Tutorial Series (i)