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 .
- Accordion
- Alert
- Buttons
- Carousel
- Collapse
- Datepicker
- Dropdown
- Modal
- Pagination
- Popover
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']);
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');
});
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.......
