Angular controller not binding to view

Question

I have an Angular controller defined something like

mainCtrl.js

angular.module("mainCtrl", [])

.controller("mainController", function ($rootScope, $location, Auth) {

    var vm = this;
    vm.testStr = "If you see this, mainController is active on your page";
    .
    .
    .

Here Auth is an angular service defined to handle authentication and it doesn't put the testStr variable behind authentication.

A view defined tries to bind the variable testStr as bellow

index.html

<html>
<head>
<base href="/">

<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>

</head>
<body ng-app="userApp" ng-controller="mainController as main">

<main class="container">
   <!-- ANGULAR VIEWS -->
   <div><h3>{{main.testStr}}</h3></div>
   <div ng-view></div>
</main>

</body>
</html>

But when the index is loaded the value of testString doesn't appear on the page. Instead {{main.testStr}} appears.

I am assuming it is not a must to use $scope and couldn't find what I am doing wrong.

Thanks in advance, for your help.

Edit

There are other files involved that I didn't mention here. Now I can see their relevance.

The app module, app.js

angular.module("userApp", ["ngAnimate", "app.routes",
    "authService", "mainCtrl",
    "employeeCtrl", "employeeService"])

// application configuration to integrate token into requests
.config(function ($httpProvider) {

    // attach our auth interceptor to the http requests
    $httpProvider.interceptors.push("AuthInterceptor");

});

module for routing app.route.js

angular.module("app.routes", ["ngRoute"])

.config(function ($routeProvider, $locationProvider) {

    $routeProvider

    // route for the home page
        .when("/", {
            templateUrl: "app/views/pages/home.html"
        })

        // login page
        .when("/login", {
            templateUrl: "app/views/pages/login.html",
            controller: "mainController",
            controllerAs: "login"
        })

        // show all employees
        .when("/employees", {
            templateUrl: "app/views/pages/employees/all.html",
            controller: "employeeController",
            controllerAs: "employee"
        })

        // form to create a new user
        // same view as edit page
        .when("/employees/create", {
            templateUrl: "app/views/pages/employees/single.html",
            controller: "employeeCreateController",
            controllerAs: "employee"
        })

        // page to edit a user
        .when("/employees/:employee_id", {
            templateUrl: "app/views/pages/employees/single.html",
            controller: "employeeEditController",
            controllerAs: "employee"
        });

    $locationProvider.html5Mode(true);

});

Sajeetharan · Accepted Answer · 2016-05-07 12:45:49Z

2

You have declared the Module name as mainCtrl

angular.module("mainCtrl", [])

but using ng-app as userApp

Change your module like this,

angular.module("userApp", [])

answered May 7, 2016 at 12:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

8 Comments

Sime Over a year ago

I think I haven't provided enough details earlier. What do you think after the edit?

Sajeetharan Over a year ago

you should not inject controllers as a dependency to a module !

Sime Over a year ago

do you mean the modules injected in the app.js? could you suggest how I can avoid that? I was going for haveing some sort of separation between "components" and collect them in to the app finally.

Sajeetharan Over a year ago

Change your module like this, angular.module("userApp", ["ngAnimate", "app.routes"])

Sajeetharan Over a year ago

or create a plunker, i will fix

|

Shashank Agrawal · Accepted Answer · 2016-05-07 12:53:20Z

1

Your module name is wrong. It should be userApp instead of mainCtrl. See a working example below:

var myApp = angular.module("userApp", []);

myApp.controller("mainController", function($scope) {
  var vm = this;
  vm.testStr = "Hello";
});

<html>

<head>
  <base href="/">

  <!-- load angular and angular-route via CDN -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>

</head>

<body ng-app="userApp" ng-controller="mainController as main">

  <main class="container">
    <!-- ANGULAR VIEWS -->
    <div>
      <h3>{{main.testStr}}</h3>
    </div>
    <div ng-view></div>
  </main>

</body>

</html>

answered May 7, 2016 at 12:53

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

4 Comments

Sime Over a year ago

I think I haven't provided enough details earlier. What do you think after the edit?

Shashank Agrawal Over a year ago

Are you sure, Angular is being loaded properly because the only problem I'm seeing might be the HTML5 mode

Sime Over a year ago

how can I check that?

Shashank Agrawal Over a year ago

Comment the line $locationProvider.html5Mode(true); and then refresh the page and try.

Collectives™ on Stack Overflow

Angular controller not binding to view

2 Answers 2

8 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related