Using ui-router to handle states and views for Angular applications

<!DOCTYPE html>
<html>
<head>

    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        .navbar { border-radius:0; }
    </style>

    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
    <script src="changeLossPreventer.js"></script>
</head>

<!-- apply our angular app to our site -->
<body ng-app="routerApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
</nav>

<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
    <div ui-view></div>
</div>

<div class="text-center">
    <p>See related <a href="http://stackoverflow.com/a/30455590/878514" target="_blank">StackOverflow answer</a></p>
    <p>A tutorial by <a href="http://scotch.io" target="_blank">scotch.io</a></p>
    <p>View the tutorial: <a href="http://scotch.io/tutorials/javascript/angular-routing-using-ui-router" target="_blank">AngularJS Routing using UI-Router</a></p>
</div>

</body>
</html>

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/home');
    
    $stateProvider
        
        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })
        
        
        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            url: '/about',
            templateUrl: 'partial-about.html'
        });
        
});


routerApp.controller('EditMeController', function($scope, ChangeLossPreventer) {
  $scope.editMe = 'Click me to edit!';
  $scope.edit = function() {
    ChangeLossPreventer.prevent('Are you sure you want to discard your edits?');
    $scope.editing = true;
  };
  $scope.save = function() {
    ChangeLossPreventer.cancel();
    $scope.editing = false;
  };
});

<div ng-controller="EditMeController">
  <h2 class="text-center" ng-show="!editing" ng-click="edit()">{{ editMe  }}</h2>
  <div ng-hide="!editing">
    <div class="form-group">
  <input type="text" class="form-control" ng-model="editMe" >
  </div>
  <div class="form-group">
    <button class="btn btn-primary" ng-click="save()">Save</button>
    </div>
 </div>
</div>

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    </div>

(function() {
  angular.module('routerApp').service('ChangeLossPreventer', function($rootScope, $q, $state) {
    var confirmationMessage, service;
    confirmationMessage = null;
    service = {
      prevent: function(message) {
        if (message == null) {
          message = 'Changed data will be lost. Continue?';
        }
        return confirmationMessage = message;
      },
      prompt: function() {
        var confirmation;
        confirmation = confirmationMessage ? confirm(confirmationMessage) : true;
        if (!confirmation) {
          return $q.reject();
        } else {
          return $q.when(confirmation).then(function() {
            return service.cancel();
          });
        }
      },
      cancel: function() {
        return confirmationMessage = null;
      }
    };
    $rootScope.$on('$stateChangeStart', function(event, newState, newStateParams) {
      if (confirmationMessage) {
        event.preventDefault();
        return service.prompt().then(function() {
          return $state.go(newState.name, newStateParams);
        });
      }
    });
    window.onbeforeunload = function() {
      return confirmationMessage;
    };
    return service;
  });

}).call(this);