Dynamically Loading Controllers in angularjs

Dynamically Loading Controllers in angularjs

Today, We want to share with you Dynamically Loading Controllers in angularjs.
In this post we will show you Dynamically Loading Controllers in angularjs, hear for Dynamically Loading Controllers in angularjs we will give you demo and example for implement.
In this post, we will learn about Dynamically Loading Controllers in angularjs with an example.

Simple AngularJS provides a simple easy way to associate a angularjs view with a controller all the angular and load everything at runtime call this url using the $routeProvider object.for Dynamically Loading Controllers in angularjs

The AngularJS providers simple exits that are injected into config() file all the settings are used to dynamically url load to register controllers, and register directives, filters and more directives after a given script is angularjs dynamically loaded. Notice that within the (settings) config() function an object literal each is assigned to angular app.register module (app represents the web-application’s module)

[php]
$routeProvider
.when(‘/product’,
{
controller: ‘productController’,
templateUrl: ‘/app/views/product.html’
})
.when(‘/customerorders/:customerID’,
{
controller: ‘productOrdersController’,
templateUrl: ‘/app/views/customerOrders.html’
})
.when(‘/orders’,
{
controller: ‘OrdersController’,
templateUrl: ‘/app/views/orders.html’
})
.otherwise({ redirectTo: ‘/product’ });

[/php]

We can all the one load controller dynamically load by resolve each attribute of $routeProvider used in .when function.

[php]
var my4App = angular.module (‘hw’,[‘ngRoute’,’ngResource’]);
my4App.config([‘$routeProvider’, ‘$controllerProvider’, function($routeProvider, $controllerProvider) {
my4App.regCtrl = $controllerProvider.register;

//function call loadcontroller
function loadcontroller(controllerSubPath){
$.ajaxSetup({async:false});
$.getScript(“scripts/controllers/” + controllerSubPath + “.js”).done(function( script, textStatus ) {
}).fail(function( jqxhr, settings, exception ) {
console.log( exception );
});
}

/* router provider */
$routeProvider
.when(‘/Rights’,{templateUrl:’views/Right/datasearch.html’, controller:’searchCtrl’, resolve: { load: function () {loadcontroller(“right/searchCtrl”);}}})
.otherwise({
redirectTo: ‘/’
});
}])
[/php]

set the dynamic controller for directives

HTML Markup code

[php]

[/php]

Angular script code

[php]
angular.module(‘myApp’,[]).

directive(‘addIcons’, function(){
return {
restrict : ‘A’,
scope:{},
controller : “@”,
name:”controllerName”,
template:”
}
}).
controller(“FirstCtrl”,function($scope){
$scope.add = function(){
alert(“IconsOne add “);
}
}).
controller(“SecondCtrl”,function($scope){
$scope.add = function(){
alert(“IconsTwo add “);
}
});

[/php]

Demo

We hope you get an idea about Dynamically Loading Controllers in angularjs
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.