angular入门

发布时间：2020-12-17 10:32:11 所属栏目：安全来源：网络整理

导读：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

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',};
  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: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

touch app/main.ts

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

touch index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.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.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

style.css

h1 {
  color: #369;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

Build and run the app!

npm start

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!