Angular 2 Quickstart
写一个Angular 2的应用最基本的步骤概括为三步:写root组件,启动它(Boostrap),写index.html。
一些关于命名空间的基本知识
把所有代码放入一个立即调用函数中,通过传入一个空对象app,实现对命名空间的隔离,避免了污染全局命名空间。
(function(app) {
app.AppComponent = ....
})(window.app || (window.app = {}));
将要导出的内容添加到app命名空间内,比如我们通过app.AppComponent=...,来将AppComponent导出,其他文件可以通过app对象来使用。
组件 app.component.js
(function (app) {
app.AppComponent =
ng.core.Component({
selector: "#my-app",
template: "<h1>My First Angular 2 App</h1>"
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
一个组件控制一个视图,严格意义上组件就是class。
它使用NG的core命名空间中的Component方法和Class方法定义。
Component方法:接收一个具有两个属性的对象作为配置参数,selector是选择器(同jQuery选择器),template是渲染视图的内容(html)。
Class方法:接收一个对象,用于实现component,通过给它属性和方法来绑定到视图,定义它的行为(constructor属性是一个函数,用于定义这些行为?)
启动 boot.js
(function (app) {
document.addEventListener('DOMContentLoaded',function() {
// 页面文档完全加载并解析完毕之后,调用bootstrap方法,传入根组件AppComponent来启动它
ng.platform.browser.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));
页面文档完全加载并解析完毕之后,会触发DOMContentLoaded
事件,HTML文档不会等待样式文件、图片文件、子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular 2</title>
<!-- IE required polyfill -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script> <!-- Angular所需的lib -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script> <!-- 自己编写的模块 -->
<script src='app/app.component.js'></script>
<script src='app/boot.js'></script>
</head>
<body>
<!-- Angular需要通过selector找到的视图 -->
<div id="my-app">Loading...</div>
</body>
</html>
需要注意的是boot.js要放在app.component.js之后,当Angular调用boot.js的启动程序,它读取AppComponent组件,找到“my-app”选择器,定位到一个id为“my-app”的元素,将template的内容加载到元素里面。
使用npm start来启动程序,在package.json的配置中实际上将npm start命令映射到了启动lite-server服务,它可以监控文件改动,实现自动刷新。
// package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"lite-server": "^1.3.1"
}
}
Angular 2 Quickstart的更多相关文章
- Angular 2 - 5 分钟快速入门
原文地址: https://angular.io/docs/ts/latest/quickstart.html 让我们从 0 开始创建一个简单的 Angular 2 应用. 下载任何版本的 angul ...
- 翻译:Angular 2 - TypeScript 5 分钟快速入门
原文地址:https://angular.io/docs/ts/latest/quickstart.html Angular 2 终于发布了 beta 版.这意味着正式版应该很快就要发布了. 让我们使 ...
- [Angular 2] 9. Replace ng-modle with #ref & events
Let's say you want to write a simple data bing app. when you type in a text box, somewhere in the ap ...
- [Angular 2] Controlling how Styles are Shared with View Encapsulation
Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and Non ...
- Angular学习笔记(2)——TODO小应用
Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法 ...
- TypeScript 5 Angular 2
TypeScript 5 分钟快速入门 翻译:Angular 2 - TypeScript 5 分钟快速入门 原文地址:https://angular.io/docs/ts/latest/quicks ...
- Angular2 Hello World 之 2.0.0-beta.14
公司现在采用angualrjs开发一些web应用,采用的是angular1,现在angular2已经差不多了,听说最近rc6已经出来了……其实感觉好慢啊!之前也做过一些anglar2的例子,但是没有记 ...
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...
- angularjs 2.0 简单入门1
一:首先要写json文件,并下载所有的包 1,在任意目录下新建文件夹 命名为angular2Dome,也可以使用命令 mkdir angular2Dome 回车. 2,在angular2Dome文件 ...
随机推荐
- 结合Git实现Mysql差异备份,可用于生产环境
埋头苦干多年一直没写过文章,今天突发狂想,为LNMP阵营贡献一些力量.就从平时工作过程中的心得和一些技巧分享出来.今天就猿们最熟悉的Mysql开始宅鸟的开篇博客文章.欢迎猿们拍砖.转载. 注意:宅鸟的 ...
- Vue.js学习 Item4 -- 数据双向绑定
Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...
- WPF—TreeView无限极绑定集合形成树结构
1.如图所示:绑定树效果图 2.前台Xaml代码: <Window x:Class="WpfTest.MainWindow" xmlns="http://schem ...
- 学习c的第8天
#include <stdio.h> int main() { char ch; printf("请输入分数等级(A,B,C,D):"); scanf("%c ...
- spring 知识梳理
https://github.com/spring-projects/spring-framework spring github地址
- Ajax异步刷新局部页面的小李子
看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:
- 实现QQ机器人报警
如题,废话不说,直接上代码.首先是登录QQ的小脚本 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 27 28 ...
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...
- linuxok6410的I2C驱动分析---用户态驱动
3 i2c-dev 3.1 概述 之前在介绍I2C子系统时,提到过使用i2c-dev.c文件在应用程序中实现我们的I2C从设备驱动.不过,它实现的是一个虚拟,临时的i2c_client,随着设备文件 ...
- WPF控件数据单项绑定
建立一个姓名,年龄输入框,如图: XAML代码: <TextBox Name="txtName" Text="{Binding Name}" ToolTi ...