我们的应用程序具有2级导航功能。我们希望使用AngularJS $routeProvider
向<ng-view />
动态提供模板。我正在考虑做一些与此相关的事情:
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:primaryNav/:secondaryNav', {
templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
});
}]);
我只是不知道如何填充<<>>
中的部分。我知道primaryNav和secondaryNav绑定到$ routeParams,但是如何在这里访问$ routeParams以动态提供模板?
答案 0 :(得分:129)
这个非常有用的功能现在可从AngularJS 1.1.2版开始提供。它被认为是不稳定的,但我已经使用它(1.1.3)并且它工作正常。
基本上,您可以使用函数生成templateUrl字符串。该函数传递可用于构建的路由参数并返回templateUrl字符串。
var app = angular.module('app',[]);
app.config(
function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'/home'}).
when('/users/:user_id',
{
controller:UserView,
templateUrl: function(params){ return '/users/view/' + params.user_id; }
}
).
otherwise({redirectTo:'/'});
}
);
非常感谢https://github.com/lrlopez提取请求。
答案 1 :(得分:84)
我找不到注入和使用$routeParams
服务的方法(我认为这是一个更好的解决方案)我试过这个认为它可能有用:
angular.module('myApp', []).
config(function ($routeProvider, $routeParams) {
$routeProvider.when('/:primaryNav/:secondaryNav', {
templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
});
});
出现了这个错误:
未知提供商:来自myApp的$ routeParams
如果无法做到这一点,您可以将templateUrl
更改为指向只有ng-include
的部分HTML文件,然后使用$routeParam
s在控制器中设置网址像这样:
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.when('/:primaryNav/:secondaryNav', {
templateUrl: 'resources/angular/templates/nav/urlRouter.html',
controller: 'RouteController'
});
});
function RouteController($scope, $routeParams) {
$scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
}
将此作为urlRouter.html
<div ng-include src="templateUrl"></div>
答案 2 :(得分:18)
templateUrl可以用作返回生成的URL的函数。我们可以通过传递带有routeParams的参数来操纵url。
参见示例。
.when('/:screenName/list',{
templateUrl: function(params){
return params.screenName +'/listUI'
}
})
希望得到这个帮助。
答案 3 :(得分:7)
好吧,以为我明白了......
小背景: 我需要这个的原因是将Angular放在Node Express之上,并让Jade处理我的部分内容。
所以这是什么必须做的... (喝啤酒,先花20多个小时!)......
设置模块时,请全局保存$routeProvider
:
// app.js:
var routeProvider
, app = angular.module('Isomorph', ['ngResource']).config(function($routeProvider){
routeProvider = $routeProvider;
$routeProvider
.when('/', {templateUrl: '/login', controller: 'AppCtrl'})
.when('/home', {templateUrl: '/', controller: 'AppCtrl'})
.when('/login', {templateUrl: '/login', controller: 'AppCtrl'})
.when('/SAMPLE', {templateUrl: '/SAMPLE', controller: 'SAMPLECtrl'})
.when('/map', {templateUrl: '/map', controller: 'MapCtrl'})
.when('/chat', {templateUrl: '/chat', controller: 'ChatCtrl'})
.when('/blog', {templateUrl: '/blog', controller: 'BlogCtrl'})
.when('/files', {templateUrl: '/files', controller: 'FilesCtrl'})
.when('/tasks', {templateUrl: '/tasks', controller: 'TasksCtrl'})
.when('/tasks/new', {templateUrl: '/tasks/new', controller: 'NewTaskCtrl'})
.when('/tasks/:id', {templateUrl: '/tasks', controller: 'ViewTaskCtrl'})
.when('/tasks/:id/edit', {templateUrl: '/tasks', controller: 'EditTaskCtrl'})
.when('/tasks/:id/delete', {templateUrl: '/tasks', controller: 'DeleteTaskCtrl'})
.otherwise({redirectTo: '/login'});
});
// ctrls.js
...
app.controller('EditTaskCtrl', function($scope, $routeParams, $location, $http){
var idParam = $routeParams.id;
routeProvider.when('/tasks/:id/edit/', {templateUrl: '/tasks/' + idParam + '/edit'});
$location.path('/tasks/' + idParam + '/edit/');
});
...
这可能比需要的更多信息......
基本上,您需要全局存储模块的$routeProvider
var,例如routeProvider
,以便控制器可以访问它。
然后您可以使用routeProvider
并创建一条新路线(您不能'重置路线'/'重新建立';您必须创建一个新路线),我只是添加了斜线( /)最后,它与第一个语义一样。
然后(在您的控制器内),将templateUrl
设置为您想要点击的视图。
取出controller
对象的.when()
属性,以免获得无限请求循环。
最后(仍然在Controller中),使用$location.path()
重定向到刚刚创建的路由。
如果您对如何将Angular应用程序打到Express应用程序感兴趣,可以在此处分配我的仓库:https://github.com/cScarlson/isomorph。
此方法还允许您保留AngularJS双向数据绑定,以防您想使用WebSockets将HTML绑定到数据库:否则,如果没有此方法,您的Angular数据绑定将只输出{{model.param}}
如果你此时克隆了这个,你需要在你的机器上运行mongoDB来运行它。
希望这可以解决这个问题!
科迪
不要喝你的洗澡水。
答案 4 :(得分:3)
我已经在我的角度叉中添加了对此的支持。它允许您指定
$routeProvider
.when('/:some/:param/:filled/:url', {
templateUrl:'/:some/:param/:filled/template.ng.html'
});
https://github.com/jamie-pate/angular.js/commit/dc9be174af2f6e8d55b798209dfb9235f390b934
不确定这会被拾取,因为它有点对抗角度,但它对我很有用
答案 5 :(得分:3)
路由器: -
...
.when('/enquiry/:page', {
template: '<div ng-include src="templateUrl" onload="onLoad()"></div>',
controller: 'enquiryCtrl'
})
...
控制器: -
...
// template onload event
$scope.onLoad = function() {
console.log('onLoad()');
f_tcalInit(); // or other onload stuff
}
// initialize
$scope.templateUrl = 'ci_index.php/adminctrl/enquiry/'+$routeParams.page;
...
我认为在angularjs中,$ routeParams在路由器内部不可见是一个弱点。在实施过程中,一个微小的增强将使世界变得不同。
答案 6 :(得分:1)
//module dependent on ngRoute
var app=angular.module("myApp",['ngRoute']);
//spa-Route Config file
app.config(function($routeProvider,$locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/',{template:'HOME'})
.when('/about/:paramOne/:paramTwo',{template:'ABOUT',controller:'aboutCtrl'})
.otherwise({template:'Not Found'});
}
//aboutUs controller
app.controller('aboutCtrl',function($routeParams){
$scope.paramOnePrint=$routeParams.paramOne;
$scope.paramTwoPrint=$routeParams.paramTwo;
});
index.html中的
<a ng-href="#/about/firstParam/secondParam">About</a>
firstParam和secondParam可以根据您的需要进行任何操作。
答案 7 :(得分:0)
我遇到了类似的问题并使用了$stateParams
代替routeParam