angularjs常见错误_AngularJS开发人员应避免的7大错误
angularjs常见错误
The main purpose of AngularJS is to elucidate the web development process that makes it perfect for prototyping smaller applications. Moreover, it is used to develop a Single Page Application that can provide sophisticated User Experience to you. In other words, it creates scalable applications, used on multiple devices.
With the introduction of multiple features, Angular can also create pitfalls for the developers. In order to reap the maximum benefits from this scalable web software, you should avoid some of the common mistakes.
Today, in this post, we will share the top 7 mistakes that every AngularJS developer should avoid during the web development process.
Top 7 Mistakes AngularJS Developers Should Avoid
1. Unable to Utilize the Available Tools Many of developers are unable to utilize the available tools. This is one of the frustrating situations as it becomes necessary to make a use of the tools available in AngularJS.
For example, Firefox and Chrome like browsers include an exceptional development strings that comprise debugging, error output and profiling. With the support of these tools, a developer can develop it easily in the browser and can also find the errors very swiftly.
Similarly, in the other example of the console log – AngularJS errors are usually printed on the console log, where you can find all information from the start to the troubleshooting procedure. This is specifically an issue that arises during the learning process, when searching out the way through Angular code for the very first time.
Therefore, it should be a great practice to check the console output before finding out the solutions.
2. MVC Directory Framework The models are not as openly defined as a framework like backbone.js. When you are working in an MVC framework, then a common practice is to combine files together according to the file type:
templates/ _login.html _feed.html app/ app.js controllers/ LoginController.js FeedController.js directives/ FeedEntryDirective.js services/ LoginService.js FeedService.js filters/ CapatalizeFilter.js
It looks like an expected layout, especially, when processing from Rails background. After the application begins to scale, this particular layout causes various folders to be open. Whether you use Visual Studio, Sublime or Vim with the Nerd Tree, a lot of time is wasted on scrolling through the directory tree.
Thus, this directory framework makes it simpler to search all these files related to a specific feature that will hasten the development process. However, it can be controversial to carry .html files with .js files.
3. Improper use of Event Handler Angular’s scope is engaged to carry all the data that is a need for your views to display the page to the user. It is very extensible that allows various custom functions to be written that is based upon the populated content. It can be a very tempting tool, used for coders. The temptation to add code like:
Can be perfect, especially when it comes to adding functionality based on data showcased such as showcasing a custom button based upon user input. However, this disobeys one of the basic principles of AngularJS that is to keep your display and logic as segregated as possible.
4. Modules It is obvious when we start to hang everything off of the main module. It can work great when starting a small application, but it instantly becomes outrageous.
|
1
2
3
4
5
6
7
|
var app = angular.module('app',[]);
app.service('MyService', function(){
//service code
});
app.controller('MyCtrl', function($scope, MyService){
//controller code
});
|
A general strategy after this is to combine similar types of object:
If you follow the same concept of grouping all features together will enable scalability.
|
1
2
3
4
5
6
7
8
|
var sharedServicesModule = angular.module('sharedServices',[]);
sharedServices.service('NetworkService', function($http){});
var loginModule = angular.module('login',['sharedServices']);
loginModule.service('loginService', function(NetworkService){});
loginModule.controller('loginCtrl', function($scope, loginService){});
var app = angular.module('app', ['sharedServices', 'login']);
|
When you are working on big applications everything might not be carried on a single page and by having features carried within modules, then it’s easy to use the modules across apps again and again.
5. Fixed Scope Binding Usually, Angular comes with its own scope nesting rules. A gullible implementation of inputs restrict to a model, for instance, it can lead to a common breakdown in the binding procedure. However, the complications come down to creating sure names are fully qualified.
Any consequent admittance to the index element will result in the local changes only. It is due to how scopes handle JavaScript primitive objects. In fact, these scopes will be duplicated and modify any specific element.
In other words, it means that primitives are passed by value while non-primitives are passed by references. To get out of this problem, you need to structure your scope objects.
6. Not Using Batarang Batarang is an exceptional Chrome extension, used for developing and debugging AngularJS applications. It offers model browsing to have a gaze inside What AngularJS has determined to be the models bound to scopes. However, it can be beneficial when working with directives and to abstract scopes to view where values are bounded.
Batarang also provides a dependency graph. If it is coming into an untested codebase, then it would be an imperative tool to determine which services should get the most importance.
It would be better to use Batarang, a powerful performance tool as it is quite easy to view which function is taking most of the time span. It also shows the full watch free that can be beneficial when having assorted watchers.
7. Manual Testing Many of developers would not prefer TDD development method. Most of the times, an AngularJS developers check to view if the code works or has broken something otherwise they can do a manual testing.
It is important to test an AngularJS application. Actually, it was created to be testable from the ground up. The main evidence of this is ngMock module and Dependency Injection. You can use the most powerful tools that can take the testing process to the higher level.
(a) Protractor It uses the jasmine test framework to define tests. The protractor has a supportive API for assorted page interactions.
The unit tests are the building blocks of a test series, but the difficulty of an application grows, then interaction tests frustrate in more real situations. But with the help of this tool, you can verify the health of your Angular apps.
(b) Karma After writing the integration tests by using Protractor, the test needs to run. But this waiting period can frustrate you. In order, to solve this problem, the core team of AngularJS has developed a Karma Tool.
It is one of the powerful JavaScript test runners that help to close the feedback loop. It performs the task by running the tests any time specified files are changes. It can also run tests in parallel over multiple browsers.
Conclusion If you want to utilize the most efficient and impressive JavaScript frameworks, then you need to avoid all mistakes that can bound you to fulfill the desired goals. Obviously, it is great web software that can continue to upgrade with the community. But still, it is important for the developers to consider the major pitfalls before starting out the development process.
Author Bio Lucy Barret is an experienced WordPress Developer at WPGeeks Ltd. She has the responsibility of handling a team of 75+ developer and delivering 100% client satisfaction with PSD to WordPress projects. She loves to share WordPress and other designing related tutorials through her blog.
AngularJS的主要目的是阐明Web开发流程，使其非常适合原型较小的应用程序。 而且，它用于开发单页应用程序，该应用程序可以为您提供复杂的用户体验。 换句话说，它创建了可在多个设备上使用的可伸缩应用程序。
通过引入多种功能，Angular还可以为开发人员带来陷阱。 为了从此可伸缩的Web软件中获得最大的收益，您应该避免一些常见的错误。
今天，在本文中，我们将分享每个AngularJS开发人员在Web开发过程中应避免的前7个错误。
AngularJS开发人员应避免的7大错误
1.无法使用可用工具许多开发人员无法使用可用工具。 这是令人沮丧的情况之一，因为有必要使用AngularJS中提供的工具。
例如，类似于Firefox和Chrome的浏览器包括一个特殊的开发字符串，其中包括调试，错误输出和性能分析。 在这些工具的支持下，开发人员可以轻松地在浏览器中进行开发，也可以非常Swift地发现错误。
同样，在控制台日志的另一个示例中，通常在控制台日志上打印AngularJS错误，您可以在其中找到从开始到故障排除过程的所有信息。 特别是在学习过程中，当首次通过Angular代码进行搜索时会出现此问题。
因此，在找到解决方案之前检查控制台输出应该是一个好习惯。
2. MVC目录框架模型没有像骨干.js这样的框架公开定义。 在MVC框架中工作时，通常的做法是根据文件类型将文件组合在一起：
模板/ _login.html _feed.html 应用/ app.js 控制器/ LoginController.js FeedController.js 指令/ FeedEntryDirective.js 服务/ LoginService.js FeedService.js 过滤器/ CapatalizeFilter.js
它看起来像预期的布局，尤其是从Rails后台处理时。 应用程序开始扩展后，这种特殊的布局将导致打开各种文件夹。 无论您将Visual Studio，Sublime还是Vim与书呆子树一起使用，在目录树中滚动都浪费了很多时间。
因此，此目录框架使搜索与特定特征相关的所有这些文件变得更加简单，这将加快开发过程。 但是，将.html文件与.js文件一起携带可能会引起争议。
3.事件处理程序使用不当 Angular的范围被用来携带视图需要向用户显示页面所需的所有数据。 这是非常可扩展的，它允许基于填充的内容编写各种自定义功能。 对于编码人员来说，这可能是一个非常诱人的工具。 像这样添加代码的诱惑：
|
1
2
3
|
$ scope . onButtonClick = function ( ) {
// do something based upon data in the template
}
|
可能是完美的，尤其是在根据展示的数据添加功能(例如根据用户输入展示自定义按钮)时。 但是，这违反了AngularJS的基本原则之一，即保持您的显示和逻辑尽可能分离。
4.模块很明显，当我们开始将所有内容挂离主模块时。 当启动一个小型应用程序时，它可以很好地工作，但立即变得令人发指。
此后的一般策略是组合相似类型的对象：
|
1
2
3
4
5
6
7
8
9
|
var services = angular . module ( 'services' , [ ] ) ;
services . service ( 'MyService' , function ( ) {
//service code
} ) ;
var controllers = angular . module ( 'controllers' , [ 'services' ] ) ;
controllers . controller ( 'MyCtrl' , function ( $ scope , MyService ) {
//controller code
} ) ;
var app = angular . module ( 'app' , [ 'controllers' , 'services' ] ) ;
|
如果您遵循将所有功能组合在一起的相同概念，则将实现可伸缩性。
当您在大型应用程序上工作时，可能无法将所有内容都放在一个页面上，也不能通过在模块内承载功能来实现，因此很容易在应用程序之间反复使用这些模块。
5.固定作用域绑定通常，Angular带有自己的作用域嵌套规则。 输入的可靠实现仅限于模型，例如，它可能导致绑定过程普遍崩溃。 但是，复杂性归结为要确保名称完全合格。
索引元素的任何后续接纳将仅导致局部更改。 这是由于范围如何处理JavaScript基本对象。 实际上，这些作用域将被复制并修改任何特定元素。
换句话说，这意味着基元通过值传递，而非基元通过引用传递。 为了解决这个问题，您需要构造范围对象。
6.不使用Batarang Batarang是一个出色的Chrome扩展程序，用于开发和调试AngularJS应用程序。 它提供了模型浏览功能，使您可以深入了解AngularJS已确定是绑定到范围的模型。 但是，在使用指令并抽象作用域以查看值的受限制位置时，这可能是有益的。
Batarang还提供了一个依赖图。 如果它进入未经测试的代码库，那么这将是确定哪个服务最重要的必要工具。
最好使用功能强大的性能工具Batarang，因为它很容易查看哪个功能占用了大部分时间。 它还显示了免费的完整手表，当您有各种各样的手表时，这将是有益的。
7.手动测试许多开发人员不喜欢TDD开发方法。 在大多数情况下，AngularJS开发人员会检查代码是否正常运行或已破坏某些内容，否则他们可以进行手动测试。
测试AngularJS应用程序很重要。 实际上，它被创建为可完全测试。 这样做的主要证据是ngMock模块和依赖注入。 您可以使用最强大的工具，使测试过程更上一层楼。
(a)量角器它使用茉莉花测试框架定义测试。 量角器具有用于各种页面交互的支持性API。
单元测试是测试系列的基础，但是应用程序的难度不断增加，因此在更实际的情况下，交互测试令人沮丧。 但是，借助此工具，您可以验证Angular应用程序的运行状况。
(b)业力使用量角器编写集成测试后，需要运行测试。 但是这个等待期会让您感到沮丧。 为了解决这个问题，AngularJS的核心团队开发了一个Karma Tool。
它是功能强大JavaScript测试运行程序之一，可帮助关闭反馈循环。 只要更改指定文件，它就会通过运行测试来执行任务。 它还可以在多个浏览器上并行运行测试。
结束语如果您想利用最高效，最令人印象深刻JavaScript框架，那么就需要避免所有可能限制您实现预期目标的错误。 显然，这是一个很棒的Web软件，可以继续与社区一起升级。 但是，对于开发人员而言，在开始开发过程之前考虑主要的陷阱仍然很重要。
作者Bio Lucy Barret是WPGeeks Ltd的一位经验丰富的WordPress开发人员。她负责处理75个以上的开发人员团队，并为WordPress项目提供PSD的 100％客户满意度。 她喜欢通过自己的博客分享WordPress和其他与设计相关的教程。
翻译自: https://www.thecrazyprogrammer.com/2015/07/top-7-mistakes-angularjs-developers-should-avoid.html
angularjs常见错误