btoone
3/28/2014 - 9:49 PM

Demo of Angular all in a single file.

Demo of Angular all in a single file.

ng-demo.html
content_copyfile_download
<!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>