I faced the same situation recently when I had to choose one from Angular vs KnockoutJS. The most perplexing part of the two is Angular is a JavaScript-based open-source front-end web development framework while Knockout is a library.

最近，当我不得不从Angular vs KnockoutJS中选择一个时，我遇到了同样的情况。 两者中最令人困惑的部分是Angular，它是一个基于JavaScript的开源前端Web开发框架，而Knockout是一个库。

So, the selection is a bit complex task and, as I had to, you might need to go through a systematic and understand the two technologies or web development framework thoroughly.

因此，选择是一个有点复杂的任务，而且，正如我不得不做的那样，您可能需要系统地了解这两种技术或Web开发框架。

So, you need to begin following the one-by-one method.

因此，您需要开始遵循一对一的方法。

什么是框架？ (What is Framework?)

A framework is a model on which you have to build your home. It is having a collection of blueprints which from which it choose the right one for you. In short, the framework is in charge of the flow and it chooses when and how to go.

框架是您必须建立房屋的模型。 它具有一系列蓝图，从中可以为您选择合适的蓝图。 简而言之，框架负责流程，它选择何时以及如何进行。

什么是图书馆？ (What is the Library?)

The library is like going to a furniture house to get some furniture for your home. Here you are in charge of the flow and you decide when to call the code.

图书馆就像去家具屋，为您的家添置家具。 在这里，您将负责流程，并决定何时调用代码。

Angular和KnockoutJS概述 (Overview of Angular and KnockoutJS)

他们共享但工作方式不同的一些相似功能 (Some of the Similar Features They Share but Work Differently)

数据绑定 (Data Binding)

Data Binding helps developers in establishing a connection between UI and business logic by making the smooth process. That means when the data is changed, it will be reflected in the UI, though the setting and notifications are required to be configured correctly.

数据绑定通过平滑的过程帮助开发人员在UI和业务逻辑之间建立连接。 这意味着，尽管需要正确配置设置和通知，但更改数据时，数据将反映在UI中。

Let's take a look the data binding process takes places in both Angular and KnockoutJS

让我们看一下数据绑定过程是否同时发生在Angular和KnockoutJS中

Here's the model we have assumed   这是我们假设的模型

In case of KnockoutJS to perform two-way binding, you need to change the following model properties with wrapper such as ko.observable;

如果使用KnockoutJS执行双向绑定，则需要使用包装器更改以下模型属性，例如ko.observable;。

Let's explore how binding is applied to the two technologies; 让我们探讨如何将绑定应用于这两种技术。

KnockoutJS;

KnockoutJS;

Angular

角度的

If you suppose to analyze this, you will find that data-bind attribute along with appropriate binding type was utilized In the HTML syntax for Knockout. You may need to put some added efforts to specify all properties as observable. That you can do in the following ways;

如果您想对此进行分析，您会发现在KnockoutHTML语法中使用了data-bind属性以及适当的绑定类型。 您可能需要付出更多的努力才能将所有属性指定为可观察的。 您可以通过以下方式进行操作：

利用映射插件使过程更容易 (Utilize mapping plugin to make the process easier)

Converting properties as observable will be easier if it is done utilizing mapping s while loading JSON file from the server.

如果在从服务器加载JSON文件时利用mappings完成了将属性转换为可观察的属性，则将更加容易。

In the case of Angular Syntax, data binding such as reading and composing become quite easier. What separates the two technologies is the binding methodology. Yes, KnockoutJS does it using the model provided while Angular does it utilizing the $Scope -the special object.

在Angular语法的情况下，数据绑定(例如读取和撰写)变得非常容易。 将两种技术区分开的是绑定方法。 是的，KnockoutJS使用提供的模型来完成它，而Angular使用$ Scope-特殊对象来完成它。

Furthermore, in the case of KnockoutJS, data binding can be executed once while it can be repeated in the case of Angular -thanks to the Scope.

此外，在KnockoutJS的情况下，由于Scope，数据绑定可以执行一次，而在Angular的情况下可以重复执行。

My View: Angular has over Knockout, though Knockout can be fit as per project in hand.

我的观点：Angular已经淘汰了Knockout，尽管可以根据现有项目进行淘汰。

模板化 (Templating)

Templating is common in both Angular and KnockoutJS and it helps developers break code into tiny and maintainable pieces. Let's understand them through the example.

模板在Angular和KnockoutJS中都很常见，它可以帮助开发人员将代码分解为可维护的小片段。 让我们通过示例了解它们。

AngulaJS:

AngulaJS：

KnockoutJS:

KnockoutJS：

我的意见： (My Views: )

Angular is more beneficial in this case here. Angular stores the templates into external HTML files. Just provide the template URL (<div ng-include=«template-title.html»></div>) and it will organized the template code properly.

在这种情况下，Angular更为有益。 Angular将模板存储到外部HTML文件中。 只要提供模板URL(<div ng-include =«template-title.html»> </ div>)，它就会正确组织模板代码。

可扩展性 (Extensibility)

Here you get benefits from both technologies -Angular and KnockoutJS are not limited to their built-in functionalities. Angular, using Directives concept, help you put together to particular behavior to the DOM elements. KnockoutJS, on the other hand also uses the similar and equivalent functionality and that you can do by writing the custom binding.

在这里，您将从这两种技术中受益-Angular和KnockoutJS不仅限于其内置功能。 Angular使用Directives概念，可以帮助您将DOM元素的特定行为组合在一起。 另一方面，KnockoutJS也使用相似和等效的功能，您可以通过编写自定义绑定来实现。

Let's find it here in these examples;

让我们在这些示例中找到它；

Angular

角度的

KnockoutJS

淘汰赛

变量观察 (Variable Observation)

Variable Observations are meant to track changes and notify the subscribers and it goes well with Knockout as it uses Observable pattern while Angular does it using a dirty checking technique.

变量观察旨在跟踪更改并通知订阅者，它与Knockout配合得很好，因为它使用Observable模式，而Angular使用脏检查技术进行。

You can understand them from the examples given below.

您可以从下面给出的示例中了解它们。

KnockoutJS

淘汰赛

Angular

角度的

性能 (Performance)

Angular is known for better optimization and that enhances the performance of application built on it. At the same time, the latest version of Angular comes up with updated features which automatically remove the polyfills from the application that results in high performance of the applications. In the case of KnockoutJS, you can expect performance with integrations only that too in small scale applications. It may not provide a desirable result in complex applications.

Angular以更好的优化而著称，它可以提高基于它的应用程序的性能。 同时，最新版本的Angular具有更新的功能，这些功能会自动从应用程序中删除polyfill，从而提高应用程序的性能。 对于KnockoutJS，您可以期望仅在小型应用程序中具有集成的性能。 在复杂的应用程序中可能无法提供理想的结果。

易于发展 (Ease of Development)

Angular's latest version provides 'Bundle budget' which help Angular developers to keep the project lightweight. At the same time, it helps in faster development and there are many such features which make the development an easy task. Knockout also supports faster and easy development, though it is effective in small scale applications.

Angular的最新版本提供了“捆绑预算”，可帮助Angular开发人员保持项目轻量化。 同时，它有助于加快开发速度，并且有许多这样的功能使开发变得容易。 尽管Knockout在小型应用程序中很有效，但它也支持更快，更轻松的开发。

社区支持 (Community Support)

Angular has large community support and it is obvious as Google itself maintains it. Developers would get quick solutions to any problem if they supposed to encounter with while in Knockout, you may not get the support as it does not have any community support so far.

Angular拥有大量的社区支持，并且很明显，因为Google自己维护着它。 如果开发人员在淘汰赛中遇到问题，他们将快速解决所有问题，因为到目前为止它还没有任何社区支持，因此您可能无法获得支持。

开发费用 (Development Cost)

Angular is very popular for many reasons; cost-effectiveness is one of them. However, as compared to Knockout, you need to spend more bucks with Angular development Services. Yet, all types of application can be built using Angular and Knockout is better for UI representation only.

Angular非常受欢迎的原因很多。 成本效益就是其中之一。 但是，与淘汰赛相比，您需要在Angular开发服务上花费更多的钱。 但是，可以使用Angular构建所有类型的应用程序，而Knockout仅适用于UI表示。

So far, I have focused on the subset features with both Angular and Knockout while Angular has some additional and unique features that Knockout does not. So, in the following paragraphs, I shall be discussing the other elements of Angular and how you can make this function in the Knockout as well.

到目前为止，我专注于Angular和Knockout的子集功能，而Angular具有Knockout没有的其他一些独特功能。 因此，在以下各段中，我将讨论Angular的其他元素，以及如何在Knockout中实现此功能。

