到目前为止，我一直在使用ngRoute，但是我在ui-router上看到了一些我想使用的有趣东西，但是当尝试进行切换时，部分内容将不再加载，尽管我的控制台中没有任何错误提示。
这是我的代码：app.js
/* global angular */
var myApp = angular.module('myApp',
[
'controllers',
'ui.router',
'ngResource',
'auth0',
'angular-storage',
'angular-jwt'
]);
myApp.run(function($rootScope, auth, store, jwtHelper, $location) {
auth.hookEvents();
...
});
myApp.config(function($stateProvider, authProvider, $httpProvider,
jwtInterceptorProvider, $urlRouterProvider, $locationProvider){
authProvider.init({
domain: 'DOMAIN',
clientID: 'CLIENT',
loginUrl: '/'
});
$stateProvider
.state('home', {
url: '/',
views: {
'home': {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}
}
})
.state('dash', {
url: '/dashboard',
views: {
'dash': {
templateUrl: 'partials/dashboard.html',
controller: 'controllers/dashCtrl'
}
}
})
.state('profile', {
url: '/profile',
views: {
'profile': {
templateUrl: 'partials/profile.html',
controller: 'profileCtrl'
}
}
})
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode({enabled:true, requireBase: false});
...
});
index.ejs
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="../../favicon.ico">
<title>Birdspotter</title>
<!-- Bootstrap core CSS -->
<link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!-- AngularJS -->
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-resource/angular-resource.js"></script>
<!-- Angular cookie wrapper library for client cookies -->
<script type="text/javascript" src="lib/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<!-- Angular wrapper for localStorage and sessionStorage. Defaults to ng-cookies if not available -->
<script type="text/javascript" src="lib/a0-angular-storage/dist/angular-storage.js"></script>
<!-- Angular wrapper library for JWT-->
<script type="text/javascript" src="lib/angular-jwt/dist/angular-jwt.js"></script>
<!-- Auth0's lock widget library -->
<script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.0.js"></script>
<!-- Auth0's Angular SDK Library -->
<script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/navCtrl.js"></script>
<script type="text/javascript" src="js/controllers/homeCtrl.js"></script>
<script type="text/javascript" src="js/controllers/dashCtrl.js"></script>
<script type="text/javascript" src="js/controllers/captureCtrl.js"></script>
<script type="text/javascript" src="js/controllers/profileCtrl.js"></script>
<!-- Services -->
<script type="text/javascript" src="js/services/Api.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default navbar-static-top" ng-controller="navCtrl">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Birdspotter</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-if="isAuthenticated" ng-class="{active: isActive('/dashboard')}"><a href="/dashboard">Dashboard</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="!isAuthenticated"><a href="/" ng-click="login()">Login</a></li>
<li ng-if="isAuthenticated" ng-class="{active: isActive('/profile')}"><a href="/profile">Profile</a></li>
<li ng-if="isAuthenticated"><a href="/" ng-click="logout()">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Container -->
<div class="container">
<div ui-view>
</div>
</div>
<!-- End Container -->
<!-- Bootstrap core JavaScript -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
并加载我的仪表板（例如）：
//controller
/* global angular*/
var app = angular.module('controllers', []);
app.controller('dashCtrl', function($scope){
});
//html (dashboard.html)
<h1> Dashboard</h1>
编辑：
修复了“未加载部分”部分，但是进行了编辑，但出现以下错误：
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
TypeError: Cannot create property 'resolveAs' on string 'partials/home.html'
这是我目前的代码：
$stateProvider
.state('home', {
url: '/',
views: {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}
})
.state('dash', {
url: '/dashboard',
views: {
templateUrl: 'partials/dashboard.html',
controller: 'homeCtrl'
}
})
.state('capture', {
url: '/capture',
views: {
templateUrl: 'partials/capture.html',
controller: 'captureCtrl'
}
})
.state('profile', {
url: '/profile',
views: {
templateUrl: 'partials/profile.html',
controller: 'profileCtrl'
}
})
$urlRouterProvider.otherwise("/");
从状态中删除视图，如下所示：
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句