angular 交互_Angular：交互式应用程序的最佳构建伴侣

angular 交互

No matter which product you are trying to sell, customers choose the one which allows them to get involved. Interactive apps are in demand for a long time. Are you wondering how can you make an interactive app?

不管您要销售哪种产品，客户都可以选择一种可以让他们参与其中的产品。 交互式应用的需求量很长一段时间。 您是否想知道如何制作交互式应用程序？

The first thing which comes to our mind when we talk about interactive apps is the concept of single page application. This is because

当我们谈论交互式应用程序时，想到的第一件事就是单页应用程序的概念。 这是因为

SPA以与用户交互的能力而闻名 (SPAs are known for their capacity to interact with the user)

by reloading some page elements dynamically depending upon the interaction by the user.

通过根据用户的交互动态地重新加载一些页面元素。

In a nutshell, it is not something that its name suggests. This eliminates the need to reload the entire page from a new server. Some of the popular single-page applications are Gmail, Google Maps, Twitter, Whatsapp, Facebook, etc.

简而言之，这并不是它的名字所暗示的。 这样就无需从新服务器重新加载整个页面。 一些流行的单页应用程序是Gmail，Google地图，Twitter，Whatsapp，Facebook等。

The benefits of SPA allure these top-notch brands to make their applications interactive.

SPA的优势吸引了这些顶级品牌，使其应用​​程序具有交互性。

以下是单页应用程序对最终用户的最大好处： (Here are the top benefits of single-page applications for the end-user:)

• Quick to load
  快速加载
• Smooth to navigate
  顺利浏览
• Better overall experience
  更好的整体体验

These benefits answer the question “

这些好处回答了“

为什么要单页应用程序？ (why single-page applications?)

”. Undoubtedly, SPAs can provide the interactivity which app users expect. SPA has been adopted widely in the last few years.

”。 毫无疑问，SPA可以提供应用程序用户期望的交互性。 SPA在最近几年被广泛采用。

As an entrepreneur, it must be strenuous to choose the best developers or in other words, tech-stack for an app. But when it comes to SPA, Angular JS is quite popular. This is because the

作为企业家，必须为应用程序选择最佳的开发人员，或者换句话说，选择技术堆栈，这很费劲。 但是当涉及到SPA时，Angular JS非常流行。 这是因为

SPA不是关于包含大量数据的静态页面 (SPA is not about static pages with huge data)

. In fact, it is a complex project which is driven by JavaScript and not HTML. Although I won’t suggest you go for it blindly.

。 实际上，这是一个由JavaScript而不是HTML驱动的复杂项目。 尽管我不建议您盲目追求。

This blog is an attempt to unveil the reasons behind this conception. Before arguing about the degree of suitability of Angular for interactive apps, let’s understand this javascript framework’s background.

该博客试图揭示这一概念背后的原因。 在讨论Angular对交互式应用程序的适用程度之前，让我们了解一下此javascript框架的背景。

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

“AngularJS is a structural framework for dynamic web apps” as per the official definition of Angular JS. Written in TypeScript, it was released by Google in 2010. Angular developers vouch it to be a heroic Javascript framework for dynamic web app development.

根据Angular JS的官方定义，“ AngularJS是动态Web应用程序的结构框架”。 它以TypeScript编写，由Google在2010年发布。Angular开发人员认为它是用于动态Web应用程序开发的英雄Javascript框架。

It is used to develop applications that are known for highlighting features like high performance, compatibility for multiple browsers and easy maintenance. The various features of angular, in brief, are discussed below:

它用于开发突出显示功能的应用程序，这些功能包括高性能，与多个浏览器的兼容性以及易于维护。 简而言之，下面将讨论角度的各种功能：

模板，数据绑定和指令： (Template, data binding, and directives: )

The template modifies the HTML elements before displaying it and program logic is given by template directives. The data binding is known to connect DOM and app data. Angular is known for evaluating and modifying DOM and HTML elements according to your program logic and data.

模板在显示HTML元素之前先对其进行修改，并且程序逻辑由模板指令指定。 已知数据绑定可以连接DOM和应用程序数据。 Angular以根据您的程序逻辑和数据评估和修改DOM和HTML元素而闻名。

服务和依赖注入： (Services and dependency injection:)

You will have to create a service class for logic or data that you want to share across components but cannot associate with a specific view. According to the official Angular website:

您必须为要在组件之间共享但不能与特定视图关联的逻辑或数据创建服务类。 根据Angular官方网站的说法：

