angular2使用简单介绍

前端技术 2023/09/07 JavaScript

让我们从零开始，使用Typescript构建一个超级简单的 AngularJs 2应用。

先跑一个DEMO

运行这个 DEMO先来感受一下 AngularJS2 的应用。

下面是这个应用的文件结构

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

总结来说就是一个 index.html 文件和两个在 app 文件下的 Typescript 文件， 我们可以hold住！

下面我们将一步一步的构建这样的一个程序：

  1. 配置我们的开发环境
  2. 编写 Angular 初始化组件
  3. 引导它控制我们主要的 index.html 页面
  4. 编写index.html 页面

开发环境搭建

建立文件夹

mkdir angular2-app
cd  angular2-app

配置TYPESCRIPT

需要通过一些特殊的设置来指导Typesript进行编译。
新建一个 tsconfig.json 文件，放于项目根目录下，并输入一下配置

{
 \"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\"
 ]
}

我们稍后在附录中会详细讲解这个 tsconfig.json

TYPESCRIPT TYPINGS

有很多Javascript的库，继承了一些 Javascript的环境变量以及语法， Typescript编译器并不能原生的支持这些。 所以我们使用 Typescript 类型定义文件 – d.ts 文件 （即 typings.json） 来解决这些兼容性问题。

创建 typings.json 文件，放于项目根目录下

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

同样的，在附录中会有更详细点的解释

添加我们需要的库

我们推荐使用npm来管理我们的依赖库。
在项目根目录下创建package.json文件

{
 \"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\"
 }
}

在附录中，会有更详细的解释

安装这些依赖包只需要运行

npm install

这样我们就完成了我们的开发环境的搭建。

第一个ANGULAR 组件

组件是Angular中最基本的一个概念。 一个组件包含一个视图 – 我们用来展示信息或者完成用户交互的页面。 技术上来讲， 一个组件就是一个控制模板试图的类， 在开发应用中会写很多组件。 这是我们第一次尝试写一个组件，所以我们保证他尽可能的简单。

创建一个应用源码的子目录

我们习惯上将我们的程序放在项目根目录下的 app 子目录下，所以首先创建一个 app 文件夹

mkdir app
cd  app

创建组件文件

在 app 文件夹下创建一个 app.component.ts 文件，然后输入以下内容

import {Component} from \'angular2/core\';

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

让我们来详细的看一下这个文件， 在文件的最后一行，我们定义了一个 类。

组件类

在这个文件地步，我们创建了一个啥都不做的空组件类 AppComponent。 当我们真正开发应用的时候， 我们可以扩展这个类，比如添加一些属性和方法逻辑。 这个 AppComponent 类之所以为空是因为我们在入门程序中他不用做任何事情。

模块

Angular应用是模块化的。 他们包含很多完成某项功能的模块文件。
大多数程序文件会 export出一个东西比如一个组件。 我们的 app.component.ts 文件 exports出了 AppComponent

export class AppComponent { }
exports使一个文件转变成一个模块。 文件名（不包含扩展名）通常就是这个模块的名称。 所以， app.component 就是我们的第一个模块的名称。

一些更复杂的应用会有继承于 AppComponent 的子组件， 而且会有很多文件和模块。但是我们的快速入门程序不需要这么多， 一个组件就够了。

如果一个组件依赖其他的组件， 在Typescript应用中， 当我们需要引入其他模块的时候，直接import进来就可以使用。 例如：

import {AppComponent} from \'./app.component\'
Angular 同样是一个模块， 他是一系列模块的集合。 所以当我们需要angular的一些功能时，同样的把Angular引入进来。

组件注解

当我们给一个类加上注解的时候， 一个类就变成了 Angular的组件。 Angular 需要通过注解来搞明白怎么去构建视图， 还有组件是怎么与应用的其他部分进行整合的。

我们用 Componet 方法来定义一个组件的注解， 这个方法需要引入 angular2/core 才可以使用。

import {Component} from \'angular2/core\';

在Typescript中，我们在类上面添加注解， 注解的方式很简单，使用 @ 作为前缀进行注解。

@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

本文地址：https://www.stayed.cn/item/18751

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案