文档章节

Angular 2 环境搭建

Mercy_丶
 Mercy_丶
发布于 2016/05/27 10:02
字数 554
阅读 2081
收藏 0

1、下载安装 nodejs 和 npm 

2、新建文件夹 ‘angular2-quickstart-master’

3、在 ‘angular2-quickstart-master’ 添加文件 目录结构如下:

       

 index.html:

<html>

<head>
  <title>Angular 2 QuickStart</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

  <!-- 1. Load libraries -->
  <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/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>

  <script src="node_modules/systemjs/dist/system.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.min.js"></script>

  <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
  <!-- 2. Configure SystemJS -->
  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      },
      map: {
        moment: 'node_modules/moment/moment.js',
        "@angular/core": "node_modules/@angular/core/core.umd.js",
        "@angular/common": "node_modules/@angular/common/common.umd.js",
        "@angular/compiler": "node_modules/@angular/compiler/compiler.umd.js",
        "@angular/platform-browser": "node_modules/@angular/platform-browser/platform-browser.umd.js",
        "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js",
        // ng2-bootstrap specifics
        "@angular/core/src/facade/lang": "node_modules/@angular/core/src/facade/lang.js",
//        "@angular/platform-browser/src/animate/animation_builder": "node_modules/@angular/platform-browser/src/animate/animation_builder.js"
      }
    });
    System.import('app/boot')
      .then(null, console.error.bind(console));
  </script>

</head>

<!-- 3. Display the application -->
<body>
<my-app></my-app>
</body>

</html>

package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": " ./node_modules/.bin/typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "bootstrap": "^3.3.6",
    "es6-shim": "0.35.0",
    "ng-semantic": "^1.0.21",
    "ng2-bootstrap": "1.0.16",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.28",
    "typings": "0.8.1",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "concurrently": "2.0.0",
    "lite-server": "2.2.0",
    "typescript": "1.8.10"
  }
}

    tsconfig.json:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "listFiles": true
  },
  "exclude": [
    "node_modules",
    "typings/browser.d.ts"
  ]
}

typings.json:

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  }
}

4、打开终端运行: npm install,可能需要等待一段时间下载,下载完成后项目目录下会多出’node_modules‘的文件夹。

5、再在项目根目录下新建app文件夹,添加文件 app.component.ts:

import {Component} from '@angular/core';
import {AlertComponent, DATEPICKER_DIRECTIVES,CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [AlertComponent, DATEPICKER_DIRECTIVES],
  template: `
    <alert type="info">ng2-bootstrap hello world!</alert>
      <pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
      <h4>Inline</h4>
      <div style="display:inline-block; min-height:290px;">
        <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
      </div>
  `
})
export class AppComponent {
  public dt:Date = new Date();
  private minDate:Date = null;
  private events:Array<any>;
  private tomorrow:Date;
  private afterTomorrow:Date;
  private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
  private format = this.formats[0];
  private dateOptions:any = {
    formatYear: 'YY',
    startingDay: 1
  };
  private opened:boolean = false;

  public getDate():number {
    return this.dt && this.dt.getTime() || new Date().getTime();
  }
}

和 boot.ts:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component'
import {enableProdMode} from '@angular/core';

enableProdMode();

bootstrap(AppComponent);

再打开终端,cd到你项目根目录下运行,npm start 这样你的项目就跑起来了

© 著作权归作者所有

上一篇: 杂记
Mercy_丶
粉丝 8
博文 40
码字总数 16292
作品 0
私信 提问
加载中

评论(2)

Mercy_丶
Mercy_丶 博主

引用来自“zzllzz”的评论

初始化的五个文件,有没有工具自动生成?

@zzllzz 这个已经是老版本了,现在已经是angular4了,可以去看看官网文档
zzllzz
zzllzz
初始化的五个文件,有没有工具自动生成?
[技术分享]搭建AngularJs 6 .0并建立新项目

AngularJs6.0 版本需要node.js的支持,下载AngularJs-cli需要npm,所以搭建Angular6.0需要安装这些。 1.如果Mac的话 可以安装brew 然后直接安装node环境 如果没有安装brew或者是windows系统 ...

我叫刘小Q
04/01
0
0
【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874
2018/05/08
0
0
想开发Angular项目,但是没有开发环境?使用Docker So Easy!

不管是的开发还是学习Angular,环境是一个很大的问题,大家要在自己电脑上搭建一个Angular的开发测试环境还是非常麻烦的,请大家自行百度“搭建Angular开发环境”。OMG,要安装一堆东西。 但...

麦兜搞IT
2018/05/21
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0
AngularJS 将再发布一个重要版本 然后进入长期支持阶段

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

局长
2018/01/31
7.1K
7

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
12
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部