1. 首页
  2. PHP
  3. Angular2入门教程-1

Angular2入门教程-1

•php•阅读 1711

http://codin.im/2016/09/15/angular2-tutorial/

今天，Angular2终于正式发布了2.0.0的正式版，所以已经可以开始正式使用了。

Angular2介绍

首先，Angular2跟Angular1.x版本没有多大关系，虽然2沿用了版本1的一些概念，像directive, model, service, router, dependency injection等， 但是很多用法和原理都已经不是那么一回事了。Angular2有如下一些特性：

模块化

  • 在Angular2开发中，所有的系统功能都是模块化的，你只需要导入需要的部分。用Angular2开发的应用也是模块化的，一个模块、一个功能、甚至页面上的一个标签都是组件。
  • 模块化带来的最大的好处就是按需加载，这就大大提高了APP的启动时的性能，也使得需要下载的代码比较小，因为不需要的模块可以不用导入。按照Angular官方的说法，使用Angular2的hello world的实例创建的App，在做完代码压缩合并以后,下载的代码在50K以内。
  • 模块化也给开发带来方便，使得协作开发、代码合并等都非常方便。

使用TypeScript

  • TypeScript是Javascript的超集，TypeScript的代码会被编译成Javascript的代码再执行。所以，如果有任何的语法或其他错误，就可以在编译的时候及时发现。而这个编译的过程可以通过工具自动执行，这样就可以在你写完某一段代码的时候就发现其中的错误。
  • TypeScript的静态类型的，所以，我们就可以通过一些工具来实现像JAVA这样的强类型语言才会有自动补全、重构、代码查找等功能。虽然说像Webstorm这样的工具对于javascript也能提供自动代码补全之类的功能，但是他是通过检索代码里面的所有关键字，然后匹配关键字去补全，而不是通过语言自身的特性。
  • TypeScript具有面向对象语言的一些特性，如抽象和继承、命名空间、包等。以抽象和继承为例，虽然用js也可以实现类和类的继承关系，但是使用TypeScript我们可以直接使用interface, implements这样的语法来实现，这使得代码结构更清晰、更易读。

更容易

  • 好吧，这只是官方的说法，要说容易也要看从什么方面来说。如果学过Angular1，你们可能知道，1非常容易上手，有一点js基础的人，几天就能学会并开始开发。如果再有一点MVC的背景或知识，就更容易了。但是2就不一样，一开始学习成本比较高，首先是因为TypeScript的语法，模块化的开发，对于没有多少开发经验的人来说，理解和上手都有一定困难。但是一旦上手以后，之后的开发和学习就比较容易了。不像Angular1，一开始的学习曲线很平缓，很容易上手，但是真正开始开发一个比较复杂的应用的时候，就会发现有很多问题，需要理解他的背后的原理，像双向绑定、模板、路由等。这时候的学习曲线就会变得很陡。
  • Angular2是一个完整的前端开发框架，利用Angular2提供的功能和模块，你可以开发一个完整的应用。但是如果你用React，你还需要整合很多其他的库来实现某些方面的功能，这样就会面临很多选择，Redux, Flux, React-router, axios…
  • 前面提到Angular2使用TypeScript，这也给开发带来很多便利，使得代码更易读、容易维护。

Angular2开发

在这篇文章里，我们通过一个完整的实例（一个Todolist的App），来了解一个Angular2的应用的开发的大致的方法或过程。这会分成2部分，第一部分先介绍我们使用的Angular2项目的模板，通过这个模板介绍Angular2项目的基本框架和配置。在第二部分里，再具体的开发具体的业务模块。

获取项目模板

我创建了一个Angular2的项目模板，这是根据官方提供的教程创建，已经配置好项目的基本配置和typescript，还提供了live-reload的功能，也就是当某一个文件修改的时候，就会刷新页面，如果修改的文件是typescript的.ts文件，就会先编译再刷新页面。使用git将项目clone到你的指定目录中就可以开始使用了：

1

git clone --depth 1 https://github.com/Mavlarn/angular2-basic

然后进入项目目录里面，安装依赖包:

1

2

cd angular2-basic

npm install

npm install 除了安装项目的依赖包，最后还会运行typings install，如果你运行完npm install发现’typings’目录没有创建，就需要运行这个命令去手动安装:

1

npm run typings -- install

然后就可以运行了:

1

npm start

启动成功以后，就会自动打开浏览器并打开url：http://localhost:3000/ ，应该看到下面的页面:

项目结构和文件

先来看看项目模板里面的文件，以及他们都是做什么的:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

.

├── app

│ ├── about

