Angular2 Use simple Introduction _angularjs

Let's start with zero and build a super simple ANGULARJS 2 application using Typescript.

Run a demo first.

Run this demo first to feel the application of AngularJS2.

Here is the file structure for this application

Angular2-app
|_ App
| |_ app.component.ts
| |_ main.ts
|_ index.html
|_

The summary is a index.html file and two typescript files under the app file, we can hold live!

Here we will build this program step-by-step:

1. Configure our development environment
2. Writing angular initialization components
3. Guide it to control our main index.html page
4. Writing index.html pages

The development environment constructs

Create a folder

mkdir angular2-app
CD  Angular2-app

Configure Typescript

Some special settings are required to instruct Typesript to compile.
Create a new Tsconfig.json file, place it in the root of the project, 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 later in the appendix.

Typescript typings

There are a lot of JavaScript libraries that inherit some of the JavaScript environment variables and syntax, and the typescript compiler does not support these in its native language. So we use the Typescript type definition file –d.ts file (that is, Typings.json) to resolve these compatibility issues.

Create a Typings.json file, placed in the project root directory

{"
 ambientdependencies": {"
  Es6-shim": "github:definitelytyped/definitelytyped/es6-shim/es6-shim.d.ts# 6697d6f7dadbf5773cb40ecda35a76027e0783b2 "
 }
}

Similarly, in the appendix there will be a more detailed explanation.

Add the libraries we need

We recommend using NPM to manage our dependent libraries.
Create a Package.json file under the project root

{
 "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", c9/> "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 ":" 0.5.15 "
 },
 " Devdependencies ": {"
  concurrently": "^2.0.0", "
  lite-server": "^2.1.0",
  "typescript": "^1.7.5",
  "typings": "^ 0.6.8 "
 }
}

In the appendix, there will be a more detailed explanation

Installing these dependent packages requires only running

NPM Install

In this way we have completed our development environment to build.

First angular component

A component is the most basic concept in angular. A component contains a view-a page that we use to show information or complete user interaction. Technically, a component is a class that controls the template, and many components are written in the development application. This is the first time we've tried to write a component, so we'll make sure he's as simple as possible.

Create a subdirectory of the application source code

We are accustomed to placing our programs under the app subdirectory under the project root directory, so create an app folder first

mkdir app
CD  app

To create a component file

Create a app.component.ts file under the App folder and enter the following

Import {Component} from ' Angular2/core ';

@Component ({
  selector: ' My-app ',
  Template: '  
 

Let's take a look at this file in more detail, and in the last line of the file, we define a class.

Component classes

In this file, we create an empty component class appcomponent that doesn't do anything. When we actually develop the application, we can extend this class, such as adding some attributes and method logic. The Appcomponent class is empty because we don't have to do anything in the Getting Started program.

Module

The angular application is modular. They contain a lot of module files to complete a feature.
Most program Files export one thing, such as a component. Our app.component.ts file exports out of appcomponent.

Export class Appcomponent {}
Exports makes a file into a module. The filename (without the extension) is usually the name of the module. So, App.component is the name of our first module.

Some of the more complex applications will have subcomponents inherited from Appcomponent, and there will be many files and modules. But our QuickStart program doesn't need that much, one component is enough.

If a component relies on other components, in typescript applications, when we need to introduce other modules, direct import comes in and can be used. For example:

Import {appcomponent} from './app.component '
Angular is also a module, he is a collection of a series of modules. So when we need to angular some of the functions, the same angular introduced.

Component annotations

When we add annotations to a class, a class becomes a angular component. Angular need annotations to figure out how to build views, and how components are integrated with other parts of the application.

We use the Componet method to define the annotations of a component that need to be introduced into Angular2/core to be used.

Import {Component} from ' Angular2/core ';

In typescript, we add annotations to the class, and the annotations are simple, annotated with @ as a prefix.

@Component ({
  selector: ' My-app ',
  Template: '  
 

@Component tell angular that this class is a component. There are two parameters, selector and template.

The selector parameter is a CSS selector, which represents an element that selects HTML tags as my-app. Angular will show the appcomponent component inside this element.

Remember this my-app element, we'll use it in index.html.

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

Initialize Boot

Create main.ts under 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 of angular self-band

The boot component that we just wrote,

Import the two, and then pass the component to the Bootstrap method.

The appendix explains in detail why we introduced the Bootstrap method from Angular2/platform/browser and why we created a main.ts file

Everything is ready now, only the East wind!

Add INDEX. HTML file

First go back to the root of the project and create the index.html in the root directory

The three parts of HMTL need to be explained:

Load the JavaScript library we need, which is described in detail in the Appendix

Configured System and let him import into main file

Add My-app This HTML element, this is where we load our angular instance!

We need something to load the application module, where we use SYSTEMJS. There are a lot of options here, and SYSTEMJS is not necessarily the best choice, but this one works fine.

The specific use of SYSTEMJS is not in our QuickStart tutorial, and there is a short cut in the appendix.

When angular calls the Bootstrap method in the Main.ts file, it reads the appcomponent annotation, finds the HTML element My-app, and renders the template in.

Compile and run

Only need to enter in the terminal

NPM start

The program will compile typescript into Javascript, and colleagues will start a lite-server and load the index.html we write. Displays my angular 2 App.

The final structure

|_ Angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts |_ node_modules
...
| _ Typings ...
| _ index.html
|_ package.json
|_ tsconfig.json |_ Typings.json