angular2创建应用_帮助您了解和创建Angular 6应用程序的快速指南

angular2创建应用

This post is divided into two parts:

这篇文章分为两个部分：

The first part demonstrates how to create a simple Angular 6 App using Angular CLI and explains the project structure.

第一部分演示了如何使用Angular CLI创建简单的Angular 6 App，并说明了项目结构。

The second part explains existing code that I have posted in GitHub. This code demonstrates the use of components, services, HTTP client, and communication between components.

第二部分介绍了我在GitHub上发布的现有代码。 此代码演示了组件，服务，HTTP客户端以及组件之间的通信的用法。

第1部分 (Part 1)

如果尚未安装Node.js，请安装 (Install Node.js if not already present)

You need Node.js, since the libraries required for Angular are downloaded using node package manager (npm) . Refer to https://nodejs.org/en/ to install Node.js.

您需要Node.js，因为Angular所需的库是使用节点包管理器(npm)下载的。 请参阅https://nodejs.org/en/来安装Node.js。

安装Angular CLI (Install Angular CLI)

Angular CLI is a command line interface for Angular, and is very useful in quickly creating an Angular 6 project template. Install the Angular CLI npm package globally using the following command:

Angular CLI是Angular的命令行界面，在快速创建Angular 6项目模板中非常有用。 使用以下命令全局安装Angular CLI npm软件包：

npm install -g @angular/cli

创建项目 (Create the Project)

Angular CLI helps in creating a project very easily. In order to create the project, use the following command.

Angular CLI帮助您非常轻松地创建项目。 为了创建项目，请使用以下命令。

ng new simple-angular6-app

simple-angular6-app is the name of the project. Now you will notice that you see a folder named simple-angular6-app. The folder is the project which has been created. In order to test if everything has been set properly, go into the project folder and run the application using the following commands:

simple-angular6-app是项目的名称。 现在，您会看到一个名为simple-angular6-app的文件夹。 该文件夹是已创建的项目。 为了测试所有设置是否正确，请进入项目文件夹并使用以下命令运行应用程序：

cd simple-angular6-app
npm start

Go to your browser and go the following URL: localhost:4200. You should be able to see that your application is running.

转到浏览器，然后访问以下URL： localhost：4200。 您应该能够看到您的应用程序正在运行。

The application would look like this:

该应用程序将如下所示：

基本文件夹结构介绍 (Basic Folder Structure Explained)

When you create the project, you’ll notice that it creates a bunch of files. Here I will list out some of the important files and folders that you should be aware of:

创建项目时，您会注意到它创建了许多文件。 在这里，我将列出您应该注意的一些重要文件和文件夹：

1. package.json: This file has the list of node dependencies which are needed.

   package.json：此文件包含所需的节点依赖项列表。

2. src/styles.css: This file has the global CSS available throughout the application.

   src / styles.css ：此文件具有整个应用程序中可用的全局CSS。

3. src/main.ts: This is the main file which starts the Angular Application (AppModule is bootstrapped here as seen in the code ). Here the Extension .ts stands for TypeScript.

   src / main.ts ：这是启动Angular Application的主文件(如代码所示，AppModule在此处被引导)。 在这里，扩展名.ts代表TypeScript。

4. src/index.html: This the first file which executes alongside main.ts when the page loads.

   src / index.html ：这是页面加载时与main.ts一起执行的第一个文件。

5. src/app/app.module.ts: This is the file where all the components, providers, and modules are defined. Without defining them here, they can’t be used elsewhere in the code.

   src / app / app.module.ts ：这是定义所有组件，提供程序和模块的文件。 如果不在此处定义它们，则不能在代码的其他地方使用它们。

6. src/app/app.component.html: This is the main component of an angular app, and all other components are usually present within this component. src/app/app.component.ts is the logic for this component, and src/app/app.component.css is the CSS for this component. This component itself does not do any important logic, but acts as a container for other components.

   src / app / app.component.html：这是角度应用程序的主要组件，所有其他组件通常都存在于该组件中。 src / app / app.component.ts是此组件的逻辑，而src / app / app.component.css是此组件CSS。 该组件本身不执行任何重要的逻辑，但充当其他组件的容器。

