AngularJS routing view not loading

Question

started out playing with angular today. So totally noob with the issue. I've found tons of similar questions but nothing seems to help so I decided to try with my own question.

My problem is with routing. I have two views (or partials). My first view (default) loads nicely when I browse to my page. When clicking the link that should open my second view the URL changes but nothing happens. If I then hit browser refresh button the view loads.

Index page

    <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>  
    <script src="js/angular_route.js"></script>  
    <script src="js/angular_animate.js"></script>
    <script src="js/angular_cookies.js"></script>
    <script src="js/app.js"></script>
    </head>
<body style="padding:10px;" ng-app="rispa">
    <div ng-view></div>
</body>
</html>

app.js

var rispa = angular.module("rispa", ['ngRoute', 'ngAnimate']);
rispa.config(function ($routeProvider) {
    $routeProvider
        .when('/welcome', 
            {
                controller: 'rispaController', 
                templateUrl: 'partials/welcome.html' 
            })
        .when('/accounts', 
            {
                controller: 'rispaController', 
                templateUrl: 'partials/accounts.html' 
            })
        .otherwise({ redirectTo: '/welcome' })
});
rispa.controller('rispaController', function($scope) {
    $scope.title = "Home Page";
});

welcome view(default)

<div class="container">
   <h1>Welcome!!!</h1>
    <a href="#/accounts">get accounts</a>
</div>

accounts view

<div class="container">
    <h1>accounts</h1>
    <a href="#/welcome">back to welcome</a>
</div>

I've got a WAMP server on Windows 10 where I run the app. I also tried to publish to a azure webapp but the view did not refresh there either. I had to click the browser refresh button so it shouldn't be a web server issue...

Ah, found the issue... I removed the ngAnimate depency and now it is working. — japesu
– japesu, Commented May 21, 2016 at 12:48

Sajal · Accepted Answer · 2016-05-21 12:51:55Z

1

Working Plunker: http://plnkr.co/edit/aCpOumYzy94ATMXiA5KR?p=preview

The routing has been set up correctly but you did not add the reference to the controller for the view. Also, you would need the dependency file for ngAnimate in the main view.

<div data-ng-view="" data-ng-controller="rispaController" ></div>

answered May 21, 2016 at 12:51

Sajal

4,4111 gold badge22 silver badges41 bronze badges

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

1 Comment

japesu Over a year ago

Yeah, issue was with the ngAnimate. Thanks for the answer :)

Collectives™ on Stack Overflow

AngularJS routing view not loading

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related