Angular SPA

angular routes

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div ng-app="app" id="appWrap" ng-cloak ng-class="{'active': navigationMenuStatus}">
    <div snap-drawers class="snap-drawers">
        <div snap-drawer class="snap-drawer snap-drawer-left" style="overflow-y:visible;">
            <nav>
                <div class="bar bar-header" style="display:none">
                     <h1 class="title">Menu</h1>

                </div>
                <div class="content has-header">
                    <ul class="list">
                        <li class="item" snap-toggle ng-click="go('/')">Home</li>
                        <li class="item" snap-toggle ng-click="go('page1')">page1</li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div snap-content snap-options="{disable: 'right',touchToDrag:0}">
        
        <div ng-view class="view-animate" ng-class="transition"></div>
        
        
        <div class="loader" ng-cloak ng-show="data.loader.isLoading">
            <circle-spinner></circle-spinner>
            <div class="loader-text">{{data.loader.text}}</div>
        </div>
        <div class="notification" ng-class="{'fade-in-out': data.notification.text}" ng-cloak ng-show="data.notification.isLoading" ng-click="data.notification.isLoading=false">
            <p class="notification-text">{{data.notification.text}}</p>
        </div>
    </div>
    
    
    
     <script type="text/ng-template" id="home.html">
        <div class="navigation">
            <div class="bar bar-header bar-light">
                <a snap-toggle class="button button-clear icon ion-navicon fa fa-bars ...

CSS

html, body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.snap-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 2;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.snap-drawers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
}

.snap-drawer {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  width: 265px;
  height: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: width 0.3s ease;
     -moz-transition: width 0.3s ease;
      -ms-transition: width 0.3s ease;
       -o-transition: width 0.3s ease;
          transition: width 0.3s ease;
}

.snap-drawer-left {
  left: 0;
  z-index: 1;
}

.snap-drawer-right {
  right: 0;
  z-index: 1;
}

.snapjs-left .snap-drawer-right,
.snapjs-right .snap-drawer-left {
  display: none;
}

.snapjs-expand-left .snap-drawer-left,
.snapjs-expand-right .snap-drawer-right {
  width: 100%;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
snap-content,
[snap\:content],
[snap-content],
[data-snap-content],
[x-snap-content],
.snap-content,
.x-snap-content,
snap-drawers,
[snap\:drawers],
[snap-drawers],
[data-snap-drawers],
[x-snap-drawers],
.snap-drawers,
.x-snap-drawers,
.snap-drawers,
.snap-content {
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  width: auto;
  left: 0;
  right: 0;
}
snap-drawer,
[snap\:drawer],
[snap-drawer],
[data-snap-drawer],
[x-snap-drawer],
.snap-drawer,
.x-snap-drawer,
.snap-drawer {
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  overflow: auto;
  -webkit-transition: top 0.2s...

JavaScript

debugger;
angular.module("app", [
    'ngRoute','ngAnimate', 'snap'])

    .config(['$routeProvider',

function ($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'home.html'
    }).
    when('/home', {
        templateUrl: 'home.html'
    }).
    when('/page1', {
        templateUrl: 'page1.html'
    }).
    otherwise({
        redirectTo: '/'
    });
}])
.run(['$rootScope', '$window', '$location',

function ($rootScope, $window, $location) {

    $rootScope.back = function () {
        $rootScope.transition = 'transition-right';
        $window.history.back();
        console.log(' [nav] handled back event.');
    };
    $rootScope.go = function (path) {
        $rootScope.transition = 'transition-left';
        $location.url(path);
    };
    $rootScope.$on( "$locationChangeStart",function(e) { 
        $rootScope.transition = '';
        //e.preventDefault();
        //e.stopPropogation();
        //$rootScope.back();
        console.log( "You work will be lost."); 
    });
}]);


/*
 * Snap.js
 *
 * Copyright 2013, Jacob Kelley - http://jakiestfu.com/
 * Released under the MIT Licence
 * http://opensource.org/licenses/MIT
 *
 * Github:  http://github.com/jakiestfu/Snap.js/
 * Version: 1.9.3
 */
/*jslint browser: true*/
/*global define, module, ender*/
(function (win, doc) {
    'use strict';
    var Snap = Snap || function (userOpts) {
            var settings = {
                element: null,
                dragger: null,
                disable: 'none',
                addBodyClasses: true,
                hyperextensible: true,
                resistance: 0.5,
                flickThreshold: 50,
                transitionSpeed: 0.3,
                easing: 'ease',
                maxPosition: 266,
                minPosition: -266,
                tapToClose: true,
                touchToDrag: true,
                slideIntent: 40, // degrees
                minDragDistance: 5
            },
            cache = {
               ...