I have an $routeProvider in my AngularJS which provides a templateUrl and controller,
I was wondering if it is possible to make the temlateUrl within the controller instead.
Reason for this is my code is partially async and this would easen the complexity.
You need to have a template defined for a route (AFAIK), but you could have the template be:
<div ng-include="actualTemplateUrl"></div>
And in the controller set the URL:
$scope.actualTemplateUrl = "/path/to/actual/template.html";
Related
I'm just learning Angular and have a very basic app set up. When rendering some data via the templateUrl property of a route, what would be the best way to include a sub-controller in the returned template? For example, including a "createOrEditItem" template at the bottom of a "viewItem" template so that the "createOrEditItem" can be reused on its own later?
I've tried putting a div in the template with its ng-controller attribute set to a controller name that I've defined at the app level, but it's not being activated. Should this be done with a directive instead to make it instantiate when the master controller has its contents set, or am I missing something more fundamental?
yes, as mentioned in the later part of the question, you should be using a directive. Or, if using AngularJS >= v1.5, component should be the choice because they are pluggable and works well with nesting too.
Note that for the route also, you can directly use a component like this:
var myMod = angular.module('myMod', ['ngRoute']);
myMod.component('home', {
template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
// ^^^^ other components can be used here
controller: function() {
this.user = {name: 'world'};
}
});
myMod.config(function($routeProvider) {
$routeProvider.when('/', {
template: '<home></home>'
});
});
Now, as the comment suggests, you can freely use other components in the template of home component.
Hope this helps a bit!
A directive can be used.
Another option is to use a seperate view/route. So when you add a ui-view tag, you could define your view and route.
This is explained here:
https://scotch.io/tutorials/angular-routing-using-ui-router
When using ui-router, I setup states like so:
$stateProvider
.state 'product',
url: '/catalog/product',
templateUrl: 'app/product/product.html',
The only problem is, I have my controller in a directive, not as a stand-alone controller service. So how do I tell ui-router to hit my directive instead of the template?
Otherwise I'm not sure how to bind the template scope to the controller defined in my directive.
If you insist on Directive, as a target for your state template, the way would be :
$stateProvider
.state 'product',
url: '/catalog/product',
template: '<div here-is-my-directive-with-all-its-standard-settings></div>',
NOTE: there does not have to be controller explicitly defined for view at all. Just the HTML template will be injected into position in parent
And the directive:
.directive('hereIsMyDirectiveWithAllItsStandardSettings', ...)
Other words, the UI-Router is handling states, and injecting the template. The template contains directive, which can do what was designed for... as expected...
I tried searching for this on various threads, but I can't conclusively understand this.
test.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',
{
controller:'SimpleController1',
templateUrl: 'partials/1.html'
})
.when('/xyz',
{
controller:'SimpleController1, SimpleController2',
templateUrl:'partials/2.html'
})
.otherwise({ redirectTo: '/'});
}]);
I tried doing the above snippet, but it's not working. Can I do something like this? If yes, then what is it that I'm doing wrong here?
Only one controller is allowed and will be assigned to the loading template as the controller in ng-view. No need to define ng-controller in the template for a main controller.
If you need to define multiple controllers I suggest you define one main/parent controller and use that in the routeProvider and then have others already in the template using the ng-controller directive.
or...
Check into using Angular UI's UI-Router : http://angular-ui.github.io/ which is a much more versatile router.
I don't want to use templateUrl, due to the way the app is currently structured.
I want to be able to dynamically load a controller into my ng-controller template.
I would think there would be a way to pass variable to ng-controller as you can see
I'm passing controller to ng-controller ignorantly hoping the name controller is assigned
to index_projects.
Routing
config = (http,route) ->
http.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
http.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"
route_to = (path,controller)->
route.when path, {controller: controller}
route_to '/projects', 'index_projects'
Template
.projects_wrap{ ng:{controller:'controller'} }
%h2
%span All Projects
.light_button{ ng:{click: 'pop.new()'} }
%span.light_plus
Add Project
Look at this:
http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm
I am successfully freed of using ngView with this article.
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.