Question

我有我的主app控制器：

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: 'vlio20@gmail.com',
        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连接？我希望登录控制器在一个单独的文件中？

注意：
现在我在使用上面描述的代码时遇到错误，这里是错误： https://docs.angularjs.org/error/$injector/unpr?p0=LoginProvider

注2
我想尽可能地封装登录视图！

Answer 1

你没有LoginProvider，所以这一行：

function loginController($scope, $http, Login)

引发错误。你应该把它包含在你的应用程序中：

var betsApp = angular.module('betsApp', ['ngRoute', 'loginService']);

我想将其放在您的loginService.js文件中。

当然，您可以通过下一个代码将您的网址与特定视图相关联：

$routeProvider.when('/', {templateUrl: 'pages/loginView.html', controller: 'loginController'})

<强>更新

您也可以使用下一个代码：

<div ng-controller="loginController">
  <div ng-include src="'pages/loginView.html'"></div>
</div>

因此，在这种情况下，路线中没有必要，导致导航通常出现在每个页面上。

Answer 2

如果您希望控制器位于单独的文件中，请尝试使用loginController.js：

angular.module('betsApp').controller('loginController', function($scope, $http, Login)
 {
    $scope.credentials =
    {
        email: 'vlio20@gmail.com',
        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);
            });
    }
 }

部分html控制器Angular

2 个答案: