Does Plunker support multiple views?
I am learning AngularJS and trying to check routes. I'm wondering if Plunker supports this so that I can navigate different pages.
* Clicking the "Login" button returns Preview does not exist or has expired.
to the view
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 () {
});
source to share
Yes, client side navigation can be used in the plunker.
Plunker example: http://plnkr.co/edit/XH8yfhvbFpeP4l0EmJ8S?p=preview
Instead of modifying yourself location.href
, you should use $location.path()
or just use a simple tag a
like this:
<a href="#/login">Login</a>
To use $routeProvider
, you must include the module file ngRoute
:
<script src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
And put 'ngRoute'
as a description of the application module:
var app = angular.module("app", ['ngRoute'])
source to share