CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-routingangularjs-controller
AGE
AGE

Reputation: 3792

AngularJS controllers in separate files not identifying the scope

I am learning AngularJS and so far I have the beginnings of a skeleton app, with a main index page and two templates: a login page and a home page which have very simple controllers. I have not reached deeper in the skeleton yet so I am trying to accomplish is much more basic than say authentication.

The reason why I coded the way I did is to try to apply a concept I read about in my time learning AngularJS; which is to modularize your code by giving each template (or partial) it's own controller in it's own JS file. I believe that this is a best practice that I should apply early on, as this will potentially grow a lot into the future. That is the reason why I am staying away from putting my controllers in a single file, which I know works quite well.

Now without further ado, please look at the following code for a reference of where I stand currently:

index.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyApp</title>
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div ng-view>
        <!-- loaded view here -->
    </div>

    <!-- JS imports -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
    <script src="assets/js/app.js"></script>
</body>
</html>

app.js

angular.module('MyApp', [
    'ngRoute'
])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when("/login", {
        templateUrl: 'assets/partials/login.html',
        controller: 'LoginCtrl'
    })
    .when("/home", {
        templateUrl: 'assets/partials/home.html',
        controller: 'HomeCtrl'
    })
    .otherwise({ 
        redirectTo: '/login'
    }); 
}]);

login.html, home.html

<div class="container-fluid text-center">
    <h2>{{pageTitle}}</h2>
</div>

login.js

angular.module('MyApp')

.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.pageTitle = "Hello! Sign In";
}]);

home.js

angular.module('MyApp')

.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.pageTitle = "Welcome to the Home Page!";
}]);

So what is the issue I am working through? {{pageTitle}} is what is being displayed when the view is loaded, rather than the actual value passed in through the scope. Please let me know what is wrong here, I am open to all suggestions regarding how to improve my code, all help is highly appreciated!

Upvotes: 0

Views: 983

Answers (2)

Saqueib
Saqueib

Reputation: 3520

You need to include the home.js and login.js controller in html after app.js

<script src="assets/js/app.js"></script>
<script src="assets/js/home.js"></script>
<script src="assets/js/login.js"></script>

You can also create a file name controller.js and add all of the controller in it for simple project, that way you don't have to make new request for js file from html.

Upvotes: 1

Jayram
Jayram

Reputation: 19588

You have not included your login.js and home.js to index.html file. Also you do not need to include angular.module('MyApp') in all the file. It is there already in app.js and same instance can be used here too.

You can just do 

MyApp.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.pageTitle = "Welcome to the Home Page!";
}]);

MyApp.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.pageTitle = "Hello! Sign In";
}]);

Upvotes: 1

Related Questions