│ │ ├── about.component.html

│ │ ├── about.component.ts

│ │ └── about.routes.ts

│ ├── example

│ │ ├── example.component.html

│ │ ├── example.component.ts

│ │ └── example.routes.ts

│ ├── app.component.css

│ ├── app.component.html

│ ├── app.component.ts

│ ├── app.module.ts

│ ├── app.routes.ts

│ └── main.ts

├── build

├── index.html

├── package.json

├── styles.css

├── systemjs.config.js

├── tsconfig.json

├── typings

│ ├── globals

│ └── index.d.ts

└── typings.json

下面是项目环境相关的文件：

package.json

这是项目的基本定义文件，所有的基于nodejs的项目都会有一个package.json文件，里面会定义项目名称、版本、依赖的库，以及脚本。脚本里面定义了几个可以使用npm运行的脚本，例如：

  • “start”: “tsc && concurrently \”npm run tsc:w\” \”npm run lite\” “

    用于启动测试服务器，启动的过程中执行了编译、检测文件修改、启动服务器等任务。

  • “postinstall”: “typings install”

    用于在npm install完成以后执行，下载TypeScript类型定义文件。

  • “tsc:w”: “tsc -w”

    编译TypeScript文件，并且是以’watch’模式启动，也就是检测文件修改，如果有TypeScript文件被修改，自动执行编译过程。

typings.json

TypeScript类型定义文件，定义了项目用到的TypeScript类，用于编译、代码补全等。

typings文件夹

运行typings install以后，TypeScript会根据typings.json文件里面的定义，下载需要的类型定义文件，下载的TypeScript类文件会保存在这里。

tsconfig.json

TypeScript的配置文件，在编译TypeScript文件的时候，会根据这个配置进行编译。

systemjs.config.js

SystemJS的配置文件。Angular2使用SystemJS来实现动态加载，它设置每个模块所在的位置，例如，我们的app，是从build目录中加载，加载的文件是main.js。还有，angular模块，也就是@angular，是从node_modules/@angular里加载。如果我们的App以后要使用其他第三方的库，就需要在这里添加，才能够成功加载。

下面，我们再来看看App相关的文件。

index.html

App的index文件，里面已经添加了需要的js、css文件，然后通过SystemJS加载app。该文件里面的：

1

<root-app>Loading...</root-app>

定义了加载App的html组件’root-app’。

styles.css

全局的样式定义。注意每个组件使用的样式不是在这里面。

app/main.ts

Angular2的App初始化文件。每一个Angular2的App都是通过这个文件被加载的。

1

2

3

4

import { platformBrowserDynamic } from \'@angular/platform-browser-dynamic\';

import { AppModule } from \'./app.module\';

platformBrowserDynamic().bootstrapModule(AppModule);

它首先从@angular/platform-browser-dynamic里引入了platformBrowserDynamic，从他的名字可以看出，它根据当前的运行环境，如操作系统、浏览器，来初始化一个运行环境，然后从这个环境里面运行AppModule。

app/app.module.ts

这个文件定义了我们的App，它是一个Angular模块。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

import { NgModule } from \'@angular/core\';

import { BrowserModule } from \'@angular/platform-browser\';

import { RouterModule } from \'@angular/router\';

import { FormsModule } from \'@angular/forms\';

import { AppComponent } from \'./app.component\';

import { AboutComponent } from \'./about/about.component\';

import { ExampleComponent } from \'./example/example.component\';

import { routes } from \'./app.routes\';

@NgModule({

imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],

declarations: [AppComponent, AboutComponent, ExampleComponent],

bootstrap: [AppComponent]

})

export class AppModule {}

首先它引入了几个Angular2的模块，我们需要使用RouterModule里面定义的路由，如果有表单，需要引入FormsModule。

接下来的几个，就是引入了这个模板项目里面提供的几个组件，其中AppComponent是App的主加载模块, AboutComponent和ExampleComponent组件是两个提供的实例。routes是定义的路由。

接下来再看App模块的定义:

1

2

3

4

5

6

@NgModule({

imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],

declarations: [AppComponent, AboutComponent, ExampleComponent],

bootstrap: [AppComponent]

})

export class AppModule {}

它使用NgModule标签定义了一个模块，我们需要导入的模块和路由、定义的组件，启动app使用的组件，都在这里面定义。

  • app/app.routes.ts

    这个是app的路由定义。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    import { Routes } from \'@angular/router\';

    import { AboutRoutes } from \'./about/about.routes\';

    import { ExampleRoutes } from \'./example/example.routes\';

    export const routes: Routes = [

    {

    path: \'\',

    redirectTo: \'/example\',

    pathMatch: \'full\'

    },

    ...AboutRoutes,

    ...ExampleRoutes

    ];

