Angular JS ng-view

Question

I am currently trying to build a angular js menu here is my code I can't seem to get the pages to load at all. Am I missing something? have I included all the correct scripts required. Very new to angular.

 // create the module and name it scotchApp var scotchApp = angular.module('RoutingApp', ['ngRoute']); // configure our routes scotchApp.config(function($routeProvider) { $routeProvider // route for the home page .when('/', { templateUrl: 'http://www.habboholiday.net/pages/home.html', controller: 'mainController' }) // route for the about page .when('/about', { templateUrl: 'pages/about.html', controller: 'aboutController' }) // route for the contact page .when('/contact', { templateUrl: 'pages/contact.html', controller: 'contactController' }); }); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.HomeMessage = 'Home Controller Called !!!'; }); scotchApp.controller('aboutController', function($scope) { $scope.AboutMessage = 'About Controller Called !!!'; }); scotchApp.controller('contactController', function($scope) { $scope.ContactMessage = 'Contact Controller Called !!!'; });

 <!DOCTYPE html> <!-- define angular app --> <html ng-app="RoutingApp"> <head> <!-- SPELLS --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> <script src="script.js"></script> </head> <body ng-controller="mainController"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/"> Angular Routing Example </a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-home"></i>Home</a></li> <li><a href="#about"><i class="fa fa-shield"></i>About</a></li> <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li> </ul> </div> </nav> <div id="main"> <!-- angular templating : This is where content will be injected --> <div ng-view></div> </div> </body> </html>

Answer 1

I guess you have missed ng-app directive. Add that to your HTML and try.

Answer 2

You need to add ng-app to your html element

<html ng-app="RoutingApp">
  ....
</html>

In addition, you can move your Angular script references to the bottom of your body or they should at least be contained within <head> tags

Angular JS ng-view

Question

2 answers

solution1
0 2016-09-07 09:14:42

solution2
0 ACCPTED 2016-09-07 09:18:01

Angular JS ng-view

Question

2 answers

solution1 0 2016-09-07 09:14:42

solution2 0 ACCPTED 2016-09-07 09:18:01

solution1
0 2016-09-07 09:14:42

solution2
0 ACCPTED 2016-09-07 09:18:01