Javascript 部分html控制器_Javascript_Html_Angularjs_Partial Views

Javascript 部分html控制器

javascript html angularjs

Javascript 部分html控制器,javascript,html,angularjs,partial-views,Javascript,Html,Angularjs,Partial Views,我有我的主应用程序控制器： var betsApp = angular.module('betsApp', ['ngRoute']); betsApp.config(function($routeProvider, $locationProvider) { $routeProvider.when('/', {templateUrl: 'pages/loginView.html'}) .when('/login', {templateUrl: 'pages/loginV

我有我的主应用程序控制器：

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与loginController连接起来？我希望登录控制器在一个单独的文件中

注意：
目前，我在使用上述代码时遇到一个错误，下面是错误：

注2

我想封装尽可能多的登录视图

您没有任何

LoginProvider

，因此此行：

function loginController($scope, $http, Login)

抛出一个错误。您应该将其包含在应用程序中：

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

我猜它应该放在你的

loginService.js

文件中

当然，您可以通过以下代码将url与特定视图连接：

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

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

更新

您还可以使用下一个代码执行此操作：

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

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

因此，在这种情况下，不需要路由，因为nav通常出现在每个页面上。

如果您希望控制器位于单独的文件中，请尝试以下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);
            });
    }
}

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);
            });
    }
 }

但是为什么我需要删除ng controller=“loginController”，我想封装所有登录视图控制器和服务。请看问题的第二个注释。我想您可以这样做。那么我如何将

'loginService'

依赖项移动到loginController？但这很奇怪，因为您更新的代码是loginView.html的代码，只需将您的服务包含在您的登录控制器模块中。