ng-路线 [如何]
ng-route [HOW TO]
我尝试遵循 ng-route 的官方 angular 文档,但我迷路了。
所以希望大家多多指教
我尝试为我现有的带有 2 个控制器的简单站点添加路由。一个用于登录,一个用于显示数据。
所以我将这样的内容添加到 main.js:
var historyApp = angular.module('historyApp', ['ngRoute', 'LoginCtrl', 'HistoryCtrl']);
historyApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}).
when('/history', {
templateUrl: 'templates/history.html',
controller: 'HistoryCtrl'
}).
otherwise({
redirectTo: '/login'
});
}]);
其中 Loginctrl 和 HistoryCtrl 是非常简单的控制器,例如:
historyApp.controller('LoginCtrl', function ($scope, $http){
$scope.getToken = function(){
$http({
method: 'POST',
url: '../../api/v1/Oauth.php',
data: { login : $scope.username, password : $scope.password }
}).then(function successCallback(response) {
console.log(response);
}, function errorCallback(response) {
console.log(response);
});
};
});
配置已设置且控制器和模板存在(当然),
我还将 ng-route.js 添加到 login.html 和 history.html
但是当我打开 localhost/myProject/#/login
和 localhost/myProject#/login
时,我没有重定向到登录页面,它基本上只是显示我的根目录。
这个部分是如何工作的?
它来自根目录还是来自其他地方?
或者我做错了什么?
编辑:
添加屏幕:
确保您的页面中有 ng-view
指令:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
我尝试遵循 ng-route 的官方 angular 文档,但我迷路了。 所以希望大家多多指教
我尝试为我现有的带有 2 个控制器的简单站点添加路由。一个用于登录,一个用于显示数据。
所以我将这样的内容添加到 main.js:
var historyApp = angular.module('historyApp', ['ngRoute', 'LoginCtrl', 'HistoryCtrl']);
historyApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}).
when('/history', {
templateUrl: 'templates/history.html',
controller: 'HistoryCtrl'
}).
otherwise({
redirectTo: '/login'
});
}]);
其中 Loginctrl 和 HistoryCtrl 是非常简单的控制器,例如:
historyApp.controller('LoginCtrl', function ($scope, $http){
$scope.getToken = function(){
$http({
method: 'POST',
url: '../../api/v1/Oauth.php',
data: { login : $scope.username, password : $scope.password }
}).then(function successCallback(response) {
console.log(response);
}, function errorCallback(response) {
console.log(response);
});
};
});
配置已设置且控制器和模板存在(当然), 我还将 ng-route.js 添加到 login.html 和 history.html
但是当我打开 localhost/myProject/#/login
和 localhost/myProject#/login
时,我没有重定向到登录页面,它基本上只是显示我的根目录。
这个部分是如何工作的? 它来自根目录还是来自其他地方? 或者我做错了什么?
编辑:
添加屏幕:
确保您的页面中有 ng-view
指令:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>