“A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows other providers to be injected as dependencies into your class.”

“服务类定义的前面紧跟@Injectable()装饰器。 装饰器提供了元数据，该元数据允许将其他提供程序作为依赖项注入到您的类中。”

Your component classes are kept lean and efficient with the dependency injection. DI delegates this to services instead of getting data from the server or logging to the console.

通过依赖项注入，您的组件类将保持精简和高效。 DI将其委托给服务，而不是从服务器获取数据或将日志记录到控制台。

路由： (Routing:)

The angular router is

角路由器是

Ng模块 (NgModule)

enables you to define the modular structure of the app. It is capable of doing much more than allowing the user to move between different views of the app. While the user performs app tasks, navigation from one page to another is allowed by the angular router.

使您能够定义应用程序的模块化结构。 除了允许用户在应用程序的不同视图之间移动之外，它还具有其他功能。 当用户执行应用程序任务时，角度路由器允许从一页导航到另一页。

Now, let’s come back to the moot point — the suitability of Angular for interactive apps. How these features will prove Angular the best choice for developing a single-page application? Here the attributes that Angular offers to build optimum SPAs.

现在，让我们回到讨论的重点-Angular对交互式应用程序的适用性。 这些功能如何证明Angular是开发单页应用程序的最佳选择？ 在这里，Angular提供了建立最佳SPA的属性。

Before unveiling the reasons, here is a disclaimer that you need to know before reading the blog further.

在揭示原因之前，您需要先了解以下免责声明，然后再继续阅读博客。

我们不仅仅因为它是一个单页面的应用程序而将Angular用于SPA，而是因为它涉及许多复杂的代码和功能而使用了此框架。 (We are not using angular for SPA just because it is a single-page app but we are using this framework because it involves a lot of complex codes and functions.)

为什么应使用Angular构建交互式应用程序的原因： (Reasons why Angular should be used for building Interactive Apps:)

路由，路由，路由！ (Routing, routing, routing!)

Single-page applications are meant to give the users an experience where they feel that they are not leaving the home page (a single HTML page). According to the interaction of users, some of the elements of the app changes.

单页应用程序旨在为用户提供一种感觉，使他们感到自己没有离开主页(一个HTML页面)。 根据用户的交互，应用程序的某些元素会发生变化。

This can be done with the help of Angular Routing. It

这可以借助角度路由来完成。 它

帮助为应用程序中的不同内容创建URL ( helps in creating URLs for different content in the application)

. When content is chosen by a user, the router takes them to the content smoothly without leaving the single HTML page loaded at the beginning.

。 当用户选择内容时，路由器会将其平稳地带到内容，而无需在开始时加载单个HTML页面。

The coding for this is simple. Angular developers can define a route with the help # symbol. For example, the main paid URL is suppose.com/index.html

编码很简单。 Angular开发人员可以使用帮助＃符号定义路线。 例如，主要的付费URL是suppose.com/index.html

Suppose your application is about traveling and a user wants to see the different vacation destinations included in your app. So, if a user wants the app to show all destinations or detail of a destination or want to delete a destination.

假设您的应用程序是关于旅行的，并且用户想要查看应用程序中包含的其他度假胜地。 因此，如果用户希望应用程序显示所有目的地或目的地的详细信息，或者想要删除目的地。

可以通过启用以下链接使此功能可用： (This functionality can be made available by enabling the following links:)

1.http://suppose.com/index.html#ShowDestinations

1.http：//suppose.com/index.html#ShowDestinations

2.http://suppose.com/index.html#DisplayDestinations

2.http：//suppose.com/index.html#DisplayDestinations

3.http://suppose.com/index.html#DeleteDestinations

3.http：//suppose.com/index.html#DeleteDestinations

The # symbol is used with all the routes. The user is directed to these links according to their interaction with the application. This provides the user with an experience that he has not left the page.

＃符号用于所有路由。 根据用户与应用程序的交互，将用户定向到这些链接。 这为用户提供了他尚未离开页面的体验。

Angular如何完成布线？ (How is routing done with Angular? )

• Angular-rout.js is Javascript file that has all the functionality of routing. This file is required to refer to the modules which are needed for routing.
  Angular-rout.js是具有路由功能的Javascript文件。 需要该文件来引用路由所需的模块。
