開始使用Angular 2

Download angular2 eBook

備註

本節概述瞭如何安裝和配置Angular2 +以在各種環境中使用,以及IDE使用社區開發的angular-cli等工具。

以前版本的Angular是AngularJS或者也叫Angular 1.請參見文檔

版本

發布日期
4.3.3 2017年8月2日
4.3.2 2017年7月26日
4.3.1 2017年7月19日
4.3.0 2017年7月14日
4.2.0 2017年6月8日
4.1.0 2017年4月26日
4.0.0 2017年3月23日
2.3.0 2016年12月8日
2.2.0 2016年11月14日
2.1.0 2016年10月13日
2.0.2 2016年10月5日
2.0.1 2016年9月23日
2.0.0 2016年9月14日
2.0.0 rc.7 2016年9月13日
2.0.0 rc.6 2016年8月31日
2.0.0 rc.5 2016年8月9日
2.0.0 rc.4 2016年6月30日
2.0.0 rc.3 2016年6月21日
2.0.0 rc.2 2016年6月15日
2.0.0 RC.1 2016年5月3日
2.0.0 rc.0 2016年5月2日

使用node.js / expressjs後端開始使用Angular 2(包括http示例)

我們將創建一個簡單的“Hello World!”應用Angular2 2.4.1( @NgModule 更改)與node.js(expressjs)後端。

先決條件

然後運行npm install -g typescriptyarn global add typescript 來全局安裝typescript

路線圖

步驟1

為我們的應用程序創建一個新文件夾(以及我們後端的根目錄)。我們稱之為Angular2-express

命令行

mkdir Angular2-express
cd Angular2-express
 

第2步

為我們的node.js 應用程序創建package.json (用於依賴項)和app.js (用於bootstrapping)。

的package.json:

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}
 

app.js:

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});
 

然後運行npm installyarn 來安裝依賴項。

現在我們的後端結構已經完成。讓我們繼續前進。

第三步:

我們的前端應該位於Angular2-express 文件夾中名為front 文件夾中。

命令行:

mkdir front
cd front
 

就像我們對後端一樣,我們的前端也需要依賴文件。讓我們繼續創建以下文件: package.jsonsystemjs.config.jstsconfig.json

package.json

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}
 

systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);
 

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}
 

然後運行npm installyarn 來安裝依賴項。

現在我們的依賴文件已經完成了。讓我們繼續我們的index.html

index.html的:

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 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>
 

現在我們準備創建我們的第一個組件。在我們的front 文件夾中創建名為app 文件夾。

命令行:

mkdir app
cd app
 

讓我們將以下文件命名為main.tsapp.module.tsapp.component.ts

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
 

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}
 

app.component.ts:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}
 

在此之後,將打字稿文件編譯為javascript文件。從當前目錄(Angular2-express文件夾內)向上移動2級並運行以下命令。

命令行:

cd ..
cd ..
tsc -p front
 

我們的文件夾結構應如下所示:

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js
 

最後,在Angular2-express文件夾中,在命令行中運行node app.js 命令。打開您最喜歡的瀏覽器並查看localhost:9999 以查看您的應用。

沒有angular-cli的Angular 2入門。

Angular 2.0.0-rc.4

在這個例子中,我們將創建一個“Hello World!”為簡單起見,只有一個根組件( AppComponent )的應用程序。

先決條件:

  • Node.js v5或更高版本
  • npm v3或更高版本

注意:您可以通過在控制台/終端中運行node -vnpm -v 來檢查版本。

步驟1

為項目創建並輸入新文件夾。我們稱之為angular2-example

mkdir angular2-example
cd angular2-example
 

第2步

在我們開始編寫應用程序代碼之前,我們將添加下面提供的4個文件: package.jsontsconfig.jsontypings.jsonsystemjs.config.js

免責聲明:相同的文件可以在官方5分鐘快速入門中找到

package.json - 允許我們使用npm下載所有依賴項,並提供簡單的腳本執行,使簡單項目的生活更輕鬆。 (你應該考慮將來使用像Gulp這樣的東西來自動執行任務)。

