我刚刚开始在AngularJs/Bootstrap中构建原型.我是角色的新手,但它似乎很有趣,可以评估即将推出的一些webprojects.第1步是使用一些简单的Loginform来处理硬编码值,而不用费心与后端服务进行通信.
但是,我阅读了一些教程,但无法使路由工作,无论我传递多少次,神秘变量$ location总是未定义的.也许是老式的使用呢？我试过这个网站的一些例子,但没有一个工作,$位置在我们中间不再是它似乎？最后一个例子我试过:
angular.module('myApp.controllers', []).
controller('loginController', ['$scope', function($scope, $route, $routeParams, $location) {
$scope.auth = function() {
//check something useful
$location.url('/view2');
};
}])
如果某人有一个简单而有效的示例(或者一个可靠的信息源的url)表单和一个控制器使用路由到另一个部分,我会很高兴.
问候
我一直在努力解决同样的问题.我发布了这个问题.答案有所启发.然后,我可以强制用户登录,然后他们才能访问导航栏上的其他链接.然后我在登录屏幕上看到导航栏的问题.所以我创建了一个解决方法:
1)我拆分页面:使用ng-include我能够login.html默认加载.login.html并index.html没有ng-view.
2)用户通过身份验证后,ng-view必须包含在内,以便导航所需的所有视图都能正常工作
的index.html
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppCtrl">
<div ng-include="template.url"></div>
</body>
</html>
的login.html
<h1>Login Page</h1>
<form ng-submit="login(username, password)">
<label>User name</label>
<input type="text" ng-model="username" class="ng-pristine ng-valid">
<label>Password</label>
<input type="password" ng-model="password" class="ng-pristine ng-valid">
<br/>
{{loginError}} {{loggedUser}}
<br/><br/>
<button class="btn btn-success" ng-click="">Submit</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</form>
然后,如果身份验证通过,我更改模板(ng-include)并创建home.html默认页面
app.controller('AppCtrl', function($scope, authentication) {
$scope.templates =
[
{ url: 'login.html' },
{ url: 'home.html' }
];
$scope.template = $scope.templates[0];
$scope.login = function (username, password) {
if ( username === 'admin' && password === '1234') {
authentication.isAuthenticated = true;
$scope.template = $scope.templates[1];
$scope.user = username;
} else {
$scope.loginError = "Invalid username/password combination";
};
};
};
Home.html具有ng-view通常的功能,用户可以访问其他页面.
这是我到目前为止,这是一个工作的例子,希望它有所帮助.