7. dist: This folder is where the built files are present. TypeScript is basically converted to JavaScript and the resulting files are stored here after bundling and minification. (This Folder appears only if the application is built. A simple “npm start” will not create this folder. ) Since web browsers understand only JavaScript (at least for now), it is therefore necessary to convert TypeScript to JavaScript before deploying the code. To see this folder, you can type the following in the command prompt:

   dist ：该文件夹是生成文件的位置。 TypeScript基本上会转换为JavaScript，并且打包和缩小后将生成的文件存储在此处。 (仅当构建应用程序时此文件夹才会出现。简单的“ npm start”将不会创建此文件夹。)由于Web浏览器仅了解JavaScript(至少目前如此)，因此有必要在部署代码之前将TypeScript转换为JavaScript。 。 要查看此文件夹，可以在命令提示符下键入以下内容：

npm run build

There are several other files as well, but knowing these basic ones is good for a start

也有其他几个文件，但是了解这些基本文件对于开始非常有用

打字稿 (TypeScript)

Angular 6 uses TypeScript for implementing the logic. Those of you who have worked in Java will find TypeScript very easy. TypeScript is a language built on top of JavaScript but which is type safe, and TypeScript in turn compiles to JavaScript

Angular 6使用TypeScript来实现逻辑。 那些使用Java的人会发现TypeScript非常容易。 TypeScript是一种基于JavaScript的语言，但是具有类型安全性，TypeScript可以编译为JavaScript

创建组件和服务 (Creating Components and Services)

1. Component: A component in Angular does a specific function. An Angular application is built by using various components. Angular CLI can be used to create components easily. The syntax is ng generate component [name]. Use the following command to create a component called “customers”.

   组件 ：Angular中的组件具有特定功能。 通过使用各种组件来构建Angular应用程序。 Angular CLI可用于轻松创建组件。 语法是ng generate component [name]。 使用以下命令创建一个名为“客户”的组件。

ng generate component customers

2. The above command creates a folder called customers inside src/app. The component created has:

2.上面的命令在src / app中创建一个名为customers的文件夹。 创建的组件具有：

• a customers.component.html file to decide the template (how the component UI should look )

  一个customer.component.html文件来确定模板(组件UI的外观)

• a customers.component.ts file which is where the logic is present

  出现逻辑的customer.component.ts文件

• a customers.component.css file which has CSS content

  具有CSS内容的customer.component.css文件

• and a customers.component.spec.ts file which is used for unit testing (the spec wont be explained in this post).

  以及用于单元测试的customer.component.spec.ts文件(该规范将不在本文中解释)。

3. Service: A service basically provides functionality which can be used by any component. The service can be shared across all components, or it can be restricted to a particular component (any reusable logic can be put in a service). Angular CLI can be used to create services as well. The syntax is ng generate service [name]. Use the following command to create a service called “data”:

3. 服务 ：服务基本上提供可以被任何组件使用的功能。 可以在所有组件之间共享服务，也可以将其限制为特定组件(可以在服务中放置任何可重用的逻辑)。 Angular CLI也可用于创建服务。 语法为ng generate service [名称]。 使用以下命令创建名为“数据”的服务：

ng generate service data

4. The service is created inside src/app. The service created has a data.service.ts file which has the logic and a data.service.spec.ts file for unit testing.

4.该服务在src / app中创建。 创建的服务具有一个data.service.ts文件，该文件具有用于单元测试的逻辑和一个data.service.spec.ts文件。

恭喜 😄 (Congrats 😄)

You have successfully created your first Angular 6 app and have also learned how to create components and services. Also now you have learned the basic folder structure of an Angular 6 project. The next part will explain the existing GitHub code to demonstrate how to use components, services, HTTP client, and communication between components.

您已经成功创建了第一个Angular 6应用程序，并且还学习了如何创建组件和服务。 同样，现在您已经了解了Angular 6项目的基本文件夹结构。 下一部分将解释现有的GitHub代码，以演示如何使用组件，服务，HTTP客户端以及组件之间的通信。

第2部分 (Part 2)

