Angular-quickstart快速开始
Angular很像后台的MVC框架，有route路由，有Controller，有模板，模块化，这是对angularjs1.x的来说的，但是Angular2之后，Angular就变得完全不一样，几乎就是要从头学起，学习难度曲线也相当陡峭，这对Angular1.x的用户来说，简直就是一大打击，Angular2也解决angular1.x版本的SEO的问题
Angular很像后台的MVC框架，有route路由，有Controller，有模板，模块化，这是对angularjs1.x的来说的，但是Angular2之后，Angular就变得完全不一样，几乎就是要从头学起，学习难度曲线也相当陡峭，这对Angular1.x的用户来说，简直就是一大打击，Angular2也解决angular1.x版本的SEO的问题
官方介绍
速度&性能
Angular 2比Angular 1 更快，支持服务器端渲染，快速启动离线编译
简单&快捷
简单的语法，全新的模板结构，可读性更高，让你的代码变得更加简洁
跨平台
Angular为WebApp提供服务器端渲染，Ionic and NativeScript可以让你构建native UI 的移动Android,iOS Apps
灵活开发方式
可以使用ES5,TypeScript,Dart进行开发，Angular 2是在ES2015标准上运行的，其它语言将会被编译成JavaScript
全方位的路由
Angular 2非常强大，简单易用的依赖注入，让您应用程序模块化，避免编写胶水代码，让你更加容易编写测试代码
浏览器支持
Chrome, Edge, Firefox,and Safari, IE9+ and Android 4.1+.
国际化 (I18N)
使用JavaScript从0开始构建一个简单的Angular2应用程序
文件结构
angular2-quickstart
-app
--app.component.js
--boot.js
index.html
license.md
构建步骤
- 安装开发环境
- 编写App root component 组件
- 引导App 主web 页面
- 编写主页面
部署开发环境
创建项目文件结构
mkdir angular2-quickstart
cd angular2-quickstart
添加我们需要的开发库文件
这里建议使用npm包管理和安装我们开发库文件并且在项目更目录下面添加 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"
}
}
在命令行工具中执行以下命令安装这些开发库
$ npm install
我们的第一个Angular组件
Component 组件是Angular 最根本概念，它管理页面视图显示的信息和并且和用户交互,从技术角度说，组件的class控制视图模板，我们将会编写组件和视图来构建App
创建应用程序源码的子目录
$ mkdir app
$ cd app
添加组件component文件
现在， 添加app.component.js（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 = {}));
在global Angular core namespace(Angular 全局命名空间)下 ng.core.创建可视化组件AppComponent，并且连接 Component和Class方法，Component方法的参数是一个对象包含着两个参数，Class方法实现组件功能，给出的属性和方法将会被绑定到视图的UI和交互
Modules
Angular App 是模块化的，它由很多不同功能文件组成，ES5 Javascript 是没有模块化的，但是我们不想污染全局命名空间，因此我们的代码是写在IIFE(“Immediately Invoked Function Expression”)内部的，IIFE接受app ‘namespace’ 对象作为参数，如果window.app 存在则传入，如果不存传入一个空对象
(function(app) {
/* . . . */
})(window.app || (window.app = {}));
应用程序文件都可以导出的，比如component，我们的 app.component.js 文件导出到AppComponent
app/app.component.js (export)
app.AppComponent = ng.core
一个复杂的应用是由很多的 AppComponent 可视化子组件构成，并且有更多文件和模块
在JavaScript Angular apps 中，模块会依赖其它的模块，当我们需要其它模块可以从app对象 获取它，当其它模块需要引用AppComponent,组件时，可以像下面这样做
app/boot.js (import)
ng.platform.browser.bootstrap(app.AppComponent);
Angular也是模块化的，模块是很多库的集合，每一个库都有它自己的所属的模块，当我们需要从Angular获取某些库的时，我们可以使用ng获取它
定义class object
ng.core.Component() 告诉Angular 这个class定义的是一个Angular component，ng.core.Component() 参数对象有两个属性selector and template.
app.component.js (component)
.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
selector 指定的是CSS简单的html元素选择器 my-app无论 my-app 元素创建在那里Angular会创建一个实例并展示它
template 属性是组件组成部分，模板是html元素告诉Angular怎么渲染视图，这里我们只是简单一个元素”My First Angular App”.
为App设置boot引导
在app/文件夹下添加一个新的文件 boot.js
app/boot.js
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));
在Angular有两种方式启动应用
- 浏览器引导函数 ng.platform.browser.bootstrap();
- 应用root组件
添加 index.html
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<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>
<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/boot.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
编译并运行
打开终端或者Windows 命令行工具
$ npm start
这个命令将会启动 lite-server 服务器并载入index.html，最后会显示
My First Angular 2 App
尝试改变消息内容”My SECOND Angular 2 app”.lite-server 可以监听文件的变化并刷新浏览器,它可以让我们快捷的开发应用
ng.platform.browser
我们使用ng.platform.browse.bootstarp方法引导应用程序是个好习惯
Angular “core” 兼容全平台，虽然很多Angular应用程序都运行在浏览器端，很多时候我们从库中回调bootstrap方法，使它可以在浏览器上更好的运行
但是它也可以在不同环境中载入不同的组件，我们可能会在移动设备中载入Apache Cordova或者NativeScript.我们希望应用程序有更好的性能，更适合seo优化
为什么我们要分离力boot.js文件？
我们的boot.js文件代码虽然很少，因为这是个快速开始
Testability
我们应该从一开始就应该考虑可测试性
在不同的组件单元测试都需要回调引导文件，bootstrap函数默认会尝试在浏览器载入应用程序，它会抛出一个错误，因为在测试的时候，我们期望不执行入口应用程序
把bootstrap 方法分离到boot.js 就可以解决这种错误
Reusability
随着应用不断的发展变大，应用程序需要重构，如果应用引导程序分离，我们就不能在引导文件中做任何操作，我们不能移动它，不能够重用其它组件，不能在服务器端预渲染组件以获得更好的性能
Separation of concerns
组件职责就是管理视图，启动应用与视图管理无关，这就是关注点分离