{
  "name": "angular2-example",
  "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 - 配置TypeScript轉換器。

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

typings.json - 使TypeScript識別我們正在使用的庫。

{
  "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 - 配置SystemJS (您也可以使用webpack )。

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's 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);
 

第3步

讓我們通過輸入來安裝依賴項

npm install
 

在控制台/終端。

第4步

angular2-example 文件夾中創建index.html

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 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></my-app>
  </body>
</html>
 

您的應用程序將在my-app 標籤之間呈現。

但是,Angular仍然不知道要渲染什麼 。要告訴它,我們將定義AppComponent

第5步

創建一個名為app 的子文件夾,我們可以在其中定義構成我們應用程序的組件和服務 。 (在這種情況下,它只包含AppComponent 代碼和main.ts

mkdir app
 

第6步

創建文件app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}
 

發生了什麼?首先,我們要導入@Component 裝飾器,我們使用它來為Angular提供該組件的HTML標籤和模板。然後,我們使用titlemessages 變量創建類AppComponent ,我們可以在模板中使用它們。

現在讓我們看看那個模板:

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>
 

我們在h1 標籤中顯示title 變量,然後使用*ngFor 指令製作一個列表,顯示messages 數組的每個元素。對於數組中的每個元素, *ngFor 創建一個我們在li 元素中使用的message 變量。結果將是:

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>
 

第7步

現在我們創建一個main.ts 文件,它將是Angular看到的第一個文件。

創建文件app/main.ts

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

bootstrap(AppComponent);
 

我們正在導入bootstrap 函數和AppComponent 類,然後使用bootstrap 告訴Angular將哪個組件用作root。

第8步

是時候啟動你的第一個應用程序了。類型

npm start
 

在你的控制台/終端。這將從package.json 運行一個準備好的腳本,它啟動lite-server,在瀏覽器窗口中打開你的應用程序,並在監視模式下運行TypeScript轉換器(因此.ts 文件將被轉換,瀏覽器將在保存更改時刷新) 。

現在怎麼辦?

查看官方的Angular 2指南StackOverflow文檔中的其他主題。

您還可以編輯AppComponent 以使用外部模板,樣式或添加/編輯組件變量。保存文件後,您應立即看到更改。

通過那個討厭的公司代理

如果您試圖在XYZ MegaCorp的Windows工作計算機上運行Angular2站點,則可能是您在通過公司代理時遇到問題。

有(至少)兩個包管理器需要通過代理:

  1. NPM
  2. 分型

對於NPM,您需要.npmrc 添加到.npmrc 文件中:

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
 

對於Typings,您需要將以下行添加到.typingsrc 文件中:

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false
 

這些文件可能尚不存在,因此您可以將它們創建為空白文本文件。它們可以添加到項目根目錄(與package.json 相同的位置,或者您可以將它們放在%HOMEPATH% ,它們將可用於您的所有項目。

不明顯的位是人們認為代理設置不起作用的主要原因是%5C\ 的URL編碼,用於分隔域名和用戶名。感謝Steve Roberts的那個: 在公司代理.pac後面使用npm

使用angular-cli安裝angular2

此示例是Angular 2的快速設置以及如何生成快速示例項目。

先決條件:

打開終端並逐個運行命令:

npm install -g @angular/cli
 

要么

yarn global add @angular/cli
 

取決於您選擇的包管理器。

上一個命令全局安裝@ angular / cli ,將可執行文件ng 添加到PATH。

設置新項目

使用終端導航到要設置新項目的文件夾。

運行命令:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
 

就是這樣,你現在有了一個用Angular 2製作的簡單示例項目。現在可以導航到終端中顯示的鏈接並查看它正在運行的內容。

添加到現有項目

導航到當前項目的根目錄。

運行命令:

ng init
 

這將為您的項目添加必要的腳手架。這些文件將在當前目錄中創建,因此請務必在空目錄中運行。

在本地運行項目

為了在應用程序在瀏覽器中運行時查看應用程序並與之交互,您必須啟動一個託管項目文件的本地開發服務器。

ng serve
 

如果服務器成功啟動,它應顯示服務器正在運行的地址。通常是這樣的:

http://localhost:4200
 

開箱即用的本地開發服務器與熱模塊重新加載相連,因此對html,typescript或css的任何更改都將觸發瀏覽器自動重新加載(但如果需要可以禁用)。

生成組件,指令,管道和服務

ng generate <scaffold-type> <name> (或簡稱ng g <scaffold-type> <name> )命令允許您自動生成Angular組件:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
 

有幾種可能類型的支架angular-cli可以產生:

腳手架類型用法
ng g module my-new-module
零件 ng g component my-new-component
指示 ng g directive my-new-directive
ng g pipe my-new-pipe
服務 ng g service my-new-service
ng g class my-new-class
接口 ng g interface my-new-interface
枚舉 ng g enum my-new-enum

您也可以用第一個字母替換類型名稱。例如:

ng gm my-new-module 用於生成新模塊或ng gc my-new-component 以創建組件。

建築/捆綁

當您完成Angular 2 Web應用程序的構建並希望將其安裝在Apache Tomcat等Web服務器上時,您需要做的就是運行build命令,無論是否設置了生產標誌。生產將減少代碼並優化生產設置。

ng build
 

要么

ng build --prod
 

然後在項目根目錄中查找/dist 文件夾,其中包含構建。

如果您想要更小的生產包的好處,您還可以使用Ahead-of-Time模板編譯,從最終構建中刪除模板編譯器:

ng build --prod --aot
 

單元測試

Angular 2提供內置的單元測試,angular-cli創建的每個項目都會生成一個可以擴展的基本單元測試。單元測試使用jasmine編寫,並通過Karma執行。要開始測試,請執行以下命令:

ng test
 

此命令將執行項目中的所有測試,並在每次源文件更改時重新執行它們,無論是測試還是來自應用程序的代碼。

有關更多信息,請訪問: angular-cli github頁面

保持Visual Studios與NPM和NODE更新同步

步驟1:找到Node.js的下載,通常它安裝在C:/ program files / nodejs下

第2步:打開Visual Studios並導航到“工具>選項”

第3步:在選項窗口中,導航到“項目和解決方案>外部Web工具”

步驟4:使用Node.js文件位置添加新條目(C:/ program files / nodejs),重要使用菜單上的箭頭按鈕將引用移動到列表頂部。

在此處輸入圖像描述

步驟5:從npm命令窗口重新啟動Visual Studios並針對您的項目運行npm安裝

讓我們深入了解Angular 4!

Angular 4現已推出!實際上Angular使用自Angular 2之後的semver,這需要在引入破壞更改時增加主要數字。 Angular團隊推遲了導致重大變化的功能,這些功能將隨Angular 4發布.Angular 3被跳過以便能夠對齊核心模塊的版本號,因為路由器已經有版本3。

根據Angular團隊的說法,Angular 4應用程序將比以前更少佔用空間並且更快。他們將動畫包與@ angular / core包分開。如果有人沒有使用動畫包,那麼額外的代碼空間將不會在生產中結束。模板綁定語法現在支持if / else樣式語法。 Angular 4現在與最新版本的Typescript 2.1和2.2兼容。因此,Angular 4將更加令人興奮。

現在我將向您展示如何在項目中設置Angular 4。

讓我們用三種不同的方式開始Angular設置:

您可以使用Angular-CLI(命令行界面),它將為您安裝所有依賴項。

  • 您可以從Angular 2遷移到Angular 4。

  • 您可以使用github並克隆Angular4樣板。 (這是最簡單的一個.😉)

  • 使用Angular-CLI進行角度設置(命令行界面)。

在開始使用Angular-CLI之前,請確保您的計算機中已安裝節點。在這裡,我使用的是節點v7.8.0。現在,打開終端並為Angular-CLI鍵入以下命令。

npm install -g @angular/cli
 

要么

yarn global add @angular/cli
 

取決於您使用的包管理器。

我們使用Angular-CLI安裝Angular 4。

ng new Angular4-boilerplate
 

cd Angular4-boilerplate我們都為Angular 4設置了它。它非常簡單直接的方法

通過從Angular 2遷移到Angular 4進行角度設置

現在讓我們看看第二種方法。我將向您展示如何將Angular 2遷移到Angular 4.為此您需要克隆任何Angular 2項目並使用package.json中的Angular 4 Dependency更新Angular 2依賴項,如下所示:

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }
 

這些是Angular 4的主要依賴項。現在你可以npm install然後npm開始運行應用程序。作為參考我的package.json。

來自github項目的角度設置

在開始此步驟之前,請確保已在計算機中安裝了git。打開終端並使用以下命令克隆angular4-boilerplate:

git@github.com:CypherTree/angular4-boilerplate.git
 

然後安裝所有依賴項並運行它。

npm install

npm start
 

你完成了Angular 4的設置。所有步驟都非常簡單,因此您可以選擇其中任何一個。

angular4-boilerplate的目錄結構

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 
 

對目錄結構的基本了解:

所有代碼都駐留在src文件夾中。

mocks文件夾用於測試目的中使用的模擬數據。

model文件夾包含組件中使用的類和接口。

modules文件夾包含組件列表,如app,login,widget等。所有組件都包含typescript,html和css文件。 index.ts用於導出所有類。

services文件夾包含應用程序中使用的服務列表。我已經分開了休息服務和不同的組件服務。在休息服務中包含不同的http方法。登錄服務用作登錄組件和休息服務之間的中介。

app.routing.ts文件描述了應用程序的所有可能路由。

app.module.ts將app模塊描述為根組件。

bootstrap.ts將運行整個應用程序。

webpack文件夾包含webpack配置文件。

package.json文件適用於所有依賴項列表。

業力包含單元測試的業力配置。

node_modules包含包捆綁包的列表。

讓我們從Login組件開始。在login.component.html中

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>
 

在login.component.ts中

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}
 

我們需要將此組件導出到index.ts中。

export * from './login/login.component';
 

我們需要在app.routes.ts中設置登錄路由

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];
 

在根組件app.module.ts文件中,您只需要導入該組件。

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }
 

然後在那個npm install和npm start之後。幹得好!您可以在本地主機中查看登錄屏幕。如有任何困難,您可以參考angular4-boilerplate。

基本上我可以使用Angular 4應用程序感覺更少的構建包和更快的響應,雖然我在編碼中發現與Angular 2完全相似。

Stats

5071 Contributors: 38
Friday, August 4, 2017
許可下: CC-BY-SA

不隸屬於 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下載電子書