CODEWITHSUNDEEP
angularjsngrouteangularjs-ng-route
Alan Grixti
Alan Grixti

Reputation: 235

Angular ngRoute cannot get view

I am trying to use Angular's routing mechanism in an app, however on clicking on element which should cause the routing I'm getting a cannot GET viewName, where viewName is any view.

This is my app.js script file:

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

//Define Routing for app
app.config(['$routeProvider',
   function($routeProvider) {
      $routeProvider
      .when('/', {
            templateUrl: 'views/student_list.html',
            controller: 'StudentListController'
      })
      .when('/Students', {
            templateUrl: 'views/student_list.html',
            controller: 'StudentListController'
      })
      .when('/RegisterStudent', {
            templateUrl: 'views/register_student.html',
            controller: 'StudentRegistrationController'
       });
  }]);

 app.controller('StudentListController', function($scope) {    
    $scope.message = 'This is student list screen';
 });


app.controller('StudentRegistrationController', function($scope) {
    $scope.message = 'This is student registration screen'; 
});

and this is my index.html:

<!DOCTYPE html>
<html ng-app="actsapp">

<head>
    <title></title>
    <link href="style/style.css" rel="stylesheet" />
    <link href="style/bootstrap.css" rel="stylesheet" />

    <script src="scripts/jquery-1.js"></script>
    <script src="scripts/angular/angular.js"></script>
    <script src="scripts/angular/angular-route.js"></script>
    <script src="scripts/angular/app.js"></script>
</head>

<body>
<div class="header">
    <div class="heading_wrap">
        <h1>Student Registration Form</h1>
    </div>
</div>
<div class="nav-wrap">
    <ul class="nav nav-acts-pills nav-stacked ">
        <li class="active">
            <a href="/Students">Student List</a>
        </li>
        <li>
            <a href="/RegisterStudent">Add Student</a>
        </li>
        <li>
            <a>Add Students (By School)</a>
        </li>
    </ul>
</div>

<div ng-view="" class="content-wrap" style="float:left;">
</div>
</body>

</html>

Any suggestions on how to fix this are much more than welcome. I based my work on the latest version of the ngRoute documentation. Thank you.

Upvotes: 2

Views: 13524

Answers (2)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

You need to add the # like below to work the routing:

<li class="active">
    <a href="#/Students">Student List</a>    // add #
</li>
<li>
    <a href="#/RegisterStudent">Add Student</a>    // add #
</li>

And in the .js file, templateUrl should be like: /views/student_list.html.

However, if you need routes without #, you need to add $locationProvider.html5Mode(true);. Check the example here to learn how to avoid using #. Also, see this. The demo says that:

app.config(['$routeProvider',
   function($routeProvider,$locationProvider) {
  $routeProvider
      .when('/', {
        templateUrl: '/views/student_list.html',   // urls should be like this
        controller: 'StudentListController'
      })
      .when('/Students', {
        templateUrl: '/views/student_list.html',  // urls should be like this
        controller: 'StudentListController'
      })
      .when('/RegisterStudent', {
        templateUrl: '/views/register_student.html',     // urls should be like this
        controller: 'StudentRegistrationController'
       });
       $locationProvider.html5Mode(true);
  }]);    ]

In the view : 

    <li class="active">
        <a href="/Students">Student List</a>
    </li>
    <li>
        <a href="/RegisterStudent">Add Student</a>
    </li>

Upvotes: 9

Daniel C. Deng
Daniel C. Deng

Reputation: 1589

I also have the same problem. Having worked on it for hours, I finally got it worked out.

AngularJS is designed on the concept of SPA (single page app). So all the views should be constructed around the main index.html associated with the ng-app. Note: I tried to work around it by creating two different names of ng-app so that, when I href to B.html, which can then load ng-app="B", whereas leaving index.html with ng-app="A" behind. It didn't work--Angular still looking for "A"--with an exception.

So the way you design your index.html is that you either keep a 'common' core part on top or bottom of

<ng-view></ng-view>

where the 'otherwise' part in the routing service is going to place the default html view--i.e., your starting content of index.html; or, you place the entire content in a separate view file to be loaded into the index.html, such as my code here:

<body ng-app="YouTiming">
    <div ng-controller="Main">
        <ng-view></ng-view>
    </div>
</body>

The default view, main_view.html, will have the content from the 'Main' controller. Here is the router:

angular.module("YouTiming", ["customFilter", "ngRoute"])
.config(function ($routeProvider) {
    $routeProvider
    .when("/archive", {
        templateUrl: "/view/archive.html"
    })
    .when("/edit-portfolio", {
        templateUrl: "/view/edit-portfolio.html"
    })
    .otherwise({
        templateUrl: "/view/main_view.html"
    });
});

Then, in the main_view.html, I have the href:

<a ng-href="#/archive">Archive</a>

Note the '#' is to tell AngularJS that I want to place "/view/archive.html" back to the original SPA where it knows so far (since there is only one ng-app). Without the '#', you will get the same error: Cannot GET /archive

In archive.html:

<div>
    <div class="col-sm-6">
        123
    </div>
    <div class="col-sm-6">
        456
    </div>
</div>

The final result:

123                456

The the next question is that how do you switch the focus view among several views in the same SPA. This is the next issue I am going to tackle with, but I reckon you can setup something in $scope to switch the view by using ng-show or ng-hide. If anyone has better suggestion, please advise, thanks!

Upvotes: 2

Related Questions