AngularJS controllers in separate files not identifying the scope

Question

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!

you have not referenced both login.js and home.js in your HTML. Add script tags corresponding to them. — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Apr 17, 2015 at 4:28
Never mind. It happens. Big issues always come out from tiny blunders. — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Apr 17, 2015 at 5:04

Jayram · Accepted Answer · 2015-04-17 04:29:08Z

1

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

answered Apr 17, 2015 at 4:29

Jayram

19.6k6 gold badges54 silver badges72 bronze badges

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

5 Comments

Jayram Over a year ago

You just need to declare the module only once and angular instantiate that for you. Once it is there you can use the same instance in all other files which depends on the same module. You just do not need to instantiate in all your files.

AGE Over a year ago

very interesting, is it possible for you to include this suggestion as an edit to my question? it would be awesome help

Jayram Over a year ago

I have update all in this plunk. plnkr.co/edit/rj3iNHqSVMqNoxtr79CM?p=preview

AGE Over a year ago

I got it, just creating var app = angular.module('MyApp', ['ngRoute'] ) in index.js and reusing app.controller (...) in home.js and login.js is the idea behind it, thanks again you've been very helpful

Rajesh Over a year ago

Is that mandatory to include login.js and home.js in Only in index.html.? Because when it is loaded from corresponding html files it is not getting loaded . For example loading login.js from login.html. Controller is not getting identified in this case .Can you please suggest me the option @Jayram

Saqueib · Accepted Answer · 2015-04-17 04:34:54Z

1

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.

edited Apr 17, 2015 at 4:34

answered Apr 17, 2015 at 4:28

Saqueib

3,5184 gold badges36 silver badges58 bronze badges

Collectives™ on Stack Overflow

AngularJS controllers in separate files not identifying the scope

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related