讓我們開始 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 完全相似。