- 首页
- 前端开发
- 如何使用 ng-switch 作为我的页面的路由器和 ngRoute &视图?
如何使用 ng-switch 作为我的页面的路由器和 ngRoute &视图?
[英] How to use ng-switch as a router for my pages with ngRoute & ngView?
本文介绍了如何使用 ng-switch 作为我的页面的路由器和 ngRoute &视图?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的 Angular SPA 的高级框架.我的申请是关于大学学位课程.在那个工程页面有一个单独的左侧导航，它目前建立在 ng-switch 上，我想将其转换为路由.我如何仅使用 angular 的本机路由 angular-route.js 来做到这一点?
**app.js**(功能(){var app=angular.module("myCollege",['ngRoute']);app.config(['$routeProvider','$locationProvider',功能($routeProvider，$locationProvider){$routeProvider.什么时候('/'， {templateUrl:"app/views/home.html",控制器:homeController"，}.when('/engg', {templateUrl:"app/views/engineering.html",控制器:工程控制器"，}).when('/med', {templateUrl:"app/views/medical.html",控制器:医疗控制器"，})}]);
<块引用>
我使用 ng-switch 在engineering.html 中留下了导航，我想这样做转换为应用程序的子路径.这留下了工程导航页面不在 ngView 内.我如何使用 angular 来实现这一点原生 ngRoute/angular-route?
**engineering.html**<div nav ng-switch on="pagename()"><div ng-switch-when="土木工程"><div 民事指令>
<div ng-switch-when="计算机工程"><div 计算机指令>
<div ng-switch-when="纳米工程"><div纳米指令>
<div ng-switch-when="电气工程"><div 电气指令>
EngineeringController.js
(function() {var app =angular.module("collegeApp");varengineeringController=functino($scope,$rootscope,$location){$scope.pagename = function() {返回 $location.path();};app.controller("engineeringController",['$scope','$rootScope','$location',engineeringController])}());
上述逻辑对我不起作用.有人能告诉我哪里做错了吗?
解决方案
这不是一个好的做法，但如果您想使用 ng-switch，请执行以下操作:
在您的 html 中，例如您编写的:
<!-- 不要忘记引用您的应用程序和控制器 --><button ng-click="goTo('/page1')">转到第 1 页</button><button ng-click="goTo('/page2')">转到第 2 页</button><div nav ng-switch on="pagename()"><div ng-switch-when="'/page1'"></div><div ng-switch-when="'/page2'"></div><div ng-view>
在js
配置你的路由app.config(['$routeProvider',功能($routeProvider){$routeProvider.当('/page1'，{templateUrl: 'views/page1.html'}).当('/第2页'，{templateUrl: 'views/page2.html'}).除此以外({重定向到:'/'});}])
并在您的控制器中添加以下内容:
$scope.pagename = function() { return $location.path();};$scope.goTo = 函数(页面){$location.path(page);}
在上面的 html 中，ng-switch 将使用 $location.path() 变量来知道要显示哪个视图.
正如我所说，这不是一个好的做法，因为您的控制器不应该处理路由.
Here is the highlevel skeleton of my Angular SPA. My application is about college degree offerings. In that engineering page has a separate left nav which is currently built on ng-switch which i want to convert as route. How do i do that just using angular's native routing angular-route.js?
**app.js**
(function(){
var app=angular.module("myCollege",['ngRoute']);
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl:"app/views/home.html",
controller:"homeController",
}
.when('/engg', {
templateUrl:"app/views/engineering.html",
controller:"engineeringController",
})
.when('/med', {
templateUrl:"app/views/medical.html",
controller:"medicalController",
})
}]);
I have left nav in engineering.html using ng-switch which i want to
convert as sub-route of the application.This left nav of engineering
page is not inside of ngView. How do i acheive this using angular's
native ngRoute/angular-route?
**engineering.html**
<div nav ng-switch on="pagename()">
<div ng-switch-when="Civil Engineering">
<div civil-directive> </div>
</div>
<div ng-switch-when="Computer Engineering">
<div computer-directive> </div>
</div>
<div ng-switch-when="Nano Engineering">
<div nano-directive> </div>
</div>
<div ng-switch-when="Electrical Engineering">
<div electrical-directive> </div>
</div>
</div>
EngineeringController.js
(function() {
var app =angular.module("collegeApp");
var engineeringController= functino($scope,$rootscope,$location)
{
$scope.pagename = function() {
return $location.path();
};
app.controller("engineeringController",['$scope','$rootScope','$location',engineeringController])
}());
The above logic is not working for me. Can someone tell me where i am doing the wrong?
解决方案
Not a good practice but here's what you want to do if you want to use ng-switch:
In your html, as you write for example:
<!-- don't forget to reference your app and your controller -->
<button ng-click="goTo('/page1')">Go to page 1</button>
<button ng-click="goTo('/page2')">Go to page 2</button>
<div nav ng-switch on="pagename()">
<div ng-switch-when="'/page1'"></div>
<div ng-switch-when="'/page2'"></div>
</div>
<div ng-view> </div>
in js
Config your routes
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'views/page1.html'
}).
when('/page2', {
templateUrl: 'views/page2.html'
}).
otherwise({
redirectTo: '/'
});
}])
and add the following in your controller:
$scope.pagename = function() { return $location.path(); };
$scope.goTo = function(page){
$location.path(page);
}
In the html above, ng-switch will use the $location.path() variable to know which view to display.
As I said this is not a good practice, because your controller isn't suppose to deal with routes.
这篇关于如何使用 ng-switch 作为我的页面的路由器和 ngRoute &视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
