Angular ngRoute cannot get view

Question

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.

Your code seems to be right. Which system are you running on? Does Angular at least find the controller? — teone, Oct 17 '14 at 08:14

score 9 · Accepted Answer · edited Feb 25 '15 at 18:13

9

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>

edited Feb 25 '15 at 18:13

alex

6,818
9
52
103

answered Oct 17 '14 at 08:10

Kalhan.Toress

21,683
8
68
92

I followed the example and amended the changes, however I keep getting a 'Cannot GET /Students' message whenever I click on the href element. Any hints are appreciated :) – Alan Grixti Oct 17 '14 at 11:12
oh u need to template urls like this `/views/student_list.html` i'l update the answer – Kalhan.Toress Oct 17 '14 at 11:27
Actually that wasn't the issue, the $locationProvider in app.config was breaking the angular module – Alan Grixti Oct 17 '14 at 11:28
did u add the `$locationProvider` in the app.config function – Kalhan.Toress Oct 17 '14 at 11:29
Re-added it. For some weird reason it was breaking the code. Couldn't understand why. – Alan Grixti Oct 17 '14 at 15:24
i am not gonna say you are a genius cause this is a simple issue, but you saved my a**. thanks – bobleujr Sep 09 '16 at 16:37

Daniel C. Deng · Answer 2 · 2014-10-26T00:28:57.397

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!

Angular ngRoute cannot get view

2 Answers2