Я создал index.html, как показано ниже:
<html lang="en" ng-app="bootProject" >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SASS / Home
</title>
<script src="../../node_modules/angular/angular.min.js"></script>
<script src="../../node_modules/angular-route/angular-route.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../dist/css/main.css" rel="stylesheet">
<!-- Custom styles for font-awesome css -->
<link href="../../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div ng-view></div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
angular-route.min.js
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../javascript/main.js"></script>
<script src="//localhost:35729/livereload.js"></script>
</body>
</html>
Существует "home.html" с навигационной панелью, которую я хочу щелкнуть на вкладке "войти в систему" и перейти на страницу "log.html".
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#register">Register</a></li>
<li><a href="#log">Login</a></li>
<div><ng-view></div>
</ul>
</div>
И это мой "main.js":
// Module
var weatherApp = angular.module('bootProject',['ngRoute']);
// Route
weatherApp.config(function($routeProvider){
$routeProvider
.when('/home',{
templateUrl:'http://localhost:1337/dist/templates/home.html',
controller: 'homeController'
})
.when('/log',{
templateUrl:'http://localhost:1337/dist/templates/log.html',
controller: 'logController'
})
.when('/dashboard',{
templateUrl:'http://localhost:1337/dist/templates/home.html',
controller: 'dashboardController'
});
});
//Controllers
weatherApp.controller('logController', [ '$scope', '$location',function($scope,$location){
$scope.submit= function(){
var uname = $scope.username;
console.log(uname);
var pass = $scope.password;
if($scope.username =='admin' && $scope.password =='admin'){
$location.path("/dashboard");
}
};
}]);
Когда я открываю свой проект в localhost/dist, он показывает мне только одну строку, которая является "angular-route.min.js", но когда я открываю ее в localhost/src, она показывает мне правильные страницы, но все же я вижу эту строку в log.html.
Пожалуйста, дайте мне знать, что моя ошибка?
Я не вижу .otherwise
в вашей маршрутизации. Вы должны использовать. .otherwise
чтобы поймать маршруты, которые не соответствуют тем, которые вы указали.
например, вы можете использовать .otherwise({redirectTo:'/home'});
angular.min.js
, она просто отображает это, потому что по какой-то причине у вас есть этот текст в середине тегов скрипта в теле. У вас нет маршрута, который соответствует URL-адресу, по которому вы просматриваете, и нет..otherwise
, элементng-view
остается пустым.