资讯专栏INFORMATION COLUMN

angular入门

Gu_Yan / 1316人阅读

摘要:学习入门第一课步骤创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置文件创建文件编译

angular2 学习入门第一课 步骤

Install Node.js

创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置

Create the app’s Angular root component

Add main.ts, identifying the root component to Angular

Add index.html, the web page that hosts the application

Build and run the app

文件 创建文件
touch package.json
touch tsconfig.json 
touch typings.json
touch systemjs.config.js
touch index.html
touch styles.css
mkdir app
touch app/app.component.ts
touch app/main.ts
 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": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}
tsconfig.json 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}
systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    "app":                        "app", // "dist",
    "@angular":                   "node_modules/@angular",
    "angular2-in-memory-web-api": "node_modules/angular2-in-memory-web-api",
    "rxjs":                       "node_modules/rxjs"
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    "app":                        { main: "main.js",  defaultExtension: "js" },
    "rxjs":                       { defaultExtension: "js" },
    "angular2-in-memory-web-api": { main: "index.js", defaultExtension: "js" },
  };
  var ngPackageNames = [
    "common",
    "compiler",
    "core",
    "forms",
    "http",
    "platform-browser",
    "platform-browser-dynamic",
    "router",
    "router-deprecated",
    "upgrade",
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages["@angular/"+pkgName] = { main: "index.js", defaultExtension: "js" };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages["@angular/"+pkgName] = { main: "/bundles/" + pkgName + ".umd.js", defaultExtension: "js" };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);
编译
npm install
npm run typings install
Our first Angular component
mkdir app

touch app/app.component.ts

import { Component } from "@angular/core";
@Component({
  selector: "my-app",
  template: "

My First Angular 2 App

" }) export class AppComponent { } touch app/main.ts import { bootstrap } from "@angular/platform-browser-dynamic"; import { AppComponent } from "./app.component"; bootstrap(AppComponent); touch index.html

  
    Angular 2 QuickStart
    
    
    
    
     
    
    
    
    
    
    
    
  
  
  
    Loading...
  

style.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}
Build and run the app!
npm start

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49974.html

相关文章

  • Angular AMD 快速入门

    摘要:快速入门是作者使用开发的前端框架因此你可以使用它快速创建一款它特别适合快速开发应用。配置路由通过使用我们可以动态配置所需要加载的主要目的是去设置中去进行惰性加载以及无论你传入什么样的参数值进去,都会被返回。 Angular AMD 快速入门 angularAMD是作者@ marcoslin使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一...

    Tychio 评论0 收藏0
  • Angular2入门系列(三)————组件

    摘要:入门系列三组件概述组件是构成应用的基础和核心,它是用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作。在早期的模块化工具中,多数只是针对文件部分做了处理,比如,而缺少对,等文件进行管理的工具。组件的详细介绍请见下一章节。。。 Angular2入门系列(三)————组件 1. 概述 组件(component)是构成Angular应用的基础和核心,它是用来包装特定的功能,应用程...

    denson 评论0 收藏0
  • Angular2入门系列(一)————如何在Angular2中使用jQuery和基于jQuery的插

    摘要:入门系列一如何在中使用和基于的插件在年的月中旬,官方终于正式发布。本篇文章就简单介绍下在中如何使用极其插件。按照插件的使用规则,在对应的中使用插件所需要的结构。 Angular2入门系列(一)————如何在Angular2中使用jQuery和基于jQuery的插件 在2016年的9月中旬,Google官方终于正式发布Angular2。尽管npm社区越来越完善,也提供了大量的插件,但是基...

    Karrdy 评论0 收藏0
  • Angular2入门系列(一)————如何在Angular2中使用jQuery和基于jQuery的插

    摘要:入门系列一如何在中使用和基于的插件在年的月中旬,官方终于正式发布。本篇文章就简单介绍下在中如何使用极其插件。按照插件的使用规则,在对应的中使用插件所需要的结构。 Angular2入门系列(一)————如何在Angular2中使用jQuery和基于jQuery的插件 在2016年的9月中旬,Google官方终于正式发布Angular2。尽管npm社区越来越完善,也提供了大量的插件,但是基...

    z2xy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<