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.
Related
I don't want to hardcode views and controllers in the normal way by using the $routeProvider configuration.
Basically I want to subsribe to the routechanged event, call some logic on the server providing the current route, and get the appropriate view / controller returned as json ( as a promise ), and then have it compiled / displayed inside the main section of the app.
It seems like a trivial problem, but I haven't found a solution yet.
I've tried replacing the ng-view with ng-include, but i'm not able to dynamically change the ng-controller on it.
I've tried creating a custom directive which optionally wraps the ng-include in a div with ng-controller if it is provided, but since this executes inside template function, i'm not able to resolve the controller name, because the template function does not have access to scope
If any one can show me the path, it would be greatly appreciated.
I've ended up doing this in my controller, which seems to work:
function loadPage(page) {
var container = $("#main");
var element = $("<div>");
var scope = $rootScope.$new();
server.loadViewTemplate(page.view).then(function(template) {
element.html(template);
container.html(element);
if (page.controller) {
var templateController = $controller(page.controller, { $scope: scope });
element.children().data('$ngControllerController', templateController);
}
$compile(element)(scope);
});
}
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
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";
As we use, $routeProvider in config method, as of my knowledge $route is a provider.
So, I tried adding new routes to $route in my controller:
After configuring and bootstrapping the application, somewhere in my controller, I tried this:
app.controller('MyCtrl',function($scope,$route) {
$route.routes['/newRoute'] = { template : 'hey, this is dynamically added route' };
});
But this doesn't seem to work. why?
Any Ideas?
you can only configure the routes via your ngapp config function only, so you can't just add routes dynamically in runtime.
also $route is a service.
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.