current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 2 down vote favorite

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!

share|improve this question
up vote 2 down vote accepted

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.

share|improve this answer
1  
Thanks it worked!!! will accept this answer asap – vlio20 Jun 5 '14 at 18:30
    
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. – vlio20 Jun 5 '14 at 18:32
    
I guess you can do so. – zishe Jun 5 '14 at 18:36
    
So how can I move the 'loginService' dependency to the loginController? – vlio20 Jun 5 '14 at 18:38
    
I updated the answer for you purpose. – zishe Jun 5 '14 at 18:38
up vote 1 down vote

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);
            });
    }
 }
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.