码 (Code)

This code is being explained here, so clone the repo onto your local machine. The repo has instructions on how to clone it and set it up.

此处说明了此代码 ，因此请将存储库克隆到本地计算机上。 存储库包含有关如何克隆和设置它的说明。

申请网址 (Application URL)

To see how the final application looks, you can click on this URL. This will give you a good idea as to what the application is trying to do.

要查看最终应用程序的外观，可以单击此URL 。 这将使您对应用程序正在尝试执行的操作有个好主意。

The application would look like this on a mobile screen:

该应用程序在移动屏幕上看起来像这样：

该应用程序做什么？ (What Does This Application Do?)

The goal of the application is to display a list of customers in the form of cards. When the customer data is clicked, then the application switches to a new page which then displays the details of the selected customer.

该应用程序的目标是以卡的形式显示客户列表。 单击客户数据后，应用程序将切换到新页面，然后显示所选客户的详细信息。

申请结构说明 (Application Structure Explained)

The Components Created are:

创建的组件是：

1. CustomersComponent: This corresponds to the src/app/customers folder. This component is to display the list of customers. The customers.component.ts file has a function called ngOnInit(). This function is called whenever the component is loaded. So this function can be used to load the data for the component. That data is loaded by calling the getCustomerList() function. getCustomerList() in turn calls the data service to get the data needed.

   CustomersComponent ：这对应于src / app / customers文件夹。 此组件用于显示客户列表。 customer.component.ts 文件具有一个名为ngOnInit()的函数。 每当加载组件时，都会调用此函数。 因此，该功能可用于加载组件的数据。 通过调用getCustomerList()函数加载该数据。 getCustomerList()依次调用数据服务以获取所需的数据。

2. CustomerdetailsComponent: This corresponds to the src/app/customerdetails folder. This component displays the details for a single selected customer. The customerdetails.component.ts file has the ngOnInit() function which can be used to load the data. To load data, the getCustomerDetails() function is called. This function makes a call to the data service to get the data needed. But here you will also notice the use of routeParams.id which is sent to the service. routeParams is used to get parameters from the application URL, and the id parameter is used to find out for which customer the details need to be loaded. This will become more clear when I get to the routing part.

   CustomerdetailsComponent ：这对应于src / app / customerdetails文件夹。 该组件显示单个选定客户的详细信息。 customerdetails.component.ts文件具有ngOnInit()函数，可用于加载数据。 要加载数据，将调用getCustomerDetails()函数。 此函数调用数据服务以获取所需的数据。 但是在这里您还将注意到发送到服务的routeParams.id的使用。 routeParams用于从应用程序URL获取参数，而id参数用于查找需要为哪些客户加载详细信息。 当我到达路由部分时，这一点将变得更加清楚。

3. DisplayComponent: This corresponds to the src/app/display folder. This component displays the customer name clicked in the CustomersComponent. (The whole point for this component is to demonstrate parent to child component communication.) This is a child component of CustomersComponent. In customers.component.html you will notice that <app-display [customer] = selectedCustomer> </app-display>. This makes DisplayComponent a child component of CustomersComponent. Data is passed from CustomerComponent to DisplayComponent using the [customer] attribute.

   DisplayComponent ：对应于src / app / display文件夹。 此组件显示在“客户组件”中单击的客户名称。 (此组件的全部要点是演示父组件与子组件的通信。)这是CustomerComponent的子组件。 在customers.component.html中 您会注意到<app-display [customer] = selectedCustomer> </ app-display> 。 这使DisplayComponent成为CustomersComponent的子组件。 使用[customer]属性将数据从CustomerComponent传递到DisplayComponent 。

样本数据 (The Sample Data)

The sample data is present in the src/assets/samplejson folder.

样本数据位于src / assets / samplejson文件夹中。

The services created are:

创建的服务是：

