Tuesday, May 21, 2024
 Popular · Latest · Hot · Upcoming
100
rated 0 times [  106] [ 6]  / answers: 1 / hits: 15511  / 10 Years ago, thu, march 27, 2014, 12:00:00

While i am trying to click on show its not showing any thing, i have wasted lot of time on this, but no luck can some one help.



Files....




  1. app.js

  2. controller.js

  3. index.html

  4. show.html



index.html



<html ng-app='Java4sApp'>
<head>
<title>Angular Js Tutorials _ Java4s</title>
<script type=text/javascript src=angular.min.js></script>
<script type=text/javascript src=app.js></script>
<script type=text/javascript src=controllers.js></script>
</head>
<body>

<div ng-controller='Java4sController'>



Settings :
<a href=#add>Add Details</a> | <a href=#show>Show Details</a>

<div ng-view></div>

</div>

</body>
</html>


show.html



<html ng-app='Java4sApp'>
<head>
<title>Angular Js Tutorials _ Java4s</title>
<script type=text/javascript src=angular.min.js></script>
<script type=text/javascript src=app.js></script>
<script type=text/javascript src=controllers.js></script>
</head>
<body>

<div ng-controller='Java4sController'>


<input type=text ng-model=myModel />

<ul>
<li ng-repeat='person in people | filter:myModel'>{{person.name}}</li>
</ul>


</div>

</body>
</html>


controller.js



app.config(['$routeProvider', function($routeProvider) {

$routeProvider.
when('/add', {
controller: 'Java4sController',
templateUrl: '/add.html'
}).
when('/show', {
controller: 'Java4sController',
templateUrl: '/show.html'
}).
otherwise({
redirectTo: '/index.html'
});
}]);

app.controller(Java4sController,function($scope){

$scope.people = [
{name: 'Siva', city: 'Cary'},
{name: 'Teja', city: 'Raleigh'},
{name: 'Reddy', city: 'Durham'},
{name: 'Venky', city: 'Denver'},
{name: 'Arun', city: 'Texas'}
];

});


app.js



var app = angular.module(Java4sApp,[]);


Thank you.


More From » jquery

 Answers
6

You need to inject the 'ngRoute' dependency when you are creating your module.



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


Also make sure you obtain Angular routing js and add a reference to it, in your index.html



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


A good example can be found here



Please let me know if this doesn't fix your problem



UPDATE



This is a simple plunker that shows AngularJS Routing


[#71760] Tuesday, March 25, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jazminkyrap

Total Points: 631
Total Questions: 89
Total Answers: 109

Location: Finland
Member since Fri, Oct 21, 2022
2 Years ago
;