我目前有一个内置路由的AngularJS应用程序。它可以正常工作,并且一切正常。
我的app.js文件如下所示:
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController });
$routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController });
$routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController });
$routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController });
$routeProvider.otherwise({ redirectTo: '/' });
}]);
我的应用程序内置了CMS,您可以在其中复制 / pages 目录中的新html文件并添加新的html文件。
即使对于新动态添加的文件,我仍然希望通过路由提供程序。
在理想的情况下,路由模式为:
$ routeProvider.when(’/ pagename ‘,{templateUrl:’/ pages / pagename
.html’,控制器:CMSController});
因此,如果我的新页面名称是“ contact.html”,我希望angular选择“ / contact”并重定向到“
/pages/contact.html”。
这有可能吗?如果是这样怎么办?
更新资料
我现在在我的路由配置中有这个:
$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController })
在我的CMSController中:
function CMSController($scope, $route, $routeParams) {
$route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
alert($route.current.templateUrl);
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];
这会将当前templateUrl设置为正确的值。
但是, 我现在想用新的templateUrl值更改 ng-view 。这是如何完成的?
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/page/:name*', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.name + '.html';
},
controller: 'CMSController'
});
}
]);
从文档(1.3.0):
“如果templateUrl是一个函数,则将使用以下参数调用它:
{Array。}-通过应用当前路线从当前$ location.path()中提取的路线参数”
也
when(path,route):方法
- path可以包含以冒号开头并以星号结尾的命名组:例如:name *。当路由匹配时,所有字符都以给定名称急切地存储在$ routeParams中。
我在angularjs网站工作,有在Rails中使用routes和在php中使用Laravel的背景。使用Laravel中的路线,我们可以动态创建一组类似于以下内容的路线: 在这里,我们在Laravel中定义了一系列单独的路线,这些路线在技术上看起来是相同的,除了城市和子弹的值。 在这种情况下,我发现angularJS在定义路由方面有点有限。坦率地说,我在这里有点迷路了。 我在这里做了一些修改,基
问题内容: 因此从Angular 1.1.4开始,您可以拥有一个动态模板网址。从这里, templateUrl-与模板相同,但是从指定的URL加载模板。由于模板加载是异步的,因此在加载模板之前,将暂停编译/链接。 您可以将templateUrl指定为表示URL的字符串,或者指定为使用两个参数tElement和tAttrs(在下面的编译函数api中进行描述)并返回表示URL的字符串值的函数。 我如何
问题内容: 我很难找到有关通过数据库动态使用ui路由器的任何文档。当然,所有内容都经过硬编码。 我的杰森: 我的应用程式: 我很难动态配置视图。有任何想法吗? 更新: 我根据RadimKöhler 的回答做了一个Plunker。感谢您的帮助。 我认为ui-router是defacto路由器,它具有动态性,它将使大型应用程序更易于管理。 问题答案: 有一个显示我们如何动态配置视图的插件。的更新版本如
问题内容: 对于我正在编写的指令的需要,我必须动态构造ng-options表达式。这是我尝试过的。 在我的指令中: 在我的html模板中: 这将导致ng-options使用正确的表达式“列表中l的l.name”,但不会显示选项。 拜托,有什么主意吗? 问题答案: 更改您的代码,使其看起来像这样(使用javascript来选择您的媒体资源):
主要内容:AngularJS 实例,路由设置对象,AngularJS 实例本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页 Web 应用(single page web application,SPA)。 通常我们的 URL 形式为 http://xnip.cn/first/page,但在单页 Web 应用中 AngularJS 通过 #! + 标记
问题内容: 我正在尝试向angular js的控制器中的div动态添加属性。 一切看起来都很好,在调试器中,我看到该属性已添加,但它不执行我的功能。您是否有任何想法如何向现有div添加属性以及如何使其起作用? 问题答案: 您需要重新编译div http://jsfiddle.net/r2vb1ahy/