angular快速入门

In today's’ web development world, Angular is known as one of the most important and used frameworks. Recently, Angular 6.0 version has been launched. So, in this document, we will discuss how to develop the first component or program in Angular 6.0.

在当今的Web开发世界中，Angular被认为是最重要和最常用的框架之一。 最近，Angular 6.0版本已经发布。 因此，在本文档中，我们将讨论如何在Angular 6.0中开发第一个组件或程序。

什么是角度？ (What Is Angular?)

The Angular framework is an open source JavaScript-based framework. It was actually developed by Misko Havery and Adam Abrons in 2009. This framework supports the JavaScript-based MVC (MVVM) framework. As per the Google, the definition of the angular is a below - 

Angular框架是一个基于JavaScript的开源框架。 它实际上是由Misko Havery和Adam Abrons在2009年开发的。此框架支持基于JavaScript的MVC（MVVM）框架。 根据Google的说法，角度的定义如下：

“AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application components clearly and succinctly.”

“ AngularJS是动态Web应用程序的结构框架。 它使您可以将HTML用作模板语言，并可以扩展HTML的语法以清晰，简洁地表达应用程序组件。”

The most common advantages for which developers like to use Angular from their projects are –

开发人员喜欢从其项目中使用Angular的最常见优势是–

• It supports MVC Concept
  它支持MVC概念
• It always supports SPA Application (Single Page Applications)
  它始终支持SPA应用程序（单页应用程序）
• It Supports Client Side Templating
  它支持客户端模板
• In this framework, we can perform unit testing very easily.
  在此框架中，我们可以非常轻松地执行单元测试。

Angular的先决条件 (Prerequisite for Angular)

To start development in Angular 6.0, we need to follow the below perquisites:

要开始在Angular 6.0中进行开发，我们需要遵循以下条件：

• Install Node.js.
  安装Node.js。
• Install TypeScript 2.7 or above.
  安装TypeScript 2.7或更高版本。
• Microsoft Visual Studio or Visual Code for writing code.
  Microsoft Visual Studio或Visual Code，用于编写代码。
• Install lite-server (in case you are using Visual Code) to host and run the application
  安装lite-server（如果使用的是Visual Code）来托管和运行该应用程序

So, before starting with Angular 6.0, we first need to know how to install the TypeScript tool. To install TypeScript, we first need to install Node.js. The latest version of Node.js can be downloaded from the below URL:

因此，在从Angular 6.0开始之前，我们首先需要知道如何安装TypeScript工具。 要安装TypeScript，我们首先需要安装Node.js。 可以从以下URL下载最新版本的Node.js：

https://nodejs.org/en/

https://nodejs.org/en/

To install TypeScript, we can download the latest version of TypeScript by either using the command line argument in Node.js or using Visual Studio to directly download it from the NuGet Package Manager.

要安装TypeScript，我们可以使用Node.js中的命令行参数或使用Visual Studio直接从NuGet软件包管理器中下载它来下载最新版本的TypeScript。

Command line prompt to install TypeScript:

命令行提示安装TypeScript：

npm install -g typescript 

Command line prompt for install Lite-Server:

安装Lite-Server的命令行提示符：

npm install -g lite-server 

项目配置 (Project Configuration)

Now, we will discuss how to set up the environment for an Angular 6 project. In this post, we will develop our first program in Angular 6. Before getting started, let’s discuss the project configuration files which are required in Angular. An Angular project always contains 3 major configuration files. They are:

现在，我们将讨论如何为Angular 6项目设置环境。 在这篇文章中，我们将在Angular 6中开发我们的第一个程序。在开始之前，让我们讨论Angular中所需的项目配置文件。 Angular项目始终包含3个主要的配置文件。 他们是：

• tsconfig.json – This file contains the compiler options which are required to run the projects.
  tsconfig.json –该文件包含运行项目所需的编译器选项。
• package.json – It is basically a JSON file which contains all the necessary information regarding different packages which are required to run or execute the Angular application.
  package.json –基本上是一个JSON文件，其中包含有关运行或执行Angular应用程序所需的不同软件包的所有必要信息。
• system.config.js – This file act as a configuration file. This file is used to load Node modules which are compiled in TypeScript at the time of execution.
  system.config.js –此文件充当配置文件。 该文件用于加载执行时在TypeScript中编译的Node模块。

什么是组件？ (What Is a Component?)

The Angular framework is basically a component-based framework (from Angular 2.0 or above). SO, we first need to understand what components are and how they can be defined. In Angular, a component is just like a class in other OOP-based languages. This class is basically defined to display any element on the application screen. So, as per our requirements, we can create, update, or delete any existing component in the application. In TypeScript, we can define the component class with the help of the @Compoent() decorator.

Angular框架基本上是基于组件的框架（来自Angular 2.0或更高版本）。 因此，我们首先需要了解什么是组件以及如何定义它们。 在Angular中，组件就像其他基于OOP的语言中的类一样。 此类的基本定义是在应用程序屏幕上显示任何元素。 因此，根据我们的要求，我们可以创建，更新或删除应用程序中的任何现有组件。 在TypeScript中，我们可以在@Compoent()装饰器的帮助下定义组件类。

组件配置 (Component Configuration)

The @Component decorator actually used to decorate a TypeScript class as a component object. It is a function which takes different types of parameters. In the @component decorator, we can assign different values to properties to fix the behavior of the components. The most used properties are given below:

@Component装饰器实际上用于将TypeScript类装饰为组件对象。 这是一个采用不同类型参数的函数。 在@component装饰器中，我们可以为属性分配不同的值，以修复组件的行为。 最常用的属性如下：

• selector: A string value which represents the component on the browser at execution time.
  选择器 ：一个字符串值，表示执行时浏览器上的组件。
