没有Index.html设计的登录页面 - ngRoute（AngularJS） [英] Login Page without Index.html Design - ngRoute (AngularJS)
问题描述
我使用 ngRoute 来执行我的AngularJS应用程序（myApp）的路由，但是我遇到了一个问题：我不知道如何不应用我的 index.html 设计（包括我所有的侧边栏）到我的 login.html 页面，这似乎在默认情况下应用被定义为一个视图。我想为我的 login.html 页面设计一个简单的设计：只填写两个字段，而不用设计我的 index.html ，它应用于myApp中的所有视图。因此，我不知道如何做我的路由来完成这样的任务。非常感谢。
< - 这是我在myApp中执行路由的示例（仅适用于一个视图 - / view1） - >
app.js 的样本
'use strict';
//声明取决于视图和组件的应用程序级别模块
angular.module（'myApp'，[
'ngRoute'，$ b $'ngResource'，
'ui.bootstrap'，
'ngCookies'，
'myApp.view1'，
]）
.config（['$ routeProvider'，function（$ routeProvider）{
$ routeProvider.otherwise（{redirectTo：'/ view1'}）;
}]）;
对于每个视图，都有一个.js文件关联，我在其中定义了它的路由和控制器。例如，对于view/ view1 - view1.js ：
'use strict';
$ b。b .config（['$ routeProvider'，function（$ routeProvider））
$ b angular.module（'myApp.view1'，['ngRoute'，'ngResource']）
。 {
$ routeProvider.when（'/ view1'，{
templateUrl：'view1.html'，
controller：'View1Ctrl'
}）;
}] ）
$ b $ .controller（'View1Ctrl'，['$ scope'，function（$ scope）{
// something
}]）;
我的 index.html ：
<！doctype html>
< html lang =enng-app =myApp>
< head>
< script src =view1.js>< / script>
< - 更多的脚本已加载 - >
< / head>
< body class =hamburgng-controller =MasterCtrl>
< - 边框已定义 - >
< div id =content-wrapper>
< div class =page-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-查看，您可以将其视为布局或模板。因此，当路径位于登录页面以外的任何页面（如 / index 或 / home ）时，请使用一个 ui-view ，然后在 / login 页面上，然后使用另一个不同的 ui-view 。
举个简单的例子：
index.html页面：
< HTML>
< head>< / head>
< body>
< div ui-view =layout>< / div>
< / body>
< / html>
我假设您会重复使用头部部分， code> index.html 并放入新的 index.html 中。与登录页面相同 login.html 。
配置文件：
$ stateProvider
.state（'index'，{
url：'/ index'，
views：{
布局：{
templateUrl：/path/to/index.html
}
}，
控制器：'indexController'
}
.state（'login'，{
url：'/ login'，
views：{
layout：{
templateUrl：/path/to/login.html
}，
控制器：'loginController'
}）
那么上面的代码与你使用 $ routeProvider 非常相似，它定义了哪个 url 使用哪个控制器并加载哪个视图。
希望这可以帮助你，如果有任何问题请告诉我。
I'm using ngRoute to do the routing of my AngularJS application (myApp) but I have a problem: I don't know how to NOT APPLY my index.html design (with all my sidebars) to my login.html page, which seems to be applied by default if it is defined as a view. I want a simple design for my login.html page: only two fields to fill out, without the design of my index.html, which is applied to all the views in myApp. Thereby, I don't know how to do my routing to accomplish such task. Thank you very much.
<-- This is a sample of how I do my routing in myApp (for only one view - "/view1") -->
Sample of 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'});
}]);
For each view there is a .js file associated where I defined its routing and controllers. For instance, for 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
}]);
And a sample of my 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>
Given the situation above looks like you want two page layout (page design or page template), the first one is now used in index.html, and the second one you want to use in login.html which just has two fields to fill out. So angular-ui/ui-router (doc url: https://github.com/angular-ui/ui-router/wiki) could be the solution to this issue.
The idea behind that is ui-router has a very powerful tool named ui-view which you can see it as a layout or template. So when the path is on any page other than login page like /index or /home use one ui-view, and on /login page then use another different ui-view.
For a rough example: index.html page:
<html>
<head></head>
<body>
<div ui-view="layout"></div>
</body>
</html>
I assume you will reuse the head part, so just wrap every thing from the body in the original index.html and put into the new index.html. Same to the login page login.html.
config file:
$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'
})
So what does the code above do is very similar to what you did with $routeProvider, it defines on which url use which controller and to load which view.
Hope this can help you, if any question let me know please.
这篇关于没有Index.html设计的登录页面 - ngRoute（AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
