partial html controller Angular

Question

I have my main app 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)
{

});

Here is the 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>

and I have this loginView.html which is partial:

<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>

Here is the loginController.js:

function loginController($scope, $http, Login)
{
    $scope.credentials =
    {
        email: '[email protected]',
        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);
            });
    }
}

My question is: is it possible to connect the loginView with the loginController? I wish the login controller be in a separate file?

Note:
For now I am getting an error while using the code as described above, here is the error: https://docs.angularjs.org/error/$injector/unpr?p0=LoginProvider

Note 2
I want to encapsulate as much as possible login view!

Alexander Kireyev · Accepted Answer · 2014-06-05 18:38:28Z

1

You don't have any LoginProvider, so this line:

function loginController($scope, $http, Login)

Throws an error. You should include it in you app:

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

Which i guess placed in your loginService.js file.

Of course you can connect you url with specific view by next code:

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

Update

Also you can do it with next code:

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

So, there is no need in routes in this case, cause nav usually present on every page.

edited Jun 5, 2014 at 18:38

answered Jun 5, 2014 at 18:26

Alexander Kireyev

10.8k13 gold badges68 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

vlio20 Over a year ago

But why I need to remove ng-controller="loginController", I want to encapsulate all login view controllers and services. Look at the second note of the question.

Alexander Kireyev Over a year ago

I guess you can do so.

vlio20 Over a year ago

So how can I move the 'loginService' dependency to the loginController?

vlio20 Over a year ago

But it is odd, Because the code of your update is the code of loginView.html

Alexander Kireyev Over a year ago

Just include you service in your login controller module.

|

klode · Accepted Answer · 2014-06-05 18:37:18Z

If you want your controller to be in a separate file, try this loginController.js:

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

Collectives™ on Stack Overflow

partial html controller Angular

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related