1. DataService: This corresponds to src/app/data.service.ts. All the JSON used in the application is stored in the src/assets/samplejson folder. DataService helps in getting the JSON from the src/assets/samplejson folder using an HTTP request. In real applications, the service helps get the data from a Rest API or any other API by making an HTTP Request. This service is used by both the CustomersComponent and CustomerdetailsComponent.

   DataService ：这对应于src / app / data.service.ts 。 应用程序中使用的所有JSON都存储在src / assets / samplejson文件夹中。 DataService有助于使用HTTP请求从src / assets / samplejson文件夹中获取JSON。 在实际的应用程序中，该服务通过发出HTTP请求来帮助从Rest API或任何其他API获取数据。 两个客户组件均使用此服务 和CustomerdetailsComponent。

Model classes used are:

使用的模型类是：

1. Customer: This corresponds to src/app/customer.ts. This is the model class used for the CustomersComponent to define the structure of each customer in the list.

   客户 ：这对应于src / app / customer.ts 。 这是用于CustomerComponent的模型类，用于定义列表中每个客户的结构。

2. CustomerDetails: This corresponds to src/app/customerdetails.ts. This is the model class used for CustomerdetailsComponent to define the structure containing all the customer details.

   CustomerDetails ：这对应于src / app / customerdetails.ts 。 这是用于CustomerdetailsComponent的模型类，用于定义包含所有客户详细信息的结构。

路由模块 (Routing Module)

The routing module is defined in src/app/app-routing.module.ts . This module is then applied to the application by add <router-outlet></router-outlet> in app.component.html.

路由模块在src / app / app-routing.module.ts中定义。 然后通过在app.component.html中添加<router-outlet></router-outlet>将该模块应用于应用程序。

There are 2 routes present in the application:

应用程序中存在2条路线：

1. /customers: This URL displays the customer list and points to CustomersComponent.

   / customers ：此URL显示客户列表并指向CustomerComponent。

2. /customerdetails/:id: This URL displays the details for each customer and points to CustomerdetailsComponent. The id which is present in this URL is the routeParam. This id in turn is used by the CustomerdetailsComponent to know which customer’s details to display. For Example /customerdetails/1 will display the details of the first customer, /customerdetails/3 will display the details of the 3rd customer, and so on.

   / customerdetails /：id ：此URL显示每个客户的详细信息，并指向CustomerdetailsComponent 。 该URL中存在的ID是routeParam。 这个编号 反过来， CustomerdetailsComponent会使用它来了解要显示的客户详细信息。 例如， / customerdetails / 1将显示第一个客户的详细信息， / customerdetails / 3将显示第三个客户的详细信息，依此类推。

再次恭喜 😄 (Congrats again 😄)

Now you know how to use components and services. Also you know how to make HTTP calls, how to use routing, and how to pass routeParams.

现在，您知道如何使用组件和服务。 您还将了解如何进行HTTP调用，如何使用路由以及如何传递routeParams。

The basic concepts have been covered in this post, and hope it was helpful.

这篇文章已经介绍了基本概念，希望对您有所帮助。

参考文献： (References:)

1. To know more about Angular you can check the documentation https://angular.io/guide/quickstart . The Documentation is very good to understand further concepts of angular

   要了解有关Angular的更多信息，可以查看文档https://angular.io/guide/quickstart 。 该文档非常有助于您了解有关角度的更多概念

关于作者 (About the author)

I love technology and follow the advancements in technology. I also like helping others with any knowledge I have in the technology space.

我热爱技术，并追随技术的进步。 我也喜欢以我在技术领域拥有的任何知识来帮助他人。

Feel free to connect with me on my LinkdIn account https://www.linkedin.com/in/aditya1811/

随时通过我的LinkdIn帐户与我联系https://www.linkedin.com/in/aditya1811/

You can also follow me on twitter https://twitter.com/adityasridhar18

您也可以在Twitter上关注我https://twitter.com/adityasridhar18

My Website: https://adityasridhar.com/

我的网站： https : //adityasridhar.com/

我的其他相关帖子 (Other related posts by me)

A quick guide to help you understand and create ReactJS apps

帮助您理解和创建ReactJS应用的快速指南

A quick introduction to Vue.js

Vue.js快速介绍

翻译自: https://www.freecodecamp.org/news/quick-guide-to-understanding-and-creating-angular-6-apps-2f491dffca1c/

angular2创建应用