Blog

Read About What We Love: Web Development & Technologies

Ten AngularJS Development Clues

For the last few years AngularJS has been gaining popularity in front end frameworks. Its MVC architecture makes it easier to maintain the code for large applications. Some of its features such as two-way data binding, web services, and built in web components make it to stand-out among all other frameworks. Being a front end developer, initially I found it a bit challenging to use Angular JS by with just basic knowledge of MVC. But once I had hands-on experience with MVC architecture it made it easier for me to use AngularJS even for large and complex applications.

I find that Angular has a large number of advantages. Its data binding and dependency injection reduce much of the code. It provides a convenient way to load modular pieces of code and views dynamically into your application.

After having worked on multiple AngularJS projects, I found that keeping a few best practices in mind make development easier, particularly for larger teams because of its architecture.

Here are a few AngularJS Development tips you can use while developing quality applications -

1)    Manage code better by grouping files based on features rather than file type

Instead of grouping files as 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

Group files based on features:

                   app.js

          Feed/

                    _feed.html

                    FeedController.js

                    FeedEntryDirective.js

                    FeedService.js

           Login/

                     _login.html

                    LoginController.js

                    LoginService.js

2)    Avoid writing jQuery wrapped in AngularJS. Remove dependency of the data/state from the template’s attributes and classes. To do this introduce ngClass, ngClick, and ngIf to the template. You can then keep track of the links’ states inside the directive scope, and leave the DOM manipulation to Angular.

Ex : Use ngClick instead of jQuery.on (‘click’).

        Use $http instead of jQuery.ajax

3)    Avoid creating controllers in the global scope. For the big applications as you will be defining your modules and registering controllers and filters. Use “.controller” method of the angular module to work with $scope object.

Ex : Controller defined in global scope

          Function fooController($scope){

          $scope.name  = “bar”;

          Controller defined using method

                   Var hello = angular.module(“hello”,[]);

                   Hello.controller(“fooController”, function($scope)){

                             $scope.name = “bar”;

4)    Controller should contain only the business logic needed for a single view.

When the application grows it is a good practice to move view-independent logic from the controller into a service. This is because it is reusable business logic independent of views.

5)    Always provide alias to dependency so that they will not rename during minification process, because in AngularJS dependencies are resolved by name.

6)    You need to use attribute “novalidate” in form tag while using AngularJS validations to turn off HTML5 validations.

7)    Use Angular classes to change visibility and status of validations of controls-

.ng-valid.ng-dirty{

    border-color: #FA787E;

.ng-invalid.ng-dirty{

    border-color: #FA787E;

8)    Controllers should not reference DOM but just contain behavior. Directives should have DOM manipulation because Directives extend HTML with custom attributes and elements.

9)    Use scope events to communicate across the controllers in the current screen of the application. If you need to only share data, then you should look at using services as it provides reusability.

10)   Scope must be read-only in the templates, this means that even if AngularJS allows us to write code that modifies the scope in the templates, it’s something that you must be very cautious about. One should probably not modify it because scope is context where the model is stored so that controllers, directives and expressions can access it.

Using these Angular JS tips will smoothen your development of web applications. Don’t forget to share with us your experience with Angular JS and if you need any help feel free to contact our experts.

 Naveen Kumar MSenior UI Developer

Leave A Comment

Bangalore – Paris – Aix-en-Provence – Geneva – Montreal

We love diversity and we work out of five fabulous cities, on 3 continents, and 3 time zones.


Contact us
We’ll get in touch with you ASAP!