Skip to content

Instantly share code, notes, and snippets.

@murphysean

murphysean/index.html

Created August 31, 2014 00:42
Show Gist options
  • Save murphysean/26c334efc3b36fba15b1 to your computer and use it in GitHub Desktop.
Save murphysean/26c334efc3b36fba15b1 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Route Quick Start
Raw
index.html
<!DOCTYPE HTML>
<html ng-app="routing-app">
<head>
<meta charset="UTF-8">
<title>Routes</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular-route.js"></script>
</head>
<body ng-controller="MainController">
<p>Some links</p>
<a href="#/person/Sean">Sean</a>
<a href="#/thing/thing">thing</a>
<section ng-view></section>
<pre>$location.path() = {{location.path()}}</pre>
<pre>$route.current.templateUrl = {{route.current.templateUrl}}</pre>
<pre>$route.current.params = {{route.current.params}}</pre>
<pre>$route.current.scope.name = {{route.current.scope.name}}</pre>
<pre>$routeParams = {{routeParams}}</pre>
<script>
angular.module('routing-app',['ngRoute'])
.config(['$routeProvider',function RoutingAppConfig($routeProvider){
$routeProvider
.when('/person/:personId',{template:'<p>{{name}}</p><p>{{params.personId}}</p>',controller:'PersonController'})
.when('/thing/:thingId',{template:'<p>{{name}}</p><p>{{params.thingId}}</p>',controller:'ThingController'});
}]).controller('MainController',['$scope','$location','$route','$routeParams',function MainController($scope,$location,$route,$routeParams){
$scope.route = $route;
$scope.location = $location;
$scope.routeParams = $routeParams;
}]).controller('PersonController',['$scope','$routeParams',function PersonController($scope, $routeParams){
$scope.name = "Person View";
$scope.params = $routeParams;
}]).controller('ThingController',['$scope','$routeParams',function ThingController($scope, $routeParams){
$scope.name = "Thing View";
$scope.params = $routeParams;
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment