Geek Answers Handbook

AngularJS ng-view not working

So, I followed this tutorial: http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

But when I try to change my mind, nothing happens, no one knows what I'm doing wrong?

This is the code I received. Home.php:

<!DOCTYPE html> <html ng-app="lax"> <head> <meta name="author" content="Koen Desmedt" /> <meta name="description" content="CMS Belgium Lacrosse" /> <meta name="keywords" content='Lacrosse, BLF, Belgium' /> <meta name="googlebot" content="noarchive" /> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script> <script src="lax.js"></script> <link href="css/style.css" rel="stylesheet"> <title>CMS Belgium Lacrosse</title> </head> <body> <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav navbar-left"> <li> <a href="#/home"> <span class="glyphicon glyphicon-home"></span> BLF </a> </li> <li> <a href="#/players">Players</a> </li> <li> <a href="#/club">Club</a> </li> <li> <a href="#/games">Games</a> </li> </ul> </nav> </div> </header> <div id='contentcontainer'> <div class='container' ng-view></div> </div> </body> </html>

lax.js:

 var lax = angular.module('lax', []); lax.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/home', { templateUrl: 'views/news.php', controller: 'NewsController' }). when('/players', { templateUrl: 'views/players.php', controller: 'PlayersController' }). otherwise({ redirectTo: '/home' }); }]); lax.controller('NewsController', function($scope) { $scope.message = 'This is Add new order screen'; }); lax.controller('PlayersController', function($scope) { $scope.message = 'This is Show orders screen'; });
+6
source share
3 answers

From angular 1.2.0, ngRoute has been moved to its own module. You must download it separately and declare the dependency.

Update your html:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>

And Js:

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

For more information: http://docs.angularjs.org/guide/migration

+6
source
For routes

Angular also needs to enable the route module. Here is the documentation that covers this.

So, I think you might miss:

 <script src="angular-route.js"></script>

In the <head> page.

* Note: this module was part of Angular, but was removed recently (1.2?). So, some tutorials still assume $route is inline.

+1
source

Adding this will work:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>

but it will not work without Internet access on first launch. Therefore, you need to specify the dependency on your project and specify it in your html file

How to add ng route dependency

-1
source

More articles:


All Articles