japesu japesu - 6 months ago 37
AngularJS Question

AngularJS routing view not loading

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...

Answer

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>