Skip to content

Instantly share code, notes, and snippets.

@btoone

btoone/ng-demo.html

Created March 28, 2014 21:49
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save btoone/9843698 to your computer and use it in GitHub Desktop.
Save btoone/9843698 to your computer and use it in GitHub Desktop.
Download ZIP
Demo of Angular all in a single file.
Raw
ng-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
</head>
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js"></script>
<script>
// Define an angular module for our app
var sampleApp = angular.module('sampleApp', ['ngRoute']);
// Define routing for app
// * / => ListOrdersCtrl
// * /new => NewOrderCtrl
// * /show/:orderId => ShowOrderCtrl
sampleApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'listOrders',
controller: 'ListOrdersCtrl'
})
.when('/new', {
templateUrl: 'newOrder',
controller: 'NewOrderCtrl'
})
.when('/:orderId', {
templateUrl: 'showOrder',
controller: 'ShowOrderCtrl'
})
.when('/:orderId/:account?', {
templateUrl: 'showOrderAccount',
controller: 'ShowOrderAccountCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
sampleApp.controller('ListOrdersCtrl', function($scope) {
});
sampleApp.controller('NewOrderCtrl', function($scope) {
$scope.message = 'Hello from NewOrderCtrl';
});
sampleApp.controller('ShowOrderCtrl', function($scope) {
$scope.message = 'Hello from ShowOrderCtrl';
});
sampleApp.controller('ShowOrderAccountCtrl', function($scope) {
$scope.message = 'Hello from ShowOrderAccountCtrl';
});
</script>
<!-- Define templates -->
<script type="text/ng-template" id="listOrders">
<div class="container" style="background: #fff">
<div class="col-md-9">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Order No.</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1234</td>
<td>15" Samsung Laptop</td>
<td><a href="#/1234">show details</a></td>
</tr>
<tr>
<td>2</td>
<td>5412</td>
<td>2TB Seagate Hard drive</td>
<td><a href="#/5412">show details</a></td>
</tr>
<tr>
<td>3</td>
<td>9874</td>
<td>D-link router</td>
<td><a href="#/9874">show details</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<a href="#/new">Create order</a>
</script>
<script type="text/ng-template" id="newOrder">
<div class="container" style="background: #fff">
<h3>New order template</h3>
<p>Message: {{message}}</p>
</div>
<a href="#/">List orders</a>
</script>
<script type="text/ng-template" id="showOrder">
<div class="container" style="background: #fff">
<h3>Show order template</h3>
<p>Message: {{message}}</p>
<p>Account: <a href="#/1234/acme">Acme</a></p>
</div>
<a href="#/">List orders</a>
</script>
<script type="text/ng-template" id="showOrderAccount">
<div class="container" style="background: #fff">
<h3>Account template</h3>
<p>Message: {{message}}</p>
</div>
<!-- <a ng-href="#/{{order.id}}">Show order</a> -->
<a href="#/1234">Show order</a>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment