AngularJS Best Practices And Tips

0

Hello Fellas! Today I came up to address a common  problem that all of us encounter in our professional working environment. It happen to me also when I was handed a project to work on with angular. I completed that project but when my code and project structure was tested then I figure out that my code and project structure was not up to the standards of a quality angular application. No matter how you are technically strong but your project structure and your coding standard  left a first impression on the tester. So I not talk so much and share you what I have learned in making my project upto the standards.

Project Directory Structure:

Lets understand it by designing a simple application. Most common structure should stand like this;

app/

       app.js                              // main app module
 config.js                         // module configuration
 dataservice.js               //data service
 session.html                 // view
 session.js                      //controller

It is pretty extra small application everything is in one folder and it is understandable it is easily to locate and we have to make structure flat as easily as possible.

app/

       app.js                              // main app module
config.js                         // module configuration
dataservice.js               //data service
session.html                 // view
directives.js                  //directives
logger.js                        //logger service
session-details.html    //controller
session-details.js         //controller
spinner.js                      //spinner service
storage.js                      //storage service

 

Now I have some new features such as directive,services,views and now is getting bit cosy and application is becoming little bit larger
I have to solved this problem solution is to add a new folder for services for easily locate.

app/

       app.js                              // main app module
config.js                         // module configuration
directives.js                  //directives
session-details.html    //controller
session-details.js         //controller
session.html                 // view

        services/

                    dataservice.js                //data service

                    spinner.js                       //spinner service
logger.js                         //logger service

                    storage.js                       //storage service

 

Here is my services folder which contains all the services for my application.
Now what happen when I insert new views and layout in my application the structure looks something like this .

app/

        app.js                             // main app module
attendees.html             // views
config.routes.js             // routing

        shell.html                      // layout

        shell.js                           //controller

        speaker-detail.html      //views

        speaker-detail.js           //controller

        sepeaker.html               //views

        speakers.js                     // controller

        tapnav.html                    // views

        tapnav.js                        // controller

        config.js                         // module configuration
directives.js                  //directives
session-details.html    //controller
session-details.js         //controller
session.html                 // view

        services/

                    dataservice.js               //data service

                    spinner.js                       //spinner service
logger.js                         //logger service

                    storage.js                       //storage service

 

Lets dissect it we have 2 layout files and a session features, people fetures etc lets shape our application.

 

app/

        app.js
config.routes.js            

        layout/                                                                           //layout components

                   shell.html                

                   shell.js                      

                   tapnav.html            

                   tapnav.js                  

        people/                                                                          // people components

                   speaker-detail.html  

                    speaker-detail.js

                    sepeaker.html  

                    speakers.js         

                    attendees.html

    attendees.js     

       sessions/                                                                         //session components

                    session-details.html
session-details.js       

                    session.html
session.js        

        config.js
directives.js                       

        services/                                                                     // services and factories

                    dataservice.js  

                    spinner.js
logger.js              

                    storage.js          

  
always make folder level structure for finding easily. It is much easier to locate and still flat.

Coding Styles:

As lot of our fellows still working on Angular1 so we can’t left them behind we will take them and the new young guns in angular 2 to make better there codes.
Personally I like john papa coding structure let start with it..

Module In Angular  1:
Avoid     var app = angular.module(‘simpleCoding’,[‘ngRoute’])
Use          angular.module(‘simpleCoding’,[ngRoute]);

Bootstraping in angular 2:
Avoid : Don’t include application platform logic and bootstrapping in same file

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { AppModule } from ‘./app/app.module’;

platformBrowserDynamic().bootstrapModule(AppModule)

.then(success => console.log(`Bootstrap success`))

.catch(err => console.error(err));

Controller setter in angular 1 :

Avoid  :

var app = angular.module(‘simpleCoding’,[‘ngRoute’]);
controller(‘simpleController’, someCoding);
function someCoding(){}

Use :

 angular .module
.controller(‘simpleCoding’,someCoding)
function someCoding(){}

Components in angular 2:

Avoid:

@Component({

selector: ‘tohHeroButton’,

templateUrl: ‘./hero-button.component.html’

})

export class HeroButtonComponent {}
Use:

@Component({

selector: ‘toh-hero-button’,

templateUrl: ‘./hero-button.component.html’

})

export class HeroButtonComponent {}

Some Important Points to be remember:

  1.  Don’t define your 2 or more controllers or components in same file.  This is bad practice.
  2.  Don’t directly call http calls inside from your controllers or components .  This is a bad practice.
  3. Use single file for single controller and components it will decrease application load space and increase reusability . This is good practice
  4. Always use services and factories for external calls or cron works. Creating services increase your code re usability. This is good practice
  5. Always load scripts of application using controller through lazy loading. This is good practice.

Share your thoughts and recommendations.

Leave A Reply

Your email address will not be published.