缺失的角度的一些其他功能 (Some of the Additional Features of Angular Which Lack in Knockout)

Modules: Modules works as a container or the collection of services such as directives, controllers, filters, and configuration information, etc. And, they help build or add more blocks in the applications.

模块：模块充当容器或服务的集合，例如指令，控制器，过滤器和配置信息等。而且，它们有助于在应用程序中构建或添加更多块。

Tree Shaking:

摇树：

This feature helps Angular developers find the error in the code easily. Besides, it enables you to find or eliminate the unused code in the application easily. There are plenty of things you can do using this feature and it works as an optimization.

此功能可帮助Angular开发人员轻松找到代码中的错误。 此外，它使您可以轻松找到或消除应用程序中未使用的代码。 使用此功能，您可以做很多事情，并且可以作为优化。

Services:

服务：

Services such as $http, $q, and $log help developers organize and share code across the application. For example, using $http, you make a request to the AJAX server and $log can be used as service for login.

$ http，$ q和$ log等服务可帮助开发人员在整个应用程序中组织和共享代码。 例如，使用$ http，您向AJAX服务器发出请求，并且$ log可用作登录服务。

Dependency Injection:

依赖注入：

Angular injector subsystem helps developers do away with resolving their dependencies, making components reusable, and much more.

角注入器子系统可帮助开发人员消除其依赖性，使组件可重用，等等。

Scope:

范围：

$Scope in Angular is a built-in object which mimics the DOM structure of the application and contains application data and method. With the help of this, you can easily create the properties to a $scope object inside a controller function which will assign a value to it.

Angular中的$ Scope是一个内置对象，它模仿应用程序的DOM结构并包含应用程序数据和方法。 借助于此，您可以轻松地在控制器函数内为$ scope对象创建属性，该属性将为其分配值。

Note 1: Angular is moving fast and each new version is coming up with added and updated features and functionality. So, features explained here may differ. 注1： Angular的发展很快，每个新版本都提供了新增和更新的特性和功能。 因此，此处说明的功能可能有所不同。 Note 2: These are some of the features which KnockoutJS does not have in its core library, though utilizing external libraries or custom logic, these features and functionalities can be implemented. 注意2：这些是KnockoutJS核心库中没有的一些功能，尽管利用外部库或自定义逻辑，也可以实现这些功能。 My Views: Keeping the specific need apart, if you have projects which can be worked using both Angular and KnockoutJS, think about its features and usability and choose the technology smartly. So far, Angular seems to have an edge over Knockout. 我的观点：将特定需求分开，如果您有可以同时使用Angular和KnockoutJS进行工作的项目，请考虑其功能和可用性，并明智地选择技术。 到目前为止，Angular在淘汰赛方面似乎有优势。

Now, there are some features such as Routing and Testing which are not supported in Knockout, though testing can be done following the similar methodology of Angular.

现在，有些功能(例如路由和测试)在淘汰赛中不受支持，尽管可以按照类似Angular的方法进行测试。

The two technologies, such as Angular and Knockout, differ in Browser Support as well.

两种技术(例如Angular和Knockout)在浏览器支持方面也有所不同。

Conclusion 结论

Selecting a framework for your project is a bit complex task as you need to be very confident with your decision. In case you are not tech savvy, it would be a bit more complex. I have tried to explain it in a more simplified way so you may better understand the to technology and take the decision smartly. Again;

为您的项目选择框架有点复杂，因为您需要对自己的决定充满信心。 如果您不精通技术，那会更加复杂。 我试图以一种更简化的方式来解释它，以便您可以更好地理解技术并明智地做出决定。 再次;

Angular is very popular and used by a large number of brands. It is capable enough to bind directly to plain objects, modular structure and has robust development guidelines which forbid any issue that might occur during development or post development.

Angular非常受欢迎，并被许多品牌使用。 它具有足够的能力直接绑定到普通对象，模块化结构，并具有可靠的开发准则，该准则禁止开发期间或后期开发中可能发生的任何问题。

KnockoutJS, on the other hand, is meant for UI representations. It is mainly used for implementing any features in the application that too, with lower complexity applications. So, take your decision smartly when to choose the framework.

另一方面，KnockoutJS用于UI表示。 它也主要用于实现应用程序中具有较低复杂度的应用程序中的任何功能。 因此，何时选择框架要明智地做出决定。

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