Why my $scope is not accessible in my controller - Angular JS?

Question

I am not able to get declared scope variable in my controller. Instead I'm getting reference error : message is not defined

Below is my code:

My Index.html

<body ng-app="myApp" ng-controller="homingController" ng-cloak>
<script type="text/javascript">
    angular.module('myApp' ['ngRoute','ngMaterial']).controller('homingController', ['$scope',

    function($scope){
        $scope.message = 'Hello';
    }
  ]).config(function ($routeProvider) {
    $routeProvider.when("/home", {
        templateUrl: "home.html",
        controller: "homingController"
    }).when("/monitor", {
        templateUrl: "monitor.html",
        controller: "monitoringController"
    }).otherwise({
        redirectTo: '/home'
    });
 }).controller('monitoringController', function ($scope) {
    $scope.message = "Monitor";
});
</script>

<nav class = "navbar navbar-inverse" role="navigation">
    <ul class = "nav navbar-nav"  >
        <li ><a href="#!/home" class = "active" ui-sref= "home" style="margin: 0px 1px 0px 19px"><img src="./images/home.svg">Home</a></li>
        <li ><a href="#!/monitor" class = "active" ui-sref = "monitor" ><img src="./images/monitor.svg">Monitor</a></li>
        <li ><a class = "active" ui-sref = "Audit" ><img src="./images/audit.svg">Audit</a></li>
        <li ><a class = "active" ui-sref = "configuration" ><img src="./images/configure.svg">Configure</a></li>
    </ul>
</nav>
</div>
</body>
<div ng-view></div>

My home.html

{{ message}}  
/*This line giving error in console : angular.js:14328 ReferenceError: $scope is not defined
*/

Is there anything I am missing here?

Answer 1

Your <div ng-view></div> should be inside your <body> tag. By placing it outside of the body, in which you define your app, the views have no idea what app or controller they should be using.

You also don't need to identify ng-controller 's anywhere around your views, since you define them in your routeconfig:

var app = angular.module('myApp' ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when("/home", {
      templateUrl: "home.html",
      controller: "homingController"
    }).when("/monitor", {
      templateUrl: "monitor.html",
      controller: "monitoringController"
    }).otherwise({
      redirectTo: '/home'
    });
});

app.controller('homingController', function($scope) {
  $scope.message = 'Hello';
})

app.controller('monitoringController', function($scope) {
  $scope.message = "Monitor";
});

If you want to display something from one of your controllers you should define it like so:

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-app="myApp">

  <div ng-controller="homingController">
    {{message}}
  </div>

  <nav class="navbar navbar-inverse" role="navigation">
    <ul class="nav navbar-nav">
      <li>
        <a href="#!/home">Home</a>
      </li>
      <li>
        <a href="#!/monitor">Monitor</a>
      </li>
    </ul>
  </nav>

  <div ng-view></div>

</body>

With your home.html & monitor.html containing {{ message }} . An exact example of this can be found at w3Schools (Under the heading "Controllers"). Build that, then once you have that working start expanding on it to fill in the rest of your application.

Why my $scope is not accessible in my controller - Angular JS?

Question

1 answers

solution1
1 2017-10-23 22:02:55

Why my $scope is not accessible in my controller - Angular JS?

Question

1 answers

solution1 1 2017-10-23 22:02:55

solution1
1 2017-10-23 22:02:55