正在使用$location.path(.)路由ng视图
Routing ng-view with $location.path(..)
我正在尝试实现另一个StackOverflow问题的答案,使用标题中的链接重定向Index.html的ng视图。
当通过:http://server/#/page
直接加载页面时,应用程序工作正常(没有控制台错误,页面渲染正确,angular/js逻辑运行正确)。当我遍历逻辑(进入角度库)时,我的路由逻辑返回"undefined",将我传递到http://server/#
,这是一个虚无的伟大页面,除了页眉和页脚正确呈现。
我不确定我做错了什么。
我会有选择地选择我包含的代码(只是为了保持合理的长度),但如果我遗漏了一些重要的内容,请不要犹豫。
Index.html:
<!DOCTYPE html>
<html ng-app="passwordResetApp">
<head>
<title>COP Azure B2B Password Reset</title>
<meta charset="utf-8"/>
<!--Lib-->
<!--ng base-->
<script src="app/lib.bower/angular/angular.js"></script>
<script src="app/lib.bower/angular-route/angular-route.js"></script>
<!--ui grid-->
<script src="app/lib.bower/angular-ui-grid/ui-grid.min.js"></script>
<link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
<!--Misc-->
<link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css" />
<!--Custom-->
<script src="app/app.js"></script>
<!--Custom - Services-->
<script src="app/services/resetRequestService.js"></script>
<script src="app/services/adValidationService.js"></script>
<!--Custom - Controllers-->
<script src="app/controllers/HeaderController.js"></script>
<script src="app/controllers/PasswordResetRequestController.js"></script>
<!--Custom modules-->
<script src="app/modules/header.js"></script>
<!--Custom - Other-->
<link rel="stylesheet" href="app/css/passwordReset.css"/>
</head>
<body ng-app>
<div class="container">
<!--<div ng-include="'app/views/_header.html'"></div>-->
<div header></div>
<div class="viewWrapper">
<div ng-view></div>
</div>
<div class="push"></div>
</div>
<div ng-include="'app/views/_footer.html'"></div>
</body>
</html>
app.js:
(function() {
'use strict';
var app = angular.module('passwordResetApp', ['ngRoute']);
app
.config(
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/passwordReset.html',
controller: 'ResetRequestController as vm',
caseInsensitiveMatch: true
}).when('userSearch', {
templateUrl: 'app/views/userSearch.html',
controller: 'ResetRequestController as vm',
caseInsensitiveMatch: true
}).otherwise({ redirectTo: '/' });
}
);
app.directive('header',
function() {
return {
restrict: 'A',
//This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
replace: true,
templateUrl: 'app/views/_header.html',
controller: 'HeaderController as vm',
caseInsensitiveMatch: true
}
});
app.run([
'$route', '$http', '$rootScope',
function ($route, $http, $rootScope) {
$http.defaults.withCredentials = true;
$rootScope.getUrlPath = function (url) {
return baseUrl + url;
};
}
]);
}());
_header.html:
<header id="pageHeader">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-2 cop-logo-container">
<img id="cop-logo" src="app/img/ConocoPhillips_Logo.png" />
</div>
<div class="col-sm-4 col-md-6 col-lg-8">
<h2>Azure B2B Password Reset</h2>
{{vm.currentUser.name}}
</div>
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="pull-right" style="padding: 20px">
<div ng-if="vm.currentUser" id="headerUser">
<p>Welcome, <span class="username">{{vm.currentUser.name}}</span></p>
</div>
<div ng-if="!vm.currentUser">
<div class="btn btn-primary">Login</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<ul ng-if="vm.currentUser" class="nav navbar-nav">
<li><a href="#" ng-click="vm.changeView('home')">Home</a></li>
<li><a href="#" ng-click="vm.changeView('userSearch')">Search Users</a></li>
<li><a href="#" ng-click="vm.logout()">Logout</a></li>
</ul>
<ul ng-if="!vm.currentUser" class="nav navbar-nav">
<li><a href="#" ng-click="vm.changeView('home')">Home</a></li>
</ul>
</div>
</div>
</nav>
</header>
HeaderController.js:
(function() {
'use strict';
var app = angular.module('passwordResetApp');
var headerController = function ($scope, $location) {
var vm = this;
vm.currentUser = {};
vm.currentUser.name = 'caninc';
vm.changeView = function(view) {
$location.path(view);
}
};
app.controller('HeaderController', headerController);
}());
问题与<li><a href="#" ng-click="vm.changeView('home')">Home</a></li>
有关
#
因此单击时http://server/#不http://server/#/page
相关文章:
- 正在使用$location.path(.)路由ng视图
- 当在ng视图中加载新路由时,Tabbing(tabindex)针对错误的元素
- AngularJS路由在初次点击时没有加载ng模板
- ng路由injectore:modulerr中出错[$injector:modulerr]http://errors.a
- 角度.js - 识别通过路由或 ng 控制器调用的控制器
- ng-animate 当 ng-view 通过路由更新时
- 使用ng-include调用控制器时AngularJS路由解析
- 避免使用ng路由对无散列url进行路由
- 触发特定路由的其他指令,如ng-init或事件,如stateChangeStart
- ng视图路由模板是否反映了ajax请求所做的更改
- 在路由配置中定义 AngularJS 中的 ng-view 动画
- ng 路由不起作用指令
- ng路由不起作用.我不知道错误是什么,因为控制台中没有显示任何内容
- 角度路由未填充 ng 视图
- ng路由白色页面后刷新页面显示
- ng令牌身份验证和路由权限
- 如何使用角度路由在部分 HTML 文件中使用 NG-Repeat
- ng路由传递参数不起作用
- 尝试角度ng路由时出错
- 引导轮播不适用于角度 ng 路由