A brief introduction to the use of angular2

Let's start from scratch and build a super simple AngularJs 2 application using Typescript.

Run 1 DEMO first

Run this DEMO to get a feel for the application of AngularJS2.

Here is the file structure for the application

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

index.html file and two Typescript files under app file, we can live in hold!

We will build such a program step by step:

Configure our development environment Write the Angular initialization component Boot it to control our main index.html page Write the index.html page

Development environment setup

Create a folder

mkdir angular2-app
cd  angular2-app

Configuration TYPESCRIPT

Some special Settings are required to guide Typesript compilation.
Create a new tsconfig. json file in the root directory of the project and enter 1 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 talk more about this tsconfig.json later in the appendix

TYPESCRIPT TYPINGS

There are a number of Javascript libraries that inherit some Javascript environment variables and syntax, which the Typescript compiler does not support nately. So we use Typescript type definition file � d. ts file (i.e. typings. json) to solve the compatibility problems.

Create the file typings. json and place it in the root directory of your project

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

Again, a more detailed explanation can be found in the appendix

Add the libraries we need

We recommend using npm to manage our dependent libraries.
Create the file package.json in 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": "0.5.15"
 },
 "devDependencies": {
  "concurrently": "^2.0.0",
  "lite-server": "^2.1.0",
  "typescript": "^1.7.5",
  "typings":"^0.6.8"
 }
}

A more detailed explanation can be found in the appendix

Installing these dependency packages only requires running

npm install

This completes the setup of our development environment.

The first ANGULAR component

Component is the most basic concept in Angular. 1 component contains 1 � view we used to display information or complete page of user interaction. Technically, a component is a class that controls the template attempt, and many components are written in the development application. This is our first attempt to write a component, so we keep it as simple as possible.

Create a subdirectory of the application source code

We used to put our programs in the app subdirectory under the project root, so we started by creating an app folder

mkdir app
cd  app

Create a component file

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

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

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

Component classes

At this point in the file, we create an empty component class AppComponent that does nothing. When we actually develop the application, we can extend the class, such as adding some properties and method logic. The AppComponent class is empty because it doesn't have to do anything in our starter program.

The module

The Angular application is modular. They contain a number of module files that perform a function.
Most application files will produce one thing, such as a component, in export. app.component.ts Our app.component.ts file exports has AppComponent

export class AppComponent { }
exports converts one file into one module. The filename (without an extension) is usually the name of the module. So, app.component is the name of our first module.

Some more complex applications will have subcomponents that inherit from AppComponent and will have many files and modules. But our Quick Start program doesn't need that much. One component is enough.

If a component depends on another component, in an Typescript application, when we need to introduce other modules, we can use import directly. Such as:

import {AppComponent} from './app.component'
Angular is also a module. It is a collection of series 1 modules. So when we need some of the functionality of angular, we also introduce Angular.

The component annotation

When we annotate a class, the class becomes a component of Angular. Angular requires annotations to understand how views are constructed and how components are integrated with the rest of the application.

We use the Componet method to define a component annotation, which requires angular2/core to be used.

import {Component} from 'angular2/core';

In Typescript, we annotated the class in a simple way, using @ as the prefix.

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

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

The selector parameter is an css selector, which is used to select elements labeled html as my-app. Angular will show the AppComponent component in this element.

Remember the my-app element, which we will use in index.html

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

Initialize boot

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 launch this application

The bootstrap method comes with Angular

We just wrote the boot component

Put both of these in, import, and pass the component to the bootstrap method.

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

Everything is ready now except the east wind!

Add INDEX.HTML file

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

mkdir angular2-app
cd  angular2-app

0

3 parts of HMTL need to be explained 1:

Load the javascript library we need, which is described in detail in the appendix

System is configured and has import introduce main files

Add my-app This is where our instance of Angular is loaded!

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

The specific use of SystemJs is not included in our Quick Start tutorial, but there will be a shortened explanation in the appendix.

When Angular calls the bootstrap method in the file main.ts, it reads the annotation of AppComponent, finds the my-app element, and renders template into it.

Compile it and run it

Just type it in the terminal

mkdir angular2-app
cd  angular2-app

1

The program will compile Typescript into Javascript. We will start one lite-server and load the index.html we wrote. My First Angular 2 App

Final structure

mkdir angular2-app
cd  angular2-app

2