of 1.x versions precisely, I am not here to sing the praises of BackboneJs or KnockoutJs neither I want to draw comparisons between them but after working about two years with it there have been times when I thought I wish someone should have told me this edgy corners beforehand. The famous AngularJs learning curve Me and many of my developer friends have experienced this. There have been times when we have thought we almost knew how it worked and the day after that Bam! something new poped up and we went WTF! we never thought about it. JavaScript 1. Two-way data-binding It means : When properties in the model get updated, so does the UI. When UI elements get updated, the changes get propagated back to the model. What many developers fail to realize is that just because it looks cool and gives a effect to you application does not mean you need two way data binding, And it comes at a very high cost because this has been implemented via and . wow! dirty checking digest cycle dirty checking: on every browser event runs a digest cycle which literally evaluates every expression in your application (like really!) and if it finds that the value of that expression has changed it updates the values of expressions. All of this happens in the blink of an eye so you don’t really see browser lag but when the expression on the current DOM structure reaches 2000 you will be able to see the problem. AngularJs Solution: Few months ago Google has released AngualrJs 1.5.x which has one way data bindings features which can help minimize problem Digest Cycle: We have already discussed the problems with digest cycle, but one of the biggest problems that I have faced is that when something changes outside the scope of AngualrJs we have to manually call a low level API $scope.$apply() and meanwhile, if Anguar has automatically started the digest cycle “already in progress”- error will popup and it will screw you! Solution: Yet to be found. 2. Dependency Injection In Angular dependencies are injected by the name of an argument. function MyController($scope, $window) { // … } Here Angular calls gets the names of the arguments and then looking for them in the list with all existing dependencies. .toString(), Don’t see the problems? Try minifying your code it will stop working. Even if by chance you miss a single dependency, AngularJs will not run and you will see a blank page in front of your screen. Forget lazy loading, you have to load all the dependencies prior to angular.bootstrap is called. Solutions: You can use this syntax… someModule.controller(‘MyController’, [‘$scope’, function($scope) { }]); or this MyController.$inject = [‘$scope’, ‘$document’]; or use a plugin like . ng-annotate 3. Debugging Debugging in JavaScript is sometimes a headache but AngularJs makes it more difficult i.e, <div ng-repeat=”user in users”> {{ user }} </div> if there is any error in this binding rather than showing it in console the elements won’t be added in DOM because because errors that occurred in JavaScript are caught by the internal angular interceptor, and Errors in bindings don’t fire at all interpreted by browser as caught errors!huh! Solutions: Yet to be found. 4. Directives and all the unnecessary complexity Directives: Everybody is crazy about them, people just worship them for some reasons! But I’m pragmatic, here is complete syntax of the . To understand this syntax and why you need it, you really have to spend a lot of time. Instead of writing WHAT to do, you think about HOW to do it. The sad thing is this- complexity is useless. There is no logical reason to separate logic for 3 methods ( , , ), all these can be easily implemented in a single method. Also take into account that some functions get scope, some not, some execute only once, some every time with $digest cycle, and every directive also have the priority. Even in order to integrate some code in the angular world, you need to wrap it in a directive. Now don’t get me wrong, once you get hold of them they are the most awesome things ever, but frameworks are supposed to make developers life easy not complicate it. directive declaration compile link controller Solution: Practice and study them hard and expect it will pay off. Inability of server side rendering: If you try to use server side rendering, for example to speed up page rendering, or for SEO (or both), then you will be disappointed! Solution: You will need to use prerender.io (the service, that parses your partials and gives you HTML files that should be given to crawlers). But again ahhh — it’s a hack, and not a solution of the problem! Too many ways to do the same thing: Angular provides lots of ways to do the same thing, like different kinds of services (factories, services, providers). There’s also several ways to use a directive (element, attribute, comment, same scope, no scope, isolated scope), and several ways to use a controller. All of these adds into the complexity, learning curve for new developers, lack of conventions, and lack of best practices to enforce. This is bad for the ecosystem around angular, both user-developers and library-developers. 5. Router: AngularJs uses ng-router for routing and it is fairly simple to use as you might know, but it lacks basic features (nested views and states), so, for that you need to use router which is perfect and I have used it for many projects but to get started in it is very difficult and sometimes you need to use other libraries to work with Angular ui router. Angular-ui So let us get this straight, you are using AngularJs to solve your problems and you are now using ui router to solve routing problems and other 3rd (or 4th) party libraries to work with Angular ui router(pheww).. Now, I know the story about how AngularJs was not intended to be what it is today and it has grown organically but these are some rough edges which should have been solved long ago. Now don’t get me wrong, I love AngularJs and I still recommend it to the people whose application’s architecture needs it. I have started making small applications in Angular 2.0 and most of these problems are not there, so if you are new to Angular or have not started development yet, you can use 1.5.x version or version 2.0(after stable release obviously!) Thanks for reading. Feedbacks and comments are always appreciated. Cheers, Shashwat

Blink

Google

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Edgy corners of AngularJS

Too Long; Didn't Read

Companies Mentioned

Shashwat Bhatt

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Edgy corners of AngularJS

Too Long; Didn't Read

Companies Mentioned

Shashwat Bhatt

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES