文档章节

[Angular2]比Angular 2官方更容易理解的Quick Start

悟_箜
 悟_箜
发布于 2016/08/25 23:25
字数 1059
阅读 2499
收藏 44

更新至Angular 2.0正式版,router 3.0

最近开始学习Angular2的开发,经过一段时间的摸索,发现Angular2还是有很多让人眼前一亮的特性的。 尤其是Angular2官网有了中文版(看来天朝程序员才是Angular2的真正用户,哈哈哈哈),还有就是有一个号称五分钟的quick start。虽然写的挺好,不过感觉东西还是有点多,SO,精简再精简,我们一起来写个比官网更简洁的Angular2 quick start。(此版本仅限于开发环境, Angular2 RC5)

开始之前请确认你的电脑安装了NodeJS跟NPM,然后选择一款适合自己的开发工具。准备好之后我们就可以开始啦~~~~~

首先我们来看看项目的目录结构,依赖配置文件:package.json,入口文件:index.html, SystemJS配置文件:systemjs.config.js, Angualr2入口文件:main.ts, 主页面文件:app.module.ts与app.component.ts。就只需要这6个文件??是的,就是这么简单~

  • 我们需要先创建package.json 文件,里面只需要包含我们需要的必备依赖:(下面文件里的注释只是为了方便理解,如果复制代码请把注释去掉,否则会出错!!)
{
  "name": "angular2-quick-start",
  "version": "0.0.1",
  "description": "This is one sample for Angular2 quick start",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "live-server --port=22222"/**设置live-server启动信息,端口号:22222**/
  },
  "author": "Wu Kong",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0"
    
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "^0.19.31",
    "zone.js": "^0.6.23",
    "core-js": "^2.4.1" /**为了让IE支持ES6的语法**/
  },
  "devDependencies": {
    "live-server": "^0.8.2", /**使用live-server做为我们的小型服务器**/
    "typescript": "^2.0.2"
  }
}
  • 创建入口文件index.html, 引入我们需要的依赖, <wk-app>就是我们要写的app.component, 页面的最后我们是通过systemJS来引入入口文件main.ts,那么为什么是System.import('app')而不是System.import('main')呢???答案就在下面!
<!DOCTYPE html>
<html>

<head>
    <title>Angular2 Quick Start</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    <base href="/">
    <!-- 确保IE支持ES6语法 -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>

    <!-- 引入typescript编译器,将会在浏览器端编译Typescript脚本 -->
    <script src="node_modules/typescript/lib/typescript.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <wk-app>Loading...</wk-app>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });
    </script>
</body>

</html>
  • 创建加载配置文件systemjs.config.js, systemJS主要是负责我们开发所需要的资源加载,比如,下面中的@angular的加载路径就是‘node_modules/@angular’
System.config({
    transpiler: 'typescript', /** 编译typescript*/
    typescriptOptions: {
        emitDecoratorMetadata: true
    },
    map: {
        'app': 'app', /** 指定代码所在路径*/
        'rxjs': 'node_modules/rxjs',
        '@angular': 'node_modules/@angular'/** 指定Angular2所在路径*/
    },
    packages: {/** 指定入口文件!!*/
        'app': {
            main: 'main.ts',
            defaultExtension: 'ts'
        },
        'rxjs': {
            main: 'index.js'
        },
        '@angular/core': {
            main: 'index.js'
        },
        '@angular/common': {
            main: 'index.js'
        },
        '@angular/compiler': {
            main: 'index.js'
        },
        '@angular/platform-browser': {
            main: 'index.js'
        },
        '@angular/platform-browser-dynamic': {
            main: 'index.js'
        }
    }
});
  • 入口文件main.ts,只需要简单粗暴的引入了主页面文件app.module.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
  • 主页面文件app.module.ts与app.component.ts
import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';

import AppComponent from './common/components/app.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [AppComponent], /** 声明入口component*/
    bootstrap: [AppComponent],/** 注入入口component*/
})

export class AppModule { }
import {Component} from '@angular/core';

