AngularJS，$ routeProvider
[英]AngularJS, $routeProvider
问题描述
I'm trying to learn how routes work in AngularJS to make a little application that allows users to login and write comments in a live feed. 
我正在尝试学习如何在AngularJS中使用路由，以制作一个小应用程序，该应用程序允许用户登录并在实时Feed中写评论。 However the whole concept of routes is a bit blurry for me atm and i can't get this right. 但是，路线的整个概念对我的atm来说有点模糊，我无法正确理解。
My standard index.html containing an ng-view and necessary scripts. 我的标准index.html包含ng-view和必要的脚本。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.8.2/angularfire.js"></script>
<script src="//cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
<script src="controller.js"></script>
<title>Test Login App</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
My controller containing module and routeprovider. 我的控制器包含模块和routeprovider。
var myApp = angular.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase',
'firebase.utils',
'simpleLogin'
]);
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: handleCtrl, templateUrl: 'handler.html' }).
when('/chatt', { controller: MyController, templateUrl: 'chat.html' }).
when('/login', { controller: loginCtrl, templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}])
myApp.controller('MyController', ['$scope', '$firebase',
function($scope, $firebase) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://ivproj.firebaseio.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebase(ref).$asArray();
//ADD MESSAGE METHOD
$scope.addMessage = function(e) {
//LISTEN FOR RETURN KEY
if (e.keyCode === 13 && $scope.msg) {
//ALLOW CUSTOM OR ANONYMOUS USER NAMES
var name = $scope.name || 'anonymous';
//ADD TO FIREBASE
$scope.messages.$add({
from: name,
body: $scope.msg
});
//RESET MESSAGE
$scope.msg = "";
}
}
}
]);
The $routeprovider function should direct me to handler that is a simple .html file containing two buttons that in turn redirects to other htmls. $ routeprovider函数应该将我定向到处理程序，该处理程序是一个简单的.html文件，其中包含两个按钮，这些按钮又重定向到其他html。
3 个解决方案
解决方案1
1 2014-10-08 16:00:47
I think you have the syntax of the otherwise call in your config section wrong. 我认为您在配置部分中的else调用的语法错误。 Change what you have for this instead: 更改您为此拥有的内容：
otherwise('/handler');
hope this helps... 希望这可以帮助...
解决方案2
1 2014-10-08 16:04:34
you are missing '' in controller part. 您在控制器部分缺少“”。 correct code should look like - 正确的代码应类似于-
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chatt', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
Make sure that you are referring the correct path in templateUrl. 确保您在templateUrl中引用正确的路径。
and look at my earlier post to get a better idea - How to navigate in Angular App 并查看我之前的文章以获得更好的主意- 如何在Angular App中导航
解决方案3
0 已采纳 2014-10-08 16:06:08
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
The $routeProvider.when() method in the above code actually creates a route with the given configuration. 上面代码中的$routeProvider.when()方法实际上创建具有给定配置的路由。 And the three .when() 's are creating three different routes. 三个.when()正在创建三个不同的路由。
But in your $routeProvider.otherwise('/handler') , you are telling angular to go to a route called /handler if the user tries to navigate anywhere outside the configured routes. 但是在$routeProvider.otherwise('/handler') ，您要告诉angular如果用户尝试导航已配置路线之外的任何地方，则转到名为/handler的路线。
The mistake you are doing here is, you did not define a route at /handler . 您在这里犯的错误是，您没有在/handler 定义路由。 So you need to first define that route and then use it in .otherwise() . 因此，您需要先定义该路由，然后在.otherwise()使用它。
Try changing your configuration to reflect the below. 尝试更改您的配置以反映以下内容。
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/handler', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.