他首先从@angular/router里面引入Routes类，并根据这个定义app的路由。在这个路由里面，我们定义了一个默认路由，当你的path为空时重定向到’example’：

1

{ path: \'\', redirectTo: \'/example\', pathMatch: \'full\'}

也就是当打开urlhttp://localhost:3000的时候，自动重定向到’example’，也就是http://localhost:3000/example。

同时，它还从两个实例的组件about和example里面引入他的路由定义文件，并把它们合并到app的路由定义数组里面。

注意这里的...语法，这是列表的合并的语法，意思是，我在定义一个Routes的数组的同时，把AboutRoutes这个数组也合并到当前的数组里面。

app/app.component.*

在上面的AppModule的定义里，我们定义了我们的app，并且定义了AppComponent是加载模块。下面就来看看这个组件是怎么定义的。这里有3个文件，分别为’ts’, ‘css’和’html’，这也是一般一个简单的组件包含的3个部分。其中app.component.ts是组件定义的类:

1

2

3

4

5

6

7

8

import { Component } from \'@angular/core\';

@Component({

selector: \'root-app\',

templateUrl: \'app/app.component.html\',

styleUrls: [\'app/app.component.css\']

})

export class AppComponent {}

这里，我们使用一个Component标签来定义一个组件，里面有3个属性：

  • selector，就是这个组件在它的上一级html页面里面要填充进那个element里。由于这个是我们的APP的主模块，它的上一级html页面也就是index.html。在上面的index页面中，提到<root-app>Loading...</root-app>，这个’root-app’就是’selector’里面的这个值。当这个AppComponent加载成功以后，这个组件的html内容就会替换index页面的<root-app>。
  • templateUrl

    这个属性设置了这个组件使用的html模板。对于简单的页面的话，也可以使用template来定义一个html的字符串作为模板。下面是这个模板的内容:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <header>

    <section>

    <h2>First Angular 2 App</h2>

    <p>Greate! My first angular 2 app works!</p>

    </section>

    <nav>

    <ul>

    <li><a routerLink=\'/about\'>About</a></li>

    <li><a routerLink=\'/example\'>Example</a></li>

    </ul>

    </nav>

    </header>

    <router-outlet></router-outlet>

上面的页面其实就是我们的app里面的主页面，上面header的部分就是app的头，有2个导航的链接，分别链接到模板里面提供的2个实例组件(注意链接用的是routerLink=\'/about\'的方式，而不是’html’的’href’的方式。)。下面就是router-outlet定义的一个空的element，Angular2会根据路由定义将当前路径所对应的页面内容放在这个element下面。

  • styleUrls

    顾名思义，这个就是样式的定义文件的路径。同样，我们也可以使用style来在这个文件内定义样式。我们多次提到Angular2是组件化的，组件之间应该是不会相互影响，首先就是定义的样式不会相互影响。在这个app.component.css文件中，我们定义了app.component.html需要的样式：

    1

    2

    3

    4

    5

    6

    7

    8

    header section {

    display: inline-block;

    width: 80%;

    }

    header nav {

    width: 20%;

    float: right;

    }

我们不需要担心在整个app的其他组件里面，也会有其他的html element会被header section这样的样式影响，这个样式只会在这个组件内有效。

app/example/ 和 app/about/

这是一个实例组件，里面有ts, html, css。这几个文件的功能和说明跟上面’app.component’里的定义类似。有一点区别的就是example.routes.ts文件：

1

2

3

4

5

6

7

8

9

import { Route } from \'@angular/router\';

import { ExampleComponent } from \'./example.component\';

export const ExampleRoutes: Route[] = [

{

path: \'example\',

component: ExampleComponent

}

];

这个路由定义引入的是Route， 而不是之前的Routes，区别是我们在app模块的路由定义里面合并每个模块的路由定义。

到现在为止，我们介绍了一个Angular2的项目所包含的配置和代码，了解了上面介绍的项目环境以后，就可以再进一步使用gulp或者webpack来创建项目构建的环境。如不同的运行环境下的自动配置，如开发环境、测试环境和生产环境。还有代码的混淆、压缩、合并等，都可以通过添加一个任务来完成。

熟悉了上面的代码以后，我们就可以来实现自己的业务逻辑，也就是添加一些组件，把这些组件加到AppModule里，使用第三方的jsku等。在这个教程的第二部分里，我们会介绍怎么开发新的组件，来完成一个App。

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。