angular2快速上手翻译

最新推荐文章于 2023-03-04 12:11:55 发布

最新推荐文章于 2023-03-04 12:11:55 发布 · 154 阅读

文章标签：

#JavaScript #angular #ViewUI

javascript 专栏收录该内容

6 篇文章

订阅专栏

本教程介绍如何使用 Angular 2 构建一个简单的 Web 应用，包括设置开发环境、创建项目、定义组件及启动 HTTP 服务器等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//原文地址 https://angular.io/docs/js/latest/quickstart.html zhuhq
//可以直接访问[url=http://note.youdao.com/share/?id=9c261638549621b6bee122df614f44fc&type=note]http://note.youdao.com/share/?id=9c261638549621b6bee122df614f44fc&type=note[/url] 排版好点
Angular2还处于测试阶段,请勿用于生产环境！这个快速上手教程以后可能会改变仅提供给想尝鲜的同学。
1. 新建工程

我们要用angular在页面上显示“Hello Alice”. 首先我们新建目录angular2_quickstart并进入这个目录
mkdir angular2_quickstart
cd angular2_quickstart
2. 从githup下载quickstart项目

从githup clone quickstart项目，这个项目中包含了我们需要的一些文件，这样我们就不需要自己再去单独整合这些文件:
git clone https://github.com/angular/quickstart.git

名词解释ES6, AtScript, es6-shim

AtScript

Angular是用AtScript写的，AtScript是基于ES6扩展的语言.我们将用这门语言编写quickstart，当然你也可以用ES6或ES5编写angular程序。
ES6

AtScript会被编译成ES6在浏览器中执行，还有很多浏览器不支持ES6，所以我们提供了es6-shim。
es6-shim

es6-shim提供ES6转ES5，从而可以让不支持ES6的浏览器可以运行ES6编写的程序
3. 引入angular JS

在项目根目录下新建俩个文件index.html 、app.es6:
touch index.html
touch app.es6
如果你的编辑器不支持.es6扩展名，可以用.js
在app.es6中, 引入需要的Angular模块:
import {Component, Template, bootstrap} from 'angular2/angular2';
这条语句使用ES6语法引入了3个Angular 模块，这些模块会在运行时被加载。
4. 定义组件

本实例会定义一个在页面中可以用<my-app>这种HTML标签形式使用的组件.
组件包含俩个部分：声明部分和组件控制器.
// Annotation section
@Component({
selector: 'my-app'
})
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
constructor() {
this.name = 'Alice';
}
}
组件声明

组件声明可以用来配置组件的元信息.
@Component（以CSS选择器的方式）声明这个组件可以用<my-app>HTML标签形式使用.
@Template 以行内方式声明这个组件使用的渲染模板，当然你也可以以提供模板url的方式使用模板.
@Component({
selector: 'my-app' // Defines the <my-app></my-app> tag
})
@Template({
inline: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
})
上面的代码声明了一个使用<my-app>标签，模板为 <h1>Hello {{ name }}</h1>的组件.
模板和组件控制器

控制器操作模板. 下面用ES6 class语法编写一个控制器.
class MyAppComponent {
constructor() {
this.name = 'Alice';
}
}
模板从模板控制器中读取数据，模板可以访问控制器的属性和方法。
模板中以”{{. .}}“方式访问控制器中的属性，如我们定义的模板中 {{name}} 即是访问控制器的name属性，当模板渲染时会{{name}}会被替换为‘Alice’ .
5. 启动

在app.es6的底部调用 bootstrap() 方法把我们新定义的组件MyAppComponent加载到页面:
bootstrap(MyAppComponent);

6. 编写Html

在index.html的head部分引入es-shim.js文件. (es6-shim.js文件必须在应用文件加载前加载.)，然后在body部分输入< my-app></my-app>.

<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="/quickstart/dist/es6-shim.js"></script>
</head>
<body>


<my-app></my-app>

</body>
</html>
7. 加载组件

最后一步是加载需要的组件.我们使用 System library加载（在quickstart中已经有了） .
System.js

System是一个提供ES6模块化加载支持的开源JS库.
在index.html加入模块加载代码:
<my-app></my-app>

<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*':'/quickstart/angular2/*.js', // Angular
'rtts_assert/*': '/quickstart/rtts_assert/*.js', //Runtime assertions
'app': 'app.es6' // The my-app component
};

// Kick off the application
System.import('app');
</script>

8. 启动Http服务器

启动http服务器，访问index.html页面.
如果你还没有http服务器，可以使用http-server 安装方式： npm install -g http-server. （需要有Node JS环境）
# From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html