10 Mistakes to Avoid in AngularJS Mobile App Development

Sat Jun 2016
10 Mistakes to Avoid in AngularJS Mobile App Development

Around 95% of apps are abandoned in the first month of installation. Reasons? Well, there are many, but the prominent ones are poor UI (User Interface) and performance.

You might have understood the significance of having impeccable front-end design and scripting. However, the discourse of client-side scripting, would be incomplete without roping in AngularJS, the only framework facilitating 100% JavaScript coding. Owing to the unmatched simplicity that it imparts to the mobile app development process and range of features that it brings at the disposal of developers, it has found a great adoption round the world. However, like any other disciplines, AngularJS mobile app development is also marred by flaws and inconsistencies. Worried? You shouldn?t. The current Root Info Solutions Blog lists some of the key issues that must be avoided to build an app with a better life and user-acceptance.

Using Nested ng-repeat Directive

ng-repeat
Using an excessively extended JSON object running across several screens kills the performance of the app. Hence, an AngularJS mobile app developer should give preference to small individual JSON object. A proper JSON format, instead of, one derived from XML is recommended. Rely on lazy load or pull to refresh heavy listing whenever required.

Using $Scope

using scope
Prototype-based inheritance of Javascript is not the same as its class-based inheritance. However, this doesn?t raise much trouble to a mobile app developer. The only challenge that arises is with the functionality of the $Scope. Here, every $Scope emerges from its parent $Scope ($rootScope is the highlest level). And hence, sometimes, it becomes challenging to hide the property of the parent $scope.
 

Using as Server-Side Scripting

server side scripeing
AngularJS is architectured to serve front-end app development needs, and should be used accordingly. Extending its usage to server-side scripting may not pay effective result, and must be avoided.
 

Using Too Many External Directives

external directives
External directives are also welcomed in AngularJS mobile app development process. However, pre-built directives are tested on multiple instances by the community members to ensure development of a bug-free app build. Hence, an AngularJS app development team must try to make the most of them.
 

DOM Manipulation by Controllers

controller
Controllers provide a launchpad to an AngularJS app. However, they should not distract DOM. Developers need to emphasize on confining the business logic of the app with the services, not with the controllers because unlike controllers that are temporary in nature, services persist through the app lifecycle.
 

MVC Directory Structure

directory structure

MVC framework focuses on grouping files based on file types as given below:

templates/ _login.html _feed.html app/ app.js controllers/ LoginController.js FeedController.js directives/ FeedEntryDirective.js services/ LoginService.js FeedService.js filters/ CapatalizeFilter.js

But that may sound confusing to developers who are assigned with the app modernization task. Thus, it?s better to resort to group files based on respective features. This gives a clear understanding to the members of AngularJS mobile app development framework as which file to modify.

app/ app.js Feed/ _feed.html FeedController.js FeedEntryDirective.js FeedService.js Login/ _login.html LoginController.js LoginService.js Shared/ CapatalizeFilter.js
 

Modules Clutter

module clutter

Maintaining a hierarchy of modules is important while working with a multi-module app. Well organized structure streamlines the connectivity among different levels or features of the apps and complement with enhanced user-experience besides easing and speeding up the development process. Hence, it's imperative for an AngularJS mobile app development team to organize modules based on types of objects or features they hold.

 

Underestimating Dependency Injection

dependency injection
Dependency injection is one of the best architectural practices that an AngularJS mobile app developer can make use of. It can be done by just passing the name of the dependency into the function for the module.var app = angular.module('app',[]); app.controller('MainCtrl', function($scope, $timeout){ $timeout(function(){ console.log($scope); }, 1000); });
Here, it's very clear that MainCtrl depends on $scope and $timeout. Remember, this is no little favor to the app testing staff.
 

Service vs Factory

service vs factory

Factory and Service, in the parlance of AngularJS app development, both are synonyms. A developer should go through the glossary of the framework in advance. Watch

function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); } function service(name, constructor) { return factory(name, ['$injector', function($injector) { return $injector.instantiate(constructor); }]); }

Note:service just calls the factory function, which in turn calls the provider function. value, constant, and decorator are additional wrappers of the provider function.

Too Many Watchers

Inclusion of too many watchers in the digest cycle is also detrimental to the app?s performance. According to experts, one should not let the number exceed the 2000 mark. Thankfully,  AngularJS 1.3 brings an answer to it. Developers can now keep a check over digest cycles.

Team
Share