I need to load controllers dynamically from certain directories, i.e. instead of this:
$routeProvider.when(path, {
templateUrl: 'templates' + path + '.html',
controller: 'myController'
});
the directory where it is placed should be pointed:
$routeProvider.when(path, {
templateUrl: 'templates' + path + '.html',
controller: 'controllerDir/myController'
});
I guess there should be a some standard approach for it(?). May be there is some way to use dynamically loading file containing the controller similar to the qQuery fashion (getScript)?
To dynamically load controllers, you need to use RequireJS.
http://requirejs.org/
There is an util that will make it easier to integrate RequireJS to AngularJS app
https://github.com/marcoslin/angularAMD
Route has a resolve property which can be exploited to achieve dynamic loading of controllers.
This link should get you started:
http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs
On a different note, consider this dynamic loading of scripts only when you have lot of controllers. It's better to load scripts upfront (which can be bundled and minified) and have browser cache them to give a smooth experience to users
You can also use this method: https://github.com/kapysh/angular-dynamic-loader
Just grab the directive from that repo loadctrl.directive.js
and in your template:
<div load-ctrl="portalController"></div>
and in app.js:
portal.constant('CONTROLLER_PATHS', {
'portalController': {
path: 'static/angular_app/js/controllers/portal.controller.js',
loaded: false
}
})
Related
I'm fairly new to Angular and still figuring stuff out.
What i want to do is i have an app that uses an index.html and then inside it's body the ng-view.
Now i need to ignore that for a specific route /game in my application and use a different one. Basically i wanna do an iframe 100% in that new view but all the CSS and sidebars etc from the index.html file screws up the whole thing.
app.config(function($routeProvider){
.when('/game',{
templateUrl: 'game.html'
}),
.when('/home',{
templateUrl: 'views/home.html'
})
});
How should i approach this ?
Thanks
I am using angular-ui-router to make my app organized by routing but I am little confused. as I know I have to add 'ui-router' dependencie in module to use $stateProvider. but even though I do not add 'ui-router' dependencie, It is working well.
I know angular service is singleton object so if I add 'ui-router' dependencie only once. can I use $stateProvider service in any module?
below code is angular code defined in my app.
angular.module('app', ['ui-router','app.pages']);
angular.module('app.pages', ['app.pages.core']);
angular.module('app.pages.core',[])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('common.default', {
abstract: true,
views: {
header: {
templateUrl: '/public/app/common/components/header/header.html',
controller: 'headerController'
},
content: {
template: '<div ui-view></div>'
}
}
})
.state('common.default.core', {
url: "/goongles/",
templateUrl: "/public/app/pages/core.html",
controller: 'coreController'
});
});
view code
<div ui-view="header"></div>
<div ui-view="content" class ='view ng-scope openm'></div>
please give me any idea. thanks
Think of it as a tree. The root of your tree is whatever module you set in the ng-app directive. When Angular it's bootstraping, it starts from there, and loads all of the module components and its dependencies' components. Once the bootstrap its finished, the lifecycle continues (creating constants, then providers, then running config blocks, etc).
Since somewhere in your app you have a dependency to ui-router, all of its services become available after bootstrap.
Regardless of that, you shouldn't rely on that for your modules to work. If you were to use your app.pages.core module in another application which doesn't have a dependency to ui-router, then it wouldn't work.
When you create an angular module, always specify the dependencies used in this module even if you already specified the same dependency on another module.
Remember that each module should be self sufficient and should work without relating on others module dependencies to be fully reusable.
So to answer correctly to your question .. yes you can use $stateProvider in any module, but add ui-router dependency in each of them.
I'm using UI Router as a router for my application, and I have a situation where I need to have all instances of one resource available all the time.
These instances are listed in sidebar of my application.
I starter with something like this in my routes.js file:
.state('auth', {
url: '/',
abstract: true,
controller: RootCtrl,
template: '<div ui-view autoscroll="true"></div>',
resolve: {
campaigns: function(UserCampaignsCollection, activeUser) {
return (new UserCampaignsCollection).query({user_id: activeUser.id});
}
}
})
This means that I had to create separate controller, just for keeping all the campaigns and sharing those between other controllers, like this:
_app.controller('RootCtrl',
function($rootScope, campaigns) {
$rootScope.campaigns = campaigns;
});
This works fine, since I resolve it on only one place, and then all of my other states just inherit base state (as auth.account, auth.inovice etc.), but I would like to avoid need for attaching all of my campaigns on rootScope.
Is there some other way to pass data to other controllers, which would not involve creating dummy controller like this, and attaching data to rootScope?
If all other states inherit from auth then (via https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#what-do-child-states-inherit-from-parent-states) their controllers can also be injected with resolved campaigns.
I have AngularJs ui router in my application. I need to load js file based on my state.
.state('root.home',{
url: '/index.html',
views: {
'header': {
templateUrl: 'modules/header/html/header.html',
controller: 'headerController'
},
'content-area': {
templateUrl: 'modules/home/html/home.html',
controller: 'homeController'
},
'footer': {
templateUrl: 'modules/common/html/footer.html',
controller: 'footerController'
}
},
data: {
displayName: 'Home',
}
})
The headerController,homeController and footerController have different js files when the home state is loading at that time we need to load the controller js files Is it possible through the UI router?
I think you need to use a framework like RequireJs
it is loading your Script files base on the page you are showing to the user
RequireJS loads all code relative to a baseUrl.
check it. I think It might be helpful.
You should not load javascript files on the fly depending on your route status, instead you should concatenate all your js files and minify the compiled source via Gulp for instance.
https://www.npmjs.com/package/gulp-concat
https://www.npmjs.com/package/gulp-minify
ui-route is more powerful than requirejs (ng-route).
You may look her about differences:
What is the difference between angular-route and angular-ui-router?
http://www.amasik.com/angularjs-ngroute-vs-ui-router/
I have a route defined as
$routeProvider.when('/:culture/:gameKey/:gameId/closed', { templateUrl: '/templates/tradingclosed', controller: TradingClosedCtrl });
I would like angular to include the "culture" parameter when requesting the template somehow, so I can serve a translated template.
Is this possible?
If I'm reading this correctly you'd like to somehow use the culture parameter from the url route to determine which location to retrieve your template.
There may be a better way but this post describes retrieving the $routeParams inside a centralized controller with ng-include to dynamically load a view.
Something similar to this:
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.when('/:culture/:gameKey/:gameId/closed', {
templateUrl: '/templates/nav/urlRouter.html',
controller: 'RouteController'
});
});
function RouteController($scope, $routeParams) {
$scope.templateUrl = 'templates/tradingclosed/' + $routeParams.culture + '_template.html';
}
With this as your urlRouter.html:
<div ng-include src="templateUrl"></div>
You can define the controller you want to load in your views using ng-controller and access the $routeParams for the additional route parameters:
<div ng-controller="TradingClosedCtrl">
</div>
I've posted similar question with working Plnkr example of solution like #Gloopy suggested.
The reason why you can't implement that without ng-include is that routing is done in 'configuration' block, where you can't inject any values (you can read about these blocks in Modules documentation, section Module Loading & Dependencies
If you want not to introduce new scope, you can replace ng-include with my stripped version of ng-include directive, that do absolutely same that ng-include does, but do not create new scope: source of rawInclude directive
Hope that solution will satisfy your use case.