• After this, you need to add ngRoute module dependency. The routing with angular cannot be used unless this dependency is added by the app developers. The general syntax to indicate the inclusion of the ngRoute keyword is given below:
  此后，您需要添加ngRoute模块依赖项。 除非应用程序开发人员添加了这种依赖关系，否则无法使用带有角度的路由。 下面给出了指示包含ngRoute关键字的常规语法：

var module = angular.module(«sampleApp», ['ngRoute']);

var module = angular.module(«sampleApp»，['ngRoute']);

• To provide various routes in your app, you will have to configure $routeProvider. Given below is a syntax that states to use the route to display what the user needs to view.
  要在您的应用中提供各种路由，您将必须配置$ routeProvider。 下面给出的语法说明了使用路由来显示用户需要查看的内容。

when(path, route)

时间(路径，路线)

• In the main HTML page, you will have to add reference links to the different routes in your app. This helps in routing within your app. Here is the general syntax for the same:
  在HTML主页中，您将必须添加指向应用程序中不同路线的参考链接。 这有助于在您的应用内进行路由。 这是相同的一般语法：

• To provide various routes in your app, you will have to configure $routeProvider. Given below is a syntax that states to use the route to display what the user needs to view.
  要在您的应用中提供各种路由，您将必须配置$ routeProvider。 下面给出的语法说明了使用路由来显示用户需要查看的内容。
• At last, include ngview directive. Whenever a relevant route is selected, this will inject the content to the view.
  最后，包含ngview指令。 只要选择了相关的路线，就会将内容注入视图。

Angular routing helps to create a flawless single page application that provides users an interactive interface. Majorly, routing is the main reason behind Angular being the top choice for developing interactive apps.

角路由有助于创建一个完美的单页应用程序，该应用程序为用户提供了一个交互式界面。 在很大程度上，路由是Angular成为开发交互式应用程序的首选的主要原因。

除了这个原因外，还有其他一些重要的原因。 这是其中一些的描述： (Apart from this reason, there are some other vital reasons as well. Here is the description of a few of them:)

快速性能： (Quick Performance: )

Angular Component router feature allows the splitting of codes. This allows users to load the requested code for the view. This speeds up the loading process and gives a quick performance.

角组件路由器功能可拆分代码。 这使用户可以为视图加载请求的代码。 这样可以加快加载过程并提供快速的性能。

易于维护： (Easy Maintainance:)

All apps developed by Angular coding are easy to maintain, so if you will develop SPA with Angular you will be able to enjoy smooth maintenance.

所有由Angular编码开发的应用程序都易于维护，因此，如果您将使用Angular开发SPA，您将能够享受流畅的维护。

出色的UI支持： (Excellent UI support:)

Already explained under the routing header, the user will be enjoying an excellent UI support with SPAs developed using Angular.

在路由标题下已经进行了解释，用户将享受使用Angular开发的SPA提供的出色UI支持。

跨平台兼容性： (Cross-platform compatibility:)

Interactive apps that are written in Angular coding are compatible with every platform.

用Angular编码编写的交互式应用程序与每个平台都兼容。

极大的灵活性： (Great flexibility:)

With Angular, it is easy to develop custom web applications with a great amount of flexibility. The framework gives functions to develop complicated choreographies, animation timelines and many other things with few codes.

借助Angular，可以轻松开发具有大量灵活性的自定义Web应用程序。 该框架提供了一些功能，可以用很少的代码开发复杂的编舞，动画时间表和许多其他内容。

最后的话： (Final Words:)

The ability of the Javascript framework, Angular to develop an application with high performance and excellent user interface, makes it the best companion for developing single-page applications.

Angular Javascript框架具有开发高性能和出色用户界面的应用程序的能力，使其成为开发单页应用程序的最佳伴侣。

The data binding and dependency injection features of this framework allow building complex apps like SPAs. If you are still unclear about the suitability of Angular JS for interactive app development then you can share your requirements or hire Angular JS developers.

该框架的数据绑定和依赖项注入功能允许构建SPA等复杂的应用程序。 如果您仍不清楚Angular JS是否适合交互式应用程序开发，则可以共享您的要求或雇用Angular JS开发人员 。

In case, you have something else to share then please comment below. I value your additions and look forward to exchanging knowledge through healthy discussions. Happy reading!

如果您还有其他要分享的内容，请在下面评论。 我很重视您的补充，并希望通过健康的讨论交流知识。 祝您阅读愉快！

翻译自: https://habr.com/en/post/477684/

angular 交互