[英]page white with routing in angular js
我在路由angular js时遇到问题,我使用的是angular js版本1.6.4
index.html的:
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<title>authentification with Angular JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="container" ng-app="starter" >
<a href="#!outside">Outside</a>
<a href="#!outside.register">register</a>
<a href="#!outside.login">Login</a>
<a href="#!inside">Inside</a>
<ng-view></ng-view>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
<script src="service.js"></script>
<script src="constants.js"></script>
</body>
</html>
app.js:
var e = angular.module('starter',[])
e.config(function($routeProvider,$urlRouterProvider){
$routeProvider
.when('/outside',{
//url: '/outside',
abstract: true,
templateUrl: 'outside.html'
})
.when('/outside.login',{
//url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
.when('/outside.register',{
//url: '/login',
templateUrl: 'register.html',
controller: 'RegisterCtrl'
})
.when('/inside',{
//url: '/inside',
templateUrl: 'inside.html',
controller: 'InsideCtrl'
});
//$urlRouterProvider.otherwise('/outside/login');
});
e.run(function($rootScope,$state,AuthService,AUTH_EVENTS){
$rootScope.$on('$stateChangeStar',function(event, next, nextParams, fromState){
if(!AuthService.isAuthenticated()) {
if (next.name !== 'outside.login' && next.name !== 'outside.register'){
event.preventDefault();
$state.go('outside.login');
}
}
});
});
例如,这是页面login.html:
<div class="form-group">
<label for="Login">Login</label>
<input type="text" class="form-control" id="username" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="Password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-primary" ng-click="login()">Login</button> <br><br>
<button type="submit" class="btn btn-primary" ui-serf="outside.register">Register</button>
但是,例如,当我单击链接登录时,我有任何结果,页面是白色的
请帮助我解决此问题,并感谢高级
您需要将ngRoute添加为依赖项。 这条线
var e = angular.module('starter',[])
应该
var e = angular.module('starter',['ngRoute']);
这是一个基本的例子
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.html" }) .when("/test", { templateUrl : "test.html" }) .when('/outside',{ //url: '/outside', abstract: true }) .when('/outside.login',{ //url: '/login', templateUrl: 'login.html', //controller: 'LoginCtrl' }) .when('/outside.register',{ //url: '/login', templateUrl: 'register.html', //controller: 'RegisterCtrl' }); });
<!DOCTYPE html> <html> <head> <title>authentification with Angular JS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="app.js"></script> </head> <body class="container" ng-app="myApp"> <a href="#/!">Main</a> <a href="#!test">test</a> <a href="#!outside.login">login</a> <a href="#!outside.register">register</a> <div ng-view></div> <script type="text/ng-template" id="test.html"> test </script> <script type="text/ng-template" id="main.html"> main </script> <script type="text/ng-template" id="login.html"> login </script> <script type="text/ng-template" id="register.html"> register </script> </body> </html>
注意: 如果您在使用白页时遇到问题,则很可能是您未正确指定templateUrl
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.