让我们开始 Angular 4

Created: November-22, 2018

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 完全相似。