开发手册 欢迎您！
软件开发者资料库

Angular 4 - 项目设置

Angular 4项目设置 - 从简单和简单的步骤学习Angular 4，从基本到高级概念，包括概述，环境设置，项目设置，组件，模块，数据绑定，事件绑定，模板，指令，管道，路由，服务， Http服务，表单，动画，材料，CLI，示例。

AngularJS基于模型视图控制器，而Angular 2基于组件结构. Angular 4与Angular2的结构相同，但与Angular2相比更快.

Angular4使用TypeScript 2.2版本，而Angular 2使用TypeScript版本1.8.这给性能带来了很大的不同.

为了安装Angular 4，Angular团队提出了Angular CLI，简化了安装.您需要运行一些命令才能安装Angular 4.

转到此站点 https://cli.angular.io 安装Angular CLI.

Angular CLI

要开始安装，我们首先需要确保我们安装了最新版本的nodejs和npm. npm包与nodejs一起安装.

转到nodejs站点 https://nodejs.org/en/.

Download NodeJs

建议用户使用最新版本的Nodejs v6.11.0.已经拥有nodejs大于4的用户可以跳过上述过程.安装nodejs后，您可以使用命令node -v 检查命令行中的节点版本，如下所示 :

命令提示符显示v6.11.0

命令提示符显示v6.11.0.一旦安装了nodejs，npm也将随之安装.

要检查npm的版本，请在终端中输入command npm -v .它将显示npm的版本，如下所示.

npm-v-3.10 .10

npm的版本是3.10.10.现在我们安装了nodejs和npm，让我们运行angular cli命令来安装Angular 4.您将在网页上看到以下命令 :

npm install -g @angular/cli //command to install angular 4ng new Angular 4-app // name of the projectcd my-dream-appng serve

让我们从命令行中的第一个命令开始，看看它是如何工作的.

首先，我们将创建一个空目录，其中，我们将运行Angular CLI命令.

Angular CLI安装Step1

输入上述命令安装Angular 4.安装过程将开始，需要几分钟才能完成.

Angular CLI安装步骤2

上面的安装命令是完成后，以下命令提示符出现和减去;

Angular CLI安装步骤3

我们创建了一个空文件夹 ProjectA4 并安装了Angular CLI命令.我们还使用 -g 全局安装Angular CLI.现在，您可以在任何目录或文件夹中创建Angular 4项目，而不必安装Angular CLI项目，因为它全局安装在您的系统上，您可以从任何目录中使用它.

现在让我们检查是否安装了Angular CLI.要检查安装，请在终端中运行以下命令 :

 ng -v


Angular CLI安装Step4

我们得到@ angular/cli版本，目前为1.2.0.运行的节点版本是6.11.0以及操作系统详细信息.上面的细节告诉我们已成功安装了角度cli，现在我们已经准备好开始我们的项目.

我们现在已经安装了Angular 4.现在让我们在Angular中创建我们的第一个项目4.要在Angular 4中创建项目，我们将使用以下命令 :

 ng new projectname

我们将项目命名为 ng new Angular 4-app .

现在让我们在命令中运行上面的命令line.

Angular CLI安装Step5

项目 Angular 4-app 已成功创建.它安装了我们项目在Angular 4中运行所需的所有必需软件包.现在让我们切换到创建的项目，该项目位于 Angular 4-app 目录中.在命令行中更改目录 -   cd Angular 4-app .

我们将使用Visual Studio Code IDE处理Angular 4;您可以使用任何IDE，即Atom，WebStorm等.

要下载Visual Studio代码，请转到 https://code.visualstudio.com/并单击下载Windows .

Visual Studio代码

单击下载Windows 以安装IDE并运行安装程序以开始使用IDE.

编辑器如下所示 :

Angular CLI Editor

我们还没有开始任何项目.现在让我们使用angular-cli创建我们创建的项目.

Angular 4-app Project

我们将考虑 Angular 4-app 项目.让我们打开Angular 4应用程序，看看文件夹结构如何.

文件夹结构

现在我们有了项目的文件结构，让我们用以下命令编译我们的项目 :

 ng serve

ng serve 命令构建应用程序并启动Web服务器.

ng serve Command


ng serve命令启动服务器

Web服务器在端口4200上启动.键入url http://localhost:4200/在浏览器中查看输出.编译项目后，您将收到以下输出 :

服务器在端口4200上启动

在浏览器中运行 http://localhost:4200/后，您将被定向到以下屏幕 :

Angular App

现在让我们进行一些更改以显示以下内容 :

"欢迎使用Angular 4项目"

Angular 4 Project

我们对文件进行了更改 -   app.component.html 和 app.component.ts .我们将在随后的章节中讨论更多相关内容.

让我们完成项目设置.如果你看到我们使用了端口4200，它是angular-cli在编译时使用的默认端口.您可以使用以下命令更改端口 :

 ng serve --host 0.0.0.0 -port 4205

Angular 4 app文件夹具有以下文件夹结构 :

  • e2e : 端到端测试文件夹.主要是e2e用于集成测试，有助于确保应用程序正常运行.

  • node_modules : 安装的npm包是node_modules.您可以打开文件夹并查看可用的软件包.

  • src : 这个文件夹是我们使用Angular 4处理项目的地方.

