这是我的 Angular SPA 的高级框架。我的申请是关于大学学位类(class)的。在该工程页面中有一个单独的左侧导航,当前构建在 ng-switch 上,我想将其转换为路线。我如何仅使用 Angular 的 native 路由 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])
}());
以上逻辑对我来说不起作用。有人可以告诉我哪里做错了吗?
最佳答案
这不是一个好的做法,但如果你想使用 ng-switch,这就是你想要做的:
在您的html中,例如您所写的:
<!-- 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>
在js中
Config your routes
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'views/page1.html'
}).
when('/page2', {
templateUrl: 'views/page2.html'
}).
otherwise({
redirectTo: '/'
});
}])
并在 Controller 中添加以下内容:
$scope.pagename = function() { return $location.path(); };
$scope.goTo = function(page){
$location.path(page);
}
在上面的 html 中,ng-switch 将使用 $location.path() 变量来知道要显示哪个 View 。
正如我所说,这不是一个好的做法,因为您的 Controller 不应该处理路由。
关于javascript - 如何使用 ng-switch 作为我的页面的路由器 ngRoute 和 ngView?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36438211/