Angular2 introduction _ AngularJS

Angular2 Developer Preview has been released for a while. How is the speed-and mobility-oriented framework? Today we will try it with the demo on the official website. Let's build a super simple AngularJs 2 Application Using Typescript from scratch.

Run a DEMO first

Run this DEMO to familiarize yourself with the AngularJS2 application.

The following figure shows the file structure of the application.

angular2-app|_ app| |_ app.component.ts| |_ main.ts|_ index.html|_ license.md

In summary, it is an index.html file and two Typescript files under the app file. We can hold them!

Next we will build such a program step by step:

1. Configure our development environment
2. Compile Angular initialization component
3. Guide it to control our main index.html page
4. Compile the index.html page

Development Environment Construction

Create a folder

mkdir angular2-appcd  angular2-app

Configure TYPESCRIPT

You need to use some special settings to guide the compilation of Typesript.
Create a tsconfig. json file, store it in the project root directory, and enter the configuration

{ "compilerOptions": {  "target": "es5",  "module": "system",  "moduleResolution": "node",  "sourceMap": true,  "emitDecoratorMetadata": true,  "experimentalDecorators": true,  "removeComments": false,  "noImplicitAny": false }, "exclude": [  "node_modules",  "typings/main",  "typings/main.d.ts" ]}

We will explain this tsconfig. json in detail in the appendix later.

TYPESCRIPT TYPINGS

Many Javascript libraries inherit some Javascript environment variables and syntaxes, which are not supported by the Typescript compiler. Therefore, we use the Typescript type definition file-d. ts file (that is, typings. json) to solve these compatibility problems.

Create the typings. json file and store it in the project root directory.

{ "ambientDependencies": {  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" }}

Similarly, there will be more detailed explanations in the appendix.

Add the library we need

We recommend that you use npm to manage our dependent libraries.
Create a package. json file under the project root directory

{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": {  "start": "concurrent /"npm run tsc:w/" /"npm run lite/" ",    "tsc": "tsc",  "tsc:w": "tsc -w",  "lite": "lite-server",  "typings": "typings",  "postinstall": "typings install"  }, "license": "ISC", "dependencies": {  "angular2": "2.0.0-beta.7",  "systemjs": "0.19.22",  "es6-promise": "^3.0.2",  "es6-shim": "^0.33.3",  "reflect-metadata": "0.1.2",  "rxjs": "5.0.0-beta.2",  "zone.js?6.1.3": "0.5.15" }, "devDependencies": {  "concurrently": "^2.0.0",  "lite-server": "^2.1.0",  "typescript": "^1.7.5",  "typings":"^0.6.8" }}

In the appendix, we will provide more detailed explanations.

To install these dependency packages, you only need to run

npm install

This completes the establishment of our development environment.

The first ANGULAR component

Components are the most basic concept in Angular. A component contains a view-a page for displaying information or completing user interaction. Technically speaking, a component is a class tried by a control template, and many components are written in the development application. This is the first time we try to write a component, so we ensure that it is as simple as possible.

Create a subdirectory of the application source code

We are used to placing our program in the app subdirectory under the root directory of the project, so we first create an app folder

mkdir appcd  app

Create component files

Create an app. component. ts file in the app folder, and enter the following content:

import {Component} from 'angular2/core';@Component({  selector: 'my-app',  template: 'My First Angular 2 App'})export class AppComponent { }

Let's take a closer look at this file. In the last row of the file, we define a class.

Component class

At the point of this file, we have created an empty component class AppComponent that does nothing. When developing an application, we can extend this class, such as adding some attributes and method logic. This AppComponent class is empty because we don't need to do anything in the Getting Started program.

Module

Angular applications are modular. They contain many module files that complete a function.
Most program files export something, such as a component. The AppComponent exports output in our app. component. ts File

Export class AppComponent {}
Exports converts a file into a module. The file name (excluding the extension) is usually the name of this module. Therefore, app. component is the name of our first module.

Some more complex applications will have child components inherited from AppComponent, and there will be many files and modules. However, there is no need for so many Quick Start Programs. One component is enough.

If a component depends on other components, in the Typescript application, when we need to introduce other modules, we can directly import them. For example:

Import {AppComponent} from './app. component'
Angular is also a set of modules. So when we need some angular functions, we also introduce Angular.

Component Annotation

When we add annotations to a class, a class becomes an Angular component. Angular needs annotations to understand how to build a view, and how components are integrated with other parts of the application.

We use the Componet method to define the annotation of a component. This method can be used only when angular2/core is introduced.

import {Component} from 'angular2/core';

In Typescript, we add annotations to the class. The annotation method is very simple, and @ is used as the prefix for annotation.

@Component({  selector: 'my-app',  template: 'My First Angular 2 App'})

@ Component tells Angular that this class is a Component. There are two parameters, selector and template.

The selector parameter is a css selector. Here, the html Tag is selected as an element of my-app. Angular will display the AppComponent component in this element.

Remember this my-app element, which will be used in index.html

Template controls the view of this component and tells Angular how to render this view. Now we need Angular to load this component.

Initialization Guide

Create main. ts in the app folder

Import {bootstrap} from 'angular2/platform/browser'
Import {AppComponent} from './app. component'

Bootstrap (AppComponent );
We need to do two things to start this application.

Bootstrap method provided by Angular

The startup component we just wrote

Import the two components and pass them to the bootstrap method.

The appendix will explain in detail why we have introduced the bootstrap method from angular2/platform/browser, and why we have created a main. ts file.

Now everything is ready!

Add an INDEX. HTML file

First, go back to the object root directory and create index.html in the root directory.

   Angular 2 QuickStart