如何更改ng-view
如何更改ng-view
提问于 2017-04-27 01:38:33
我正在尝试做一个Angular JS应用程序，但我有一些问题。
这是我的index.html代码
<body ng-app="StockApp">
<div id="wrapper" class="flex-column">
<div ng-hide="hideNavBar" id="navbarundsub">
</div>
<div ng-show="hideStockInformation" id="stockInformation">
</div>
<div id="main" class="flex-row">
<div ng-hide="hideSideMenu" id="sidemenu">
</div>
<div ng-hide="hideSideMenuUser" id="sidemenuUser">
</div>
<!--CONTENIDO-->
<ng-view></ng-view>
</div>
</div>
</body>我的问题是，我的第一个页面是一个登录页面，所以我不想在div中显示de ng- login.html所在的视图，所以我不知道如何更改ng-view，或者如何将登录信息传递给另一个页面。我不知道。
希望有人能帮我。
回答 2
Stack Overflow用户
发布于 2017-04-27 02:01:09
ng-view是Angular1的重要指令之一。
我们需要在依赖注入中注入ngRoute。在这里，我们需要维护这样的路由
请维护这样的路线
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'login.htm',
controller: 'LoginController'
}).
when('/employee', {
templateUrl: 'employee.htm',
controller: 'EmployeeController'
}).
otherwise({
redirectTo: '/login'
});
}]);Stack Overflow用户
发布于 2017-05-02 19:40:59
您需要创建两个角模板，一个用于登录，另一个用于仪表板。
登录模板不包含任何菜单和标题，其中仪表板模板同时包含菜单和标题。
您必须将您的路由从一个模板页面更改到另一个模板页面。为此，您需要使用ui-router angular路由ng- module.using，您不能将路由从一个模板页面更改到另一个模板页面。
ui-路由器模块：
https://github.com/angular-ui/ui-router/wiki
app.js
angular
.module('myapp', [
'ui.router',
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard/Home');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard/main.html',
})
.state('home', {
parent:'dashboard',
url: '/Home',
controller: 'MainCtrl',
templateUrl: 'views/pages/blank.html',
}
})
.state('login', {
templateUrl: 'views/pages/login.html',
url: '/login'
})
}
]);index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/libs/bootstrap.min.css" />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/sb-admin-2.css">
<link rel="stylesheet" href="styles/timeline.css">
<link rel="stylesheet" href="styles/libs/metisMenu.min.css">
<link rel="stylesheet" href="styles/libs/loading-bar.min.css">
<link rel="stylesheet" href="styles/libs/font-awesome.min.css"
type="text/css">
<!-- endbuild -->
<!-- bower:js -->
<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/metisMenu.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/libs/ocLazyLoad.min.js"></script>
<script src="js/libs/loading-bar.min.js"></script>
<script src="js/libs/ui-bootstrap-tpls.min.js"></script>
<!-- endbower -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<!-- endbuild -->
</head>
<body>
<div ng-app="ApsilonApp">
<div ui-view></div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43641043
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号