what does <!-- ngView : undefined --> mean

Question

I get a dom like this:

<div class="row">
  <::before>
    <div class="col-lg-12">
      <!-- ngView: undefined -->
        <ng-view class="ng-scope">
          <h1 class="ng-scope">Hello world</h1>
        </ng-view>
    </div>
  <::after>
</div>

What does:

    <!-- ngView: undefined -->

mean?

Everything seems to work fine, but I don't like this comment as it seems that something is not working properly?

The template look like this:

<h1>Hello world</h1>

and it is configured like this :

var myApp = angular.module('myApp', [
'ngRoute',

.....

]);

myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/my_template', {templateUrl: '/web-angular/my_template.html'})
.when( .....  );
}]);

Karmenkarna

Answer 1

Place your 'ng-view' directive in a div or span. Such as ...

<div ng-view></div>
<span ng-view></span>

Check out the IE restrictions here AngularJS IE Guide and take a look at number 3 and 4. From this, I take it that this is simply a warning. Something to catch your attention, and mine, just as it did. Note that declaring ng-view in your class will still work, but you will get the same warning message in your markup.

Mcclanahan

Answer 2

For anyone else coming across this and not having any luck with the other answer, I had this problem because I hadn't included the controller as a dependency of the module.

angular.module('myApp', ['module-for-missing-page'])

Including this dependency got the view loading correctly.

Naughty

Answer 3

inject ur view in an anchor tag.Like this

<div>
<a href="#/home"> Home</a>
    <a href ="#/students"> Students </a>
    <a href="#/courses"> Courses </a> 
    <ng-view>  </ng-view> 
</div>



 var app = angular.module("MyApp", ["ngRoute"])
                 .config(function ($routeProvider) {
                     $routeProvider
                         .when("/home", {
                             templateUrl: "Templates/home.html",
                             controller: "homeController"
                         })
                         .when("/courses", {
                              templateUrl: "Templates/courses.html",
                              controller: "courseController"
                         })
                        .when("/students", {
                            templateUrl: "Templates/students.html",
                            controller: "studentsController"
                         })
                 })

                  .controller("homeController", function ($scope) {
                      $scope.message = "I am in home controller";
                  })
                 .controller("courseController",function($scope){
                      $scope.message = "I am in courses controller";
                 })
                 .controller("studentsController", function ($scope) {
                      $scope.message = "I am in students controller";
                 })

and check whether u have put the correct ng-route links or not.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js">
 </script>

Cleft