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
组件职责就是管理视图,启动应用与视图管理无关,这就是关注点分离