javascript - Angular JS routing not working

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

app.js
controller.js
index.html
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.

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

app.js
controller.js
index.html
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.

Share Improve this question asked Mar 27, 2014 at 4:22 Siva 3,3279 gold badges32 silver badges35 bronze badges

Do you get any error in your console? – Tharaka Commented Mar 27, 2014 at 4:33

Add a ment |

1 Answer 1

Sorted by: Reset to default 8

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angular JS routing not working - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)