我正在使用 ngRoute 来执行我的 AngularJS 应用程序 (myApp) 的路由，但我遇到了一个问题:我不知道如何不应用我的 index.html 设计(包括我所有的侧边栏)到我的 login.html 页面，如果它被定义为 View ，它似乎默认应用。我想为我的 login.html 页面设计一个简单的设计:只有两个字段要填写，没有我的 index.html 的设计，它应用于我的应用程序。因此，我不知道如何进行路由来完成这样的任务。非常感谢。
<-- 这是我如何在 myApp 中进行路由的示例(仅针对一个 View - “/view1”)-->
app.js 示例:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ngCookies',
'myApp.view1',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
对于每个 View ，都有一个关联的 .js 文件，我在其中定义了它的路由和 Controller 。例如，对于 View “/view1” - view1.js:
'use strict';
angular.module('myApp.view1', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', function($scope) {
// something
}]);
还有我的 index.html 示例:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<script src="view1.js"></script>
<-- MORE SCRIPTS ARE LOADED -->
</head>
<body class="hamburg" ng-controller="MasterCtrl">
<-- SIDEBARS ARE DEFINED -->
<div id="content-wrapper">
<div class="page-content">
<!-- Main Content -->
<div class="row">
<div class="col-xs-12">
<div class="widget">
<div class="widget-body">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
最佳答案
鉴于上面的情况看起来你想要两个页面布局(页面设计或页面模板)，第一个现在用于index.html，第二个您想要在 login.html 中使用的一个，它只有两个字段需要填写。所以 angular-ui/ui-router (doc url: https://github.com/angular-ui/ui-router/wiki ) 可能是这个问题的解决方案。
其背后的想法是 ui-router 有一个非常强大的工具，名为 ui-view，您可以将其视为布局或模板。因此，当路径位于登录页面以外的任何页面上时，如 /index 或 /home 使用一个 ui-view，并在 /login 页面然后使用另一个不同的 ui-view。
举个粗略的例子: index.html 页面:
<html>
<head></head>
<body>
<div ui-view="layout"></div>
</body>
</html>
我假设您会重用头部部分，所以只需将正文中的所有内容都包装在原始 index.html 中，然后放入新的 index.html 中。与登录页面 login.html 相同。
配置文件:
$stateProvider
.state('index', {
url: '/index',
views: {
layout: {
templateUrl: "/path/to/index.html"
}
},
controller: 'indexController'
}
.state('login', {
url: '/login',
views: {
layout: {
templateUrl: "/path/to/login.html"
}
},
controller: 'loginController'
})
所以上面的代码做了什么和你用$routeProvider做的非常相似，它定义了哪个url使用哪个controller并加载哪个 View 。
希望对您有所帮助，有任何问题请告诉我。
关于javascript - 没有 Index.html 设计的登录页面 - ngRoute (AngularJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36625426/