Angular-quickstart快速开始

Angular很像后台的MVC框架,有route路由,有Controller,有模板,模块化,这是对angularjs1.x的来说的,但是Angular2之后,Angular就变得完全不一样,几乎就是要从头学起,学习难度曲线也相当陡峭,这对Angular1.x的用户来说,简直就是一大打击,Angular2也解决angular1.x版本的SEO的问题

7 min read
By myfreax
Angular-quickstart快速开始

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

构建步骤

  1. 安装开发环境
  2. 编写App root component 组件
  3. 引导App 主web 页面
  4. 编写主页面

部署开发环境

创建项目文件结构

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有两种方式启动应用

  1. 浏览器引导函数 ng.platform.browser.bootstrap();
  2. 应用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

组件职责就是管理视图,启动应用与视图管理无关,这就是关注点分离