• template: The value of this property contains the basic HTML code which we will need to display in the browser. It acts as an inline template.
  template ：此属性的值包含我们将需要在浏览器中显示的基本HTML代码。 它充当内联模板。
• templateUrl: Another way of defining the HTML tags in the component. We can create HTML files with proper HTML tags and then we need to provide that file name with the relative path in this attribute. So that at execution time the Angular loader will display the HTML code in the browser for the application. Some people call this process 'external templating.'
  templateUrl ：在组件中定义HTML标签的另一种方法。 我们可以使用适当HTML标签创建HTML文件，然后需要在该属性中为文件名提供相对路径。 因此，在执行时，Angular加载器将在应用程序的浏览器中显示HTML代码。 有人将此过程称为“外部模板”。
• moduleId: It is used to resolve the related path of the template URL or style URL for the component objects.
  moduleId ：用于解析组件对象的模板URL或样式URL的相关路径。
• styles or stylesUrls: It is used to provide the style of the components. We can define inline CSS using styles attribute or provide CSS files with related URLs in the styleUrls attribute.
  styles或stylesUrls ：用于提供组件的样式。 我们可以使用styles属性定义内联CSS，或者在styleUrls属性中为CSS文件提供相关的URL。
• providers: This attribute is basically used for dependency injection purposes. We can inject services, packages, components, etc. using this attribute.
  provider ：此属性基本上用于依赖项注入目的。 我们可以使用此属性注入服务，程序包，组件等。

创建一个角度模块 (Create an Angular Module)

As we already discussed, everything in Angular 6 belongs to an Angular Module. So, for developing the root component, we first need to declare our Angular module. The Angular module can be defined by creating a TypeScript class decorated with the NgModule decorator. In order to use it, we first need to import it as follows:

正如我们已经讨论的那样，Angular 6中的所有内容都属于Angular模块。 因此，为了开发根组件，我们首先需要声明我们的Angular模块。 可以通过创建用NgModule装饰器装饰的TypeScript类来定义Angular模块。 为了使用它，我们首先需要如下导入：

import { NgModule } from '@angular/core';
@NgModule()
export class SampleModule { } 

创建角度组件 (Create Angular Component)

Finally, we reach a position where we need to create our first component using Angular 6. It can be done by creating a class decorated with @Component decorator which defined within the “@angular/core” library. Below the sample code for the angular component – 

最后，我们到达一个需要使用Angular 6创建第一个组件的位置。这可以通过创建一个用@Component装饰器装饰的类来完成，该类在“ @ angular / core”库中定义。 在角度代码的示例代码下方–

import { Component } from "@angular/core";
@Component({
selector: "welcome-prog",
template: `<h1>First Program in Angular. Welcome to Angular World</h1>
<br>
<a  href="../index.html" style="color:red;">
<h3>Return to Home</h3>
</a>
`
})
export class WelcomeComponent {
constructor() {
}
} 

将组件添加到模块 (Add Component to Module)

Now, the next step is to add the component within the angular module. It can be done using “declarations” option within “NgModule” decorator. For adding the component, we need to import the component within the module by using import keyword.

现在，下一步是在角度模块中添加组件。 可以使用“ NgModule”装饰器中的“声明”选项来完成。 要添加组件，我们需要使用import关键字将组件导入模块中。

import { NgModule, NO_ERRORS_SCHEMA, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from "@angular/forms";
import { HttpModule } from '@angular/http'; 
import { WelcomeComponent } from './day1/app.component.welcome';
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule],
declarations: [        WelcomeComponent    ],
bootstrap: [WelcomeComponent],
schemas: [NO_ERRORS_SCHEMA]
})
export class DemoModule { } 

引导模块 (Bootstrap the Module)

As we already discussed that a single angular application can contain more than one angular modules. But out of the all module, only one module can be bootstrapped at the beginning. In Angular 6 this bootstrapping process needs to be done manually with the help of “platformBrowserDynamic” function which is defined within the “@angular/platform-browser-dynamic” library. 

正如我们已经讨论的那样，单个角度应用程序可以包含多个角度模块。 但是在所有模块中，一开始只能引导一个模块。 在Angular 6中，此引导过程需要借助“ @ angular / platform-b​​rowser-dynamic”库中定义的“ platformBrowserDynamic”函数手动完成。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DemoModule } from './app.module.demo';
platformBrowserDynamic().bootstrapModule(DemoModule); 

Code of Index.html

Index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Angular 6 - Console</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link href="../resource/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../resource/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="../resource/css/jquery-ui.css" type="text/css">
<link href="../resource/css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="../resource/img/favicon/favicon.ico">
<link href="../resource/css/app.css" rel="stylesheet"  type="text/css"/>
</head>
<body>
<div class="content">
<home></home>
</div>       
<script>
sessionStorage.setItem("dayno", JSON.stringify(1));
</script> 
<script src="../node_modules/core-js/client/shim.min.js" type="text/javascript"></script>
<script src="../node_modules/zone.js/dist/zone.js" type="text/javascript"></script>
<script src="../node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script>
System.import('../main.js').catch(function (err) { console.error(err); });
</script>
</body>
</html> 

Now after executing the above code, the output will be as below - 

现在执行完上面的代码后，输出将如下所示-

if anyone wants to access the complete source code of this article, they can be downloaded from the below URLs - 

如果有人想访问本文的完整源代码，则可以从下面的URL下载它们-

Angular Example (Day 1)

角度示例（第1天）

Hope you found this information helpful.

希望对您有所帮助。

翻译自: https://www.experts-exchange.com/articles/32599/Jump-Start-in-Angular-6.html

angular快速入门