我有我的主应用程序 Controller :
var betsApp = angular.module('betsApp', ['ngRoute']);
betsApp.config(function($routeProvider, $locationProvider)
{
$routeProvider.when('/', {templateUrl: 'pages/loginView.html'})
.when('/login', {templateUrl: 'pages/loginView.html'});
});
betsApp.controller('appCtrl', function($scope)
{
});
这是index.html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/controllers/loginController.js"></script>
<script src="js/services/loginService.js"></script>
<script src="js/controllers/AppController.js"></script>
<head>
<title>Bets Application</title>
</head>
<body ng-app="betsApp" ng-controller="appCtrl">
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
我有这个loginView.html，它是部分的:
<div ng-controller="loginController">
<h1>Login</h1>
<hr>
<form>
<div class="form-group">
<input type="email" ng-model="credentials.email" value="{{credentials.email}}">
</div>
<div class="form-group">
<input type="password" ng-model="credentials.password" value="{{credentials.password}}">
</div>
<div class="form-group">
<input type="button" value="Login" ng-click="doLogin()" class="btn btn-primary">
</div>
</form>
</div>
这是loginController.js:
function loginController($scope, $http, Login)
{
$scope.credentials =
{
email: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f482989d9bc6c4b49399959d98da979b99" rel="noreferrer noopener nofollow">[email protected]</a>',
password: 'vlad1q'
};
$scope.doLogin = function()
{
alert();
Login.doLogin($scope.credentials)
.success(function(response)
{
if(response.response == 'success')
{
alert(response.data);
}
})
.error(function(error)
{
alert(error);
});
}
}
我的问题是:是否可以将loginView与loginController连接起来？我希望登录 Controller 位于单独的文件中？
注意:
目前，我在使用上述代码时遇到错误，错误如下:
https://docs.angularjs.org/error/$injector/unpr?p0=LoginProvider
注2
我想封装尽可能多的登录 View !
最佳答案
您没有任何LoginProvider，因此这一行:
function loginController($scope, $http, Login)
抛出错误。您应该将其包含在您的应用程序中:
var betsApp = angular.module('betsApp', ['ngRoute', 'loginService']);
我猜它放在您的 loginService.js 文件中。
当然，您可以通过以下代码将您的网址与特定 View 连接起来:
$routeProvider.when('/', {templateUrl: 'pages/loginView.html', controller: 'loginController'})
更新
您也可以使用下一个代码来做到这一点:
<div ng-controller="loginController">
<div ng-include src="'pages/loginView.html'"></div>
</div>
因此，在这种情况下不需要路由，因为导航通常出现在每个页面上。
关于javascript - 部分 html Controller Angular，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24067383/