3

I am learning AngularJS and trying to test routes. I am wondering if Plunker supports this so that I can navigate different pages.

*Clicking "Log in" returns Preview does not exist or has expired. in the View

Plunker Demo

HTML

    <html lang="en" ng-app="app">

      <head>
        <meta charset="UTF-8" />
        <title>Into to Angular.js</title>
        <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
        <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="style.css" />
        <script src="app.js"></script>
      </head>

  <body>
  <div class="row">
    <div class="col-sm-12">
      <h1>Intro to Angular</h1>
      <div id="view" ng-view></div>
    </div>
  </div>
    <button class="btn"  onclick="location.href = '/login.html'">Login Page</button>
  </body>

    </html>

JS

var app = angular.module("app", []).config(function($routeProvider) {
  $routeProvider.when('/login', {
    templateUrl: 'login.html',
    controller: 'LoginController'
  });
});

app.controller('LoginController', function () {

});
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Austin
  • 3,010
  • 23
  • 62
  • 97

1 Answers1

4

Yes, it is possible to use the client-side navigation in the plunker.

Example plunker: http://plnkr.co/edit/XH8yfhvbFpeP4l0EmJ8S?p=preview

Instead of modifying the location.href yourself, you have to use $location.path() or just use a simple a tag like this:

<a href="#/login">Login</a>

In order to use the $routeProvider, you have to include the ngRoute module file:

<script src="http://code.angularjs.org/1.2.17/angular-route.js"></script>

And put 'ngRoute' as a depencendy of the app module:

var app = angular.module("app", ['ngRoute'])
runTarm
  • 11,537
  • 1
  • 37
  • 37
  • Correct and then in order to use $routeProvider, the first argument for when would be "un-hashed" ('/login') – Tamb Mar 13 '17 at 15:11