angularJS2 我来了

来源：互联网发布：华硕驱动软件下载编辑：程序博客网时间：2024/06/05 20:39

angularJS2 我来了

2015年03月06日，AngularJS 2.0 Alpha 开始进行内测试发版本。
2015年12月16日，AngularJS 2.0 Beta 测试版本。
2016年05月02日，AngularJS 2.0 rc 版本。
更多版本信息
angularjs2 推进行很快 , 在 2013 年的那个时候 angularjs1 才开始慢的出名。csdn 做了专访AngularJS框架创始人Misko Hevery：让Web开发更便捷
2014年是移动互联网爆发之年，就能专门做后台管理的系统 extjs 也开始页向移动平台大力进军了。 angularjs2 就是因此而来。加上 ng-book2 的袭来，没理由不来学习一下。在这里感谢 ng-book2 资料提供者。

1. 支持浏览器

我们做前端开发的最关心的话题 angularjs2 对浏览器支持如下图。
浏览器支持

2. 官方资料

在学习框架时候，资料是最为关键的。 ng-book2 提供良好入门开端。

https://github.com/angular/angular
https://angular.io/

3. 其他依赖

AngularJS2 运行依赖如下，大部分都是以 typescript 进行编译，我们也用 typescript 进行编译。用 “Dart” 也是可以编译的。当然我们 js 直接编写也是没问题的。

AngularJS2 – js 版本
AngularJS2 – dart 版本

es5，es6es6-shimsystemjsrxjs

4. 简单实例

用 AngularJS2 实现基础，在页面上显示 “angular2我来了” 大字。

4.1 安装 typescript

进入 cmd 运行下面内容。通 -g 参加把 typescript 设置成为 path 方便以后进行操作

npm install -g typescript

4.2 通 npm 安装依赖库

下面是 “package.json” 文件

{  "name": "angular2-quickstart",  "version": "1.0.0",  "scripts": {    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",    "lite": "lite-server",    "postinstall": "typings install",    "tsc": "tsc",    "tsc:w": "tsc -w",    "typings": "typings"  },  "license": "ISC",  "dependencies": {    "angular2": "2.0.0-beta.15",    "systemjs": "0.19.26",    "es6-shim": "^0.35.0",    "reflect-metadata": "0.1.2",    "rxjs": "5.0.0-beta.2",    "zone.js": "0.6.10"  },  "devDependencies": {    "concurrently": "^2.0.0",    "lite-server": "^2.2.0",    "typescript": "^1.8.10",    "typings":"^0.7.12"  }}

我们有了 “package.json” 文件后进入 cmd 运行下面内容安装依赖。

npm install

4.3 完成 “angular2我来了”

创建 index.html 页面导入浏览器能调用的依赖和 angular2 框架文件

<html>  <head>    <title>Angular 2 QuickStart</title>    <meta name="viewport" content="width=device-width, initial-scale=1">        <link rel="stylesheet" href="styles.css">    <!-- 1. Load libraries -->    <!-- IE required polyfills, in this exact order -->    <script src="node_modules/es6-shim/es6-shim.min.js"></script>    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>       <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>    <script src="node_modules/systemjs/dist/system.src.js"></script>    <script src="node_modules/rxjs/bundles/Rx.js"></script>    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>    <!-- 2. Configure SystemJS -->    <script>      System.config({        packages: {                  app: {            format: 'register',            defaultExtension: 'js'          }        }      });      System.import('app/main')            .then(null, console.error.bind(console));    </script>  </head>  <!-- 3. Display the application -->  <body>    <my-app>Loading...</my-app>  </body></html>

编译 main.ts 生成 main.js 文件。

import {bootstrap}    from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({    selector: 'my-app',    '<h1>angular2我来了</h1>'})
export class AppComponent { }
bootstrap(AppComponent );

4.4 展示效果

进入 cmd 运行下面内容，它会帮你打开一个浏览器看到效果。

npm run start

0 0