A brief introduction to the use of angular2_AngularJS

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

Run a DEMO first

Run this DEMOFirst, let’s experience the AngularJS2 application.

The following is the file structure of this 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 on!

Below we will build such a program step by step:

1. Configuring our development environment
2. Write Angular initialization component
3. Direct it to control our main index.html page
4. Write index.html page

Development environment setup

Create folder

mkdir angular2-app
cd  angular2-app

Configure TYPESCRIPT

Some special settings are required to guide Typesript to compile.
Create a new tsconfig.json file, place 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 later in the appendix

TYPESCRIPT TYPINGS

There are many Javascript libraries that inherit some Javascript environment variables and syntax, but the Typescript compiler cannot natively support these. So we use Typescript type definition files – d.ts files (ie typings.json) to solve these compatibility issues.

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

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

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

Add the libraries we need

We recommend using npm to manage our dependent libraries.
Create a package.json file 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"
 }
}

In the appendix, there will be a more detailed explanation

To install these dependency packages, just run

npm install

In this way we have completed the setup of our development environment.

The first ANGULAR component

Component is the most basic concept in Angular. A component contains a view – the page we use to display information or complete user interaction. Technically speaking, a component is a class that controls a template view. Many components will be written in developing applications. This is our first attempt at writing a component, so we made sure to keep it as simple as possible.

Create a subdirectory of application source code

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

mkdir app
cd  app

Create component file

Create an app.component.ts file under the app folder and enter the following content

import {Component} from 'angular2/core';

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

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

Component class

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

Module

Angular applications are modular. They contain many module files that perform a certain function.
Most program files export something such as a component. Our app.component.ts file exports AppComponent

export class AppComponent { }
exports convert a file into a module. The filename (without 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 so many, one component is enough.

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

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

Component annotations

When we add annotations to a class, a class becomes an Angular component. Angular uses annotations to figure out how to build views and how components integrate with the rest of the application.

We use the Component method to define annotations for a component. This method requires the introduction of angular2/core before it can be used.

import {Component} from 'angular2/core';

In Typescript, we add annotations to classes. The annotation method is very simple. Use @ as the prefix to annotate.

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

@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.

selector参数是一个 css 选择器， 这里表示选择 html 标签为 my-app的元素。 Angular 将会在这个元素里面展示AppComponent 组件。

记住这个 my-app 元素，我们会在 index.html 中用到

template控制这个组件的视图， 告诉Angular怎么去渲染这个视图。 现在我们需要让 Angular去加载这个组件

初始化引导

在 app 文件夹下创建 main.ts

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

bootstrap(AppComponent);
我们需要做两个东西来启动这个应用

Angular自带的 bootstrap 方法

我们刚刚写好的启动组件

把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。

附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法，还有为什么会创建一个main.ts文件

现在万事俱备，只差东风啦！

添加 INDEX.HTML 文件

首先回到项目的根目录，在根目录中创建index.html

<html>
 <head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
   System.config({
    packages: {    
     app: {
      format: 'register',
      defaultExtension: 'js'
     }
    }
   });
   System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

 </head>

 <!-- 3. Display the application -->
 <body>
  <my-app>Loading...</my-app>
 </body>

</html>

HMTL中三个部分需要说明一下：

加载我们需要的 javascript库， 附录中会有详细的介绍

配置了 System 并让他import 引入 main 文件

添加 my-app 这个HTML元素，这里才是加载我们Angular实例的地方！

我们需要一些东西来加载应用的模块，这里我们使用 SystemJs。 这里有很多选择，SystemJS不一定是最好的选择，但是这个挺好用。

SystemJs的具体使用不在我们的快速入门教程里，在附录中会有一个剪短的说明。

当Angular调用main.ts文件中的 bootstrap方法， 它读取 AppComponent 的注解，找到 my-app 这个HTML元素， 并将template 渲染进去。

编译然后运行

只需要在终端中输入

npm start

程序将会将Typescript编译成 Javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.

最终的结构

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules …
|_ typings …
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json