Angular 4 app文件夹具有以下文件结构 :

  • .angular-cli.json : 它基本上包含项目名称，cli版本等.

  • .editorconfig : 这是编辑器的配置文件.

  • .gitignore : 应将.gitignore文件提交到存储库中，以便与克隆存储库的任何其他用户共享忽略规则.

  • karma. conf.js : 这用于通过量角器进行单元测试.项目所需的所有信息都在karma.conf.js文件中提供.

  • package.json :  package.json文件告诉你在运行npm install时将哪些库安装到node_modules中.

目前，如果你打开文件在编辑器中，您将添加以下模块.

 "@ angular/animations":"^ 4.0.0"，"@ angular/common":"^ 4.0.0"，"@ angular/compiler":"^ 4.0.0"，"@ angular/core":"^ 4.0. 0"，"@ angular/forms":"^ 4.0.0"，"@ angular/http":"^ 4.0.0"，"@ angular/platform-browser ":"^ 4.0.0"，"@ angular/platform-browser-dynamic":"^ 4.0.0"，"@ angular/router":"^ 4.0.0"，

如果您需要添加更多库，可以在这里添加这些库并运行npm install命令.

  • protractor.conf.js : 这是应用程序所需的测试配置.

  • tsconfig.json : 这基本上包含编译期间所需的编译器选项.

  • tslint.json : 这是配置文件，其中包含编译时要考虑的规则.

src文件夹是主文件夹，内部具有不同的文件结构.

app

它包含下面描述的文件.这些文件默认由angular-cli安装.

  • app.module.ts &minus ;如果打开文件，您将看到代码引用了导入的不同库. Angular-cli使用这些默认库进行导入 - 角度/核心，平台浏览器.名称本身解释了库的用法.

它们被导入并保存到变量中，例如声明，导入，提供者和 bootstrap .

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';@NgModule({   declarations: [      AppComponent   ],   imports: [      BrowserModule   ],   providers: [],   bootstrap: [AppComponent]})export class AppModule { }

声明 : 在声明中，存储对组件的引用. Appcomponent是每当启动新项目时创建的默认组件.我们将学习如何在不同的部分创建新组件.

import : 这将导入模块，如上所示.目前，BrowserModule是从@ angular/platform-browser导入的导入的一部分.

提供者 : 这将参考创建的服务.该服务将在后续章节中讨论.

bootstrap : 这引用了创建的默认组件，即AppComponent.

  • app.component.css : 你可以在这里写你的CSS结构.现在，我们已经为div添加了背景颜色，如下所示.

.divdetails{   background-color: #ccc;}

  • app.component.html &减去; html代码将在此文件中提供.

         
         Welcome to {{title}}!      
      Tour of Heroes                     
  •          
                               CLI Documentation                     
          
    •       
  •          
                Angular blog         
          
    •    

    这是项目创建时当前可用的默认html代码.

    • app.component.spec.ts : 这些是自动生成的文件，其中包含源组件的单元测试.

    • app.component.ts : 该组件的类在此处定义.您可以在.ts文件中处理html结构.处理将包括诸如连接到数据库，与其他组件交互，路由，服务等活动.

    结构文件如下&&;

    import { Component } from '@angular/core';@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})export class AppComponent {   title = 'app';}

    资产

    您可以将图像，js文件保存在此文件夹中.

    环境

    此文件夹包含生产环境或开发环境的详细信息.该文件夹包含两个文件.

    • environment.prod.ts

    • environment.ts

    这两个文件都有关于是否应在生产环境或开发环境中编译最终文件的详细信息.

    Angular 4 app文件夹的附加文件结构包括以下 :

    favicon.ico

    这是一个通常在根目录中找到的文件网站目录.

    index.html

    这是浏览器中显示的文件.

                   HTTP Search Param                                                      

    正文有< app-root> .这是在 app.component.ts 文件中使用的选择器，它将显示app.component.html文件中的详细信息.

    main.ts

    main.ts是我们开始项目开发的文件.首先导入我们需要的基本模块.现在，如果您看到角度/核心，角度/平台浏览器动态，则在angular-cli安装和项目设置期间默认导入app.module和环境.

    import { enableProdMode } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';import { environment } from './environments/environment';if (environment.production) {   enableProdMode();}platformBrowserDynamic().bootstrapModule(AppModule);

    platformBrowserDynamic().bootstrapModule(AppModule)具有父模块引用 AppModule .因此，当它在浏览器中执行时，调用的文件是index.html. Index.html内部引用调用父模块的main.ts，即当以下代码执行&减去时的AppModule;

    platformBrowserDynamic().bootstrapModule(AppModule);

    当调用AppModule时，它会调用app.module.ts，它会根据boostrap调用AppComponent，如下所示 :

     bootstrap:[AppComponent]

    在app.component.ts中，有一个在index.html文件中使用的selector:app-root .这将显示app.component.html中的内容.

    以下内容将显示在浏览器中 :

    App Module

    polyfill.ts

    这主要用于向后兼容.

    styles.css

    这是项目所需的样式文件.

    test.ts

    这里，将处理测试项目的单元测试用例.

    tsconfig.app.json

    这是用的在编译期间，它具有需要用于运行应用程序的配置详细信息.

    tsconfig.spec.json

    这有助于维护详细信息用于测试.

    typings.d.ts

    它用于管理TypeScript定义.

    最终的文件结构如下所示;

    最终文件结构