65.9K
CodeProject 正在变化。 阅读更多。
Home

Angular 5 基本演示项目概述

Sibeesh Passion
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2017年11月15日

CPOL

4分钟阅读

viewsIcon

16767

Angular 5 基础演示项目概述

目录

引言

这篇文章是 Angular 5 系列的延续，你可以在这里找到本系列的第一部分 - Angular 5 的新内容以及如何设置我们的第一个 Angular 5 应用程序。因此，如果你还没有浏览过第一部分，我强烈建议你这样做。在第一部分中，我们了解了 Angular 5 的更新以及如何在 Angular 5 中设置我们的第一个应用程序。

在本文中，我们将讨论一些文件和应用程序概述。我们还将讨论一些关键点，如组件、声明、模块、提供者等。因此，在本文结束时，你将对 Angular 项目结构和项目真正重要的内容有一些基本的了解。我希望你会喜欢这篇文章。

背景

虽然 Angular 5 的项目架构与之前的版本完全相同，但我们将解释一些关键元素，以便初学者可以跟随本系列。如果你是经验丰富的专业人士，希望你不会介意。感谢你的理解。

理解 Angular 应用程序

Angular 项目具有清晰的架构，它包含如下所示的文件夹结构

Angular_App_Folder_Structure

Angular App 文件夹结构

我们将开始在 src/app 文件夹中开发我们的应用程序，这是我们的应用程序根文件夹。现在，让我们继续看看我们在现有文件中的内容。让我们打开文件 app.component.ts.

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

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

在 Angular 中，我们为每个选定的功能创建组件，例如一个用于登录的组件，一个用于注册的组件，一个用于导航的组件等，以便每个组件都可以单独维护。在每个组件中，我们有三个部分

  1. 导入部分
  2. 装饰器
  3. 导出部分

导入部分帮助我们导入框架中可用的一些现有功能，就像我们在上面的代码片段中包含来自 Angular/core 的组件一样。

装饰器是我们在其中装饰组件的地方，提供选择器（每个组件都是唯一的），设置 UI 样式，提供指向特定 HTML 文件的模板 URL，我们在其中自定义组件。我们也可以将我们的模板包含在我们的装饰器本身中，例如模板：’here's your custom HTML’。

导出部分包括特定于该组件的自定义 TypeScript 代码。比方说它是一个类，它拥有自己的功能。

现在让我们将指针移到 app.module.ts， 这是我们注册所有模块、组件、提供者等的地方。我们可以将其视为基类。像组件一样，它也有一个导入和导出部分。它还有一个 @NgModule 部分，其中包含我们的声明（组件）、导入（模块）、提供者（服务）。

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 { }

我不会解释 app.component.css, app.component.html, app.component.spec.ts，因为你可以通过查看其中的代码来了解它是什么。所以我把它留给你。

如果你看到项目文件夹，你可以看到一个名为 Environment 的文件夹。顾名思义，它帮助我们设置环境的配置，例如开发和生产等。

Index.html 是我们调用 app-root 的主页面，还记得我们将 app.component 的选择器设置为 app-root 吗？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyAngular5App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

请确保你在你的 index.html 文件中提供了 <base href=”/”>，否则你将在你的 Angular 应用程序中遇到错误。

tsconfig.app.json 文件是我们可以在其中设置项目配置的地方，例如设置模块版本、编译器选项等。你可以看到如下所示的示例文件

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

如果你使用 Angular CLI 创建了你的 Angular 应用程序，你将在你的项目中看到一个名为 .angular-cli.json 的文件。这是所有自定义项目设置所在的文件。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-angular5-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

最后但并非最不重要的是，package.json 是你提及 NPM 包的文件，并且当你运行 npm install 命令时，该命令会查看此文件。

{
  "name": "my-angular5-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

一旦包管理器完成了 install 命令的运行，所有提到的包将被添加到文件夹 node_modules 中。

在我们的下一篇文章中，我们将开始在我们的 Angular 应用程序中开发一些组件。

结论

非常感谢您的阅读！ 我是否遗漏了您认为需要的东西？您是否觉得这篇文章有用？我希望您喜欢这篇文章。请分享您宝贵的建议和反馈。

现在轮到你了。你有什么想法？

没有评论的博客就不是一个博客，但请尽量保持主题。如果你有一个与这篇文章无关的问题，你最好把它发布在 C# Corner、Code Project、Stack Overflow、ASP.NET 论坛上，而不是在这里评论。请在下面的评论部分发布 你的问题，如果可以的话，我一定会尽力帮助你。

© . All rights reserved.