Useful Modules with Angular for large                                                               applications

I have listed some of the important modules which are useful when working with large application with angular.Each module is having some basic information given here.To see more information you can click on more info click given under each module.

1).RequireJs: 

While working with large application  we do have several JavaScript files independent of each other in functionality,here RequireJs comes in picture.

RequireJS needs a main file that contains the basic configuration data such as paths to modules and shim.

Main.js  //Add this in your master page

 require.config({  
   baseUrl: "",  
   urlArgs: "v=1.0", //Maintain the version   
   waitSeconds: 60,  
   paths: { // Path of the js file here  
   'angular': 'content/angularlib/angular',  
   'angularAMD': ''  
   content / angularlib / angularAMD '  
   },  
   shim: { //Modules and their dependent modules  
   'angularAMD': ['angular'], //here angularAMD is dependent on angular  
   }  
 }); 

In your controller access the Javascript files you want

 define(['angular'], function($filter,$timeout){  
  function calculateSalary() {  
   // Can use the dependency objects received above  
  }  
 })

MoreInfo

2).angularAMD:

AngularAMD’s reason for existence is to facilitate using RequireJS with Angular, and lazy loading portions of your application.Along with the main.js file we would also require App.js common file for application.

Notice we have added the app dependency in main.js file at last

 require.config({  
   baseUrl: "",  
   urlArgs: "v=1.0",   
   waitSeconds: 60,  
   paths: {   
   'angular': 'content/angularlib/angular',  
   'angularAMD': '' content / angularlib / angularAMD '  
   },  
   shim: { //Modules and their dependent modules  
   'angularAMD': ['angular'], //here angularAMD is dependent on angular  
   }  
  // Say we have a dep on App, so it gets loaded  
   deps: ["app"]  
 });  

In App,js

 define(['angularAMD', 'angular-route'], function (angularAMD) {  
   var app = angular.module("webapp", ['ngRoute']);  
      //app contanstant,confif, on app run setting would be here   
   });  
   return angularAMD.bootstrap(app);  
 });  

Now you can use this app object throughout the application to register controllers ,services etc.

MoreInfo

3).ngRoute:

This module is used for routing between different views in your application.Whenever the url changes it will check the routeProvider and navigate to the template and load the controller.If no route matches it routescto the defalut page.

You can register your routes in config in App.js file and inject dependency of 'ngRoute'

 define(['angularAMD', 'angular-route'], function (angularAMD) {  
   var app = angular.module("webapp", ['ngRoute']);  
      // configure our routes  
   app .config(function($routeProvider) {  
     $routeProvider  
       // route for the home page  
       .when('/', {  
         templateUrl : 'pages/home.html',  
         controller : 'mainController'  
       })  
       // route for the about page  
       .when('/about', {  
         templateUrl : 'pages/about.html',  
         controller : 'aboutController'  
       })  
       // route for the contact page  
       .when('/contact', {  
         templateUrl : 'pages/contact.html',  
         controller : 'contactController'  
       });   
     .otherwise({ redirectTo: '/' });//default ie home  
   });  
   return angularAMD.bootstrap(app);  
 });  

MoreInfo

4).angular-translate

This module helps angular application to support i18n(internationalization ) and l10n(localization).

First you need to inject angular-translate module as a dependency into your app

 var app = angular.module('myApp', ['pascalprecht.translate']);

config setting:

  app.config(['$translateProvider', function ($translateProvider) {  
  $translateProvider.translations('en', {  
   'TITLE': 'Hello',  
   'FOO': 'This is a paragraph'  
  });  
  $translateProvider.translations('de', {  
   'TITLE': 'Hallo',  
   'FOO': 'Dies ist ein Absatz'  
  });   
  $translateProvider.preferredLanguage('en');  
 }]);  

How to use in access in HTML file

 <h1>{{ 'TITLE' | translate }}</h1>  
 <p>{{ 'FOO' | translate }}</p> 

Even we can have our different language files and use them according to the language selection.

MoreInfo

5).ui-bootstrap:

This module supports the angular directives based on Bootstrap's markup and CSS.

There are different directives in this module.Using this module in app helps to have  uniformity

in design and css a throughout application and its also responsive  .

Following are different  day-today used controls supported by ui-bootstrap directives

• Accordion

• Alert

• Buttons

• Carousel

• Collapse

• Datepicker

• Dropdown

• Modal

• Pagination

• Popover

MoreInfo

6).UI-grid:

This is an angular grid.Ui-grid can be used to display data in grid format.

It support all following features

• Performs well with large data sets evn 10000+ rows

• Pagination

• Multiple row selection with Ctrl and Shift keys,

• column Resizing,

• row editing,

• Grouping,

• Infinite scroll,

• hiding/showing columns etc

Inject dependency for angular ui-grid 

 var app = angular.module('myApp', ['ui.grid']);  

MoreInfo

7).angular-moment:

angular-moment provides angular directive and filter for Moment Js.

This requires moment js to be loaded first in your app.Moment js provides facilities

operation on date ,its localization and timezone

In app.js file on app.run event change the local which will be applicable to the dates used in your app and will localized.

 App.js  
 myapp.run(function(amMoment) {  
   amMoment.changeLocale('de');  
 });   

MoreInfo

There are some more:)

• angular-cookies:To store and get data from cookies. MoreInfo
• blockUi:Loader in application.MoreInfo
• isteven-multi-select:multiselect selct dropdown with grouping,search facility.MoreInfo

You can search popular angular modules here

and more are coming.......