CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerurl-routingangularjs-routing
F11
F11

Reputation: 3806

Routing in AngularJS

I am new to angular and trying to implement Routing in one of my sample application,but its not working.Can somebody guide what i am doing wrong.Here's the link of my sample app.

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="[email protected]" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="[email protected]" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-route.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div ng-include="" src="'Test.html'"></div>
  <div>
    <ul>
      <li>
        <a ng-href="#/Page1">Go to Page1</a>

      </li>
      <li>
        <a ng-href="#/Page2">Go to Page2</a>

      </li>
    </ul>
  </div>
</body>

</html>

App.js
-------
var app = angular.module('plunker', ['ng-Route']).config(
  function($routeProvider) {
        $routeProvider
            .when('/Page1', {
                templateUrl:'Test.html'
                ,
                    controller: 'MainCtrl'
            }).when('/Page2', {
                templateUrl:'Test1.html' ,
                    controller: 'MainCtrl'
            })
            .otherwise({redirectTo: '/a'});
    });


app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

I am just trying to call 2 different pages(Page1,Page2) in one parent page but its not working.

Upvotes: 0

Views: 370

Answers (1)

Raghavendra
Raghavendra

Reputation: 5387

You need an <ng-view/> when you use routing. Also while injecting, it's ngRoute not ng-Route

Working demo

Upvotes: 1

Related Questions