@Component({
  selector: 'wk-app',
  template : '<h1>Hello Angular2 !</h1>'
})
export default class AppComponent {}

好啦,我们所有的工作都完成了!!什么?就这么完了?? 对,你没有看错,就这么简单!哈哈哈,接下来我们只需要安装依赖就可以启动我们的程序啦~~~

  • 打开dos窗口,CD到你刚才新建的项目目录下,运行 npm insatll 开始下载我们的依赖包,类似下图

  • 安装好所有的依赖以后直接运行 npm start,如果你的浏览器正常打开并且显示Hello Angular2 !,恭喜你,你已经迈进Angular2的大门了~~

如果你没有成功,请不要灰心也不要丧气,留下你的错误信息,我会尽量帮你解决的~
如果你有任何疑问也可以留言,我们大家一起讨论解决~

代码已经整理上传到GitHub: https://github.com/WuKongW/Angular2_POC

 

© 著作权归作者所有

悟_箜
粉丝 22
博文 6
码字总数 6080
作品 0
大连
程序员
私信 提问
加载中

评论(5)

悟_箜
悟_箜 博主

引用来自“好独特”的评论

出来了,就是不知道为什么很慢,一直显示loading,大约十秒后出现Hello Angular2 !

因为这里我们只是为了方便演示,我们用的浏览器端编译,也没有打包之类的,所以会很慢
好独特
好独特
出来了,就是不知道为什么很慢,一直显示loading,大约十秒后出现Hello Angular2 !
悟_箜
悟_箜 博主
附上第四弹4
[Angular2] Angular 2中NgModule,Lazy Loading与Route
http://my.oschina.net/wukong1988/blog/741255
悟_箜
悟_箜 博主
附上第三弹4
[Angular2] 添加Angular 2 router(路由)配置信息
http://my.oschina.net/wukong1988/blog/739562
悟_箜
悟_箜 博主
附上第二弹4
[Angular2]创建简单的Angular2 NgModule与Components
http://my.oschina.net/wukong1988/blog/738731
为处理升级过程的问题 Angular 5 将会推迟发布

开发团队目前公布的 Angular 5 发布日期是 10 月 23 日,该版本的重点是构建渐进式的 Web 应用程序(Progressive Web Apps)。 Angular 5 是由谷歌开发的流行 JavaScript 框架的下一个版本,原...

局长
2017/09/19
1K
15
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
2018/05/21
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
68.5K
19
AngularJS 将再发布一个重要版本 然后进入长期支持阶段

Angular 团队的早期开成员之一 Pete Bacon Darwin 近日在 Angular 博客公布了一个消息,他说道: 目前团队正在开发 AngularJS 1.7.0,而 1.7 的开发周期将一直持续到 2018 年 6 月 30 日。7...

局长
2018/01/31
7.1K
7
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9

没有更多内容

加载失败,请刷新页面

加载更多

安装lombok 与阿里巴巴扫描规范 与取消扫描

一、安装lombok 1、先下载lombok的jar 放到eclipse的安装路径 2、打开 eclipse.ini文件 添加引入lombok的jar 我这里是这样的: -javaagent:D:\Program Files\eclipse\eclipse\lombok.jar 3、...

jason_kiss
22分钟前
2
0
基于 QML的 串口调试助手

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/weixin_38416696/article/details/80926090 Qt版本 5.10.0...

shzwork
30分钟前
3
0
Python 开发植物大战僵尸游戏

作者:楷楷 链接:https://segmentfault.com/a/1190000019418065 开发思路 完整项目地址: https://github.com/371854496/pygame 更多好玩有趣的python,尽在公众号「Python专栏」,后台回复...

上海小胖
今天
14
0
JVM优化之逃逸分析与分配消除

要了解逃逸分析背后的基本原理,我们先来看下这段有问题的C代码——当然这个是没法用Java来写的: 这段C代码在栈上创建了一个int类型的变量,然后把它的指针作为函数的返回值返回了。这样做是...

onedotdot
今天
3
0
最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部