angular2快速上手翻译

本教程介绍如何使用 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>.
<!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="/quickstart/dist/es6-shim.js"></script>
</head>
<body>

<!-- The app component created in app.es6 -->
<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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值