Route Templates in Angular
A starting point for using route templates on jsFiddle.
HTML
<script type="text/ng-template" id="this.html">
This Page.
</script>
<script type="text/ng-template" id="that.html">
That Page.
</script>
<script type="text/ng-template" id="other.html">
Other Page.
</script>
<div ng-controller="MainCtrl">
<div>{{location.path()}}</div>
<ul>
<li><a href="this">This</a></li>
<li><a href="that">That</a></li>
<li><a href="other">Other</a></li>
</ul>
<ng-view></ng-view>
</div>
CSS
</style> <!-- Ugly Hack to make remote files preload in jsFiddle -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-route.min.js"></script>
<style>
JavaScript
angular.module("getbookmarks.services", ["ngResource"]).
factory('Story', function ($resource) {
var Story = $resource('/api/v1/stories/:storyId', {storyId: '@id'});
Story.prototype.isNew = function(){
return (typeof(this.id) === 'undefined');
}
return Story;
});
angular.module("getbookmarks", ["getbookmarks.services"]).
config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: '/static/views/stories/list.html', controller: StoryListController})
.when('/stories/new', {templateUrl: '/static/views/stories/create.html', controller: StoryCreateController})
.when('/stories/:storyId', {templateUrl: '/static/views/stories/detail.html', controller: StoryDetailController});
});
function StoryListController($scope, Story) {
$scope.stories = Story.query();
}
function StoryCreateController($scope, $routeParams, $location, Story) {
$scope.story = new Story();
$scope.save = function () {
$scope.story.$save(function (story, headers) {
toastr.success("Submitted New Story");
$location.path('/');
});
};
}
function StoryDetailController($scope, $routeParams, $location, Story) {
var storyId = $routeParams.storyId;
$scope.story = Story.get({storyId: storyId});
}