Url getting changed but not displayed template in Angular js

Question

Hi i am newbie to Angular Js. i am doing sample application (SPA). This is directory structure.

http://localhost:8080/
   demoApp
     ---- index.html
        ---views
          ----add.html
          ----list.html
          ----edit.html
          ----view.html
         ---js
           demoapp.js

let me paste necessary code below...

dempapp.js

var demoApp = angular.module("demoApplication", ["ngRoute"]);
    demoApp.config(["$routeProvider","$locationProvider",function ($routeProvider,$locationProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'views/list.html',
        controller: 'ListController'
    }).when("/add",{
        tempalteUrl : 'views/add.html',
        controller:'addController'
    }).when("/edit",{
        tempalteUrl : 'views/edit.html',
        controller:'addController'
    }).when("/view",{
        tempalteUrl : 'views/view.html',
        controller:'addController'
    }).otherwise({
         redirectTo: '/list'
        });
}]);

index.html

<html data-ng-app="demoApplication">
<head>
<title>Demo Application</title>
<script src="./lib/angular.min.js"></script>
<script src="./lib/angular.route.min.js"></script>
<script src="./js/demoapp.js"></script>
</head>
<body>
<data-ng-view></data-ng-view>
</body>
</html>

list.html

<div ng-controller="ListController">
<table>
    <thead>
    <tr>
    <td>Serial Number</td>
    <td>User Id</td>
    <td>First Name</td>
    <td>Last Name</td>
    <td> Add User</td>
    <td> view User</td>
    <td> Edit User</td>
    <td> Delete User</td>
    </tr>

    </thead>
    <tbody>
    <tr ng-repeat="user in users">
    <td>{{$index+1}}</td>
    <td>{{user.id}}</td>
    <td>{{user.firstName}}</td>
    <td>{{user.lastName}}</td>
    <td><div style="float:left;"><a href="#/add">Add User</a></div></td>
    <td><div style="float:left;"><a href="#/view" id="viewUser">View User</a></button></button></div></td>
    <td><div style="float:left;"><a href="#/edit" id="editUser">Edit User</a></div></td>
    <td><div style="float:left;"><a href="#/delete" id="deleteUser">Delete User</a></div></td>
    </tr>
    </tbody>
</table>
</div>

The Issue is, when clicking Add or edit or view from the navigation url getting changed but Template not displaying. please help me out what i am doing wrong here...

See the console log for errors. Also you do not need to put ng-controller="ListController" in the html as you have already specified in routeprovider. Also check for any 404 from server. — Chandermani
– Chandermani, Commented Mar 13, 2014 at 5:07
i am not getting any error in Console. But template not loading... — Pyare
– Pyare, Commented Mar 13, 2014 at 5:24
What URL you tried to navigate? Please check if http://localhost:8080/#/index.html/list works. — Shaun Xu
– Shaun Xu, Commented Mar 13, 2014 at 6:05
List alone working Shaun Xu. But add/edit/view not working.... When i click on that url getting changed but content not displaying... — Pyare
– Pyare, Commented Mar 13, 2014 at 6:15

PrimosK · Accepted Answer · 2014-03-13 06:58:22Z

2

You've got a typo in your code which prevents routing from working. In the case of add, edit and delete routes you have mispelled templateUrl as tempalteUrl.

Try it like this:

var demoApp = angular.module("demoApplication", ["ngRoute"]);
    demoApp.config(["$routeProvider","$locationProvider",function ($routeProvider,$locationProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'views/list.html',
        controller: 'ListController'
    }).when("/add",{
        templateUrl: 'views/add.html',
        controller:'addController'
    }).when("/edit",{
        templateUrl: 'views/edit.html',
        controller:'addController'
    }).when("/view",{
        templateUrl: 'views/view.html',
        controller:'addController'
    }).otherwise({
         redirectTo: '/list'
        });
}]);

There you have working JSFiddle.

answered Mar 13, 2014 at 6:58

PrimosK

13.9k10 gold badges62 silver badges82 bronze badges

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

5 Comments

PrimosK Over a year ago

But it's hard to find mistake as Angular is not complaining about it.

Pyare Over a year ago

ya correct. Can we integrate Angular js with Eclipse or do we have any Good IDE to make power of Angular ?

PrimosK Over a year ago

You can use whatever IDE you wish. There is AngularJS plugin for IntelliJ I know of but it will not bring much to the table.

Pyare Over a year ago

Hi PrimosK, navigation working fine... But now one thing is, can we do this without changing url. for eg. my app url is localhost:8080/myapp/index.html. so for all the navigation, url must be above same. but template should change dynamically... any option in Angular? for this....

PrimosK Over a year ago

You should create new question for this.

Collectives™ on Stack Overflow

Url getting changed but not displayed template in Angular js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related