Angularjs ui路由器-未加载
我一直在使用ngRoute直到现在，但我在ui路由器上看到了一些有趣的东西，我想使用这些东西，但是当尝试切换时，这些部分将不再加载，尽管我的控制台中没有出现任何错误 这是我的密码： app.js index.ejsAngularjs ui路由器-未加载,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我一直在使用ngRoute直到现在，但我在ui路由器上看到了一些有趣的东西，我想使用这些东西，但是当尝试切换时，这些部分将不再加载，尽管我的控制台中没有出现任何错误 这是我的密码： app.js index.ejs <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" co
<!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>
$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("/");
您已经命名了ui视图，这就是它们不显示的原因。。为了让他们知道你需要
<div ui-view='profile'></div>
您已经命名了ui视图，这就是它们不显示的原因。。为了让他们知道你需要
<div ui-view='profile'></div>
从状态中删除视图，如下所示：
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
从状态中删除视图，如下所示：
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
什么意思？这里说明我需要将ui视图放在div中才能显示它们。很抱歉，我的回答中没有显示html，我更新了它所有视图都已命名，但ui视图没有任何名称。要么不命名您的视图，要么命名您的ui viewshow我会使其成为动态的吗？我不希望它只显示配置文件，我希望它根据我的链接显示不同的配置文件。然后，当你定义状态时，不要命名你的视图。你是什么意思？这里说明我需要将ui视图放在div中才能显示它们。很抱歉，我的回答中没有显示html，我更新了它所有视图都已命名，但ui视图没有任何名称。要么不命名您的视图，要么命名您的ui viewshow我会使其成为动态的吗？我不希望它只显示配置文件，我希望它根据我的链接显示不同的配置文件。然后，当你定义状态时，不要命名你的ViewsHanks，我还编辑了“var app=angular.module（'controllers'，[]）；因为它似乎引起了问题，并将我所有的控制器都更改为myApp.controllerThanks，所以我还编辑了“var-app=angular.module（'controllers'，[]）；因为它似乎导致了问题，并将我的所有控制器都更改为myApp.controller
.state('home', {
url: '/',
views: {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}
})
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})