First Angular Proof

Visit labs/architecture-examples/angularjs/app/index.html to interact with the example. Notice changing the page title updates the alias automatically until the alias has been interacted with. Notice the save button is automatically enabled when appropriate.

Have a look at the main.tpl:

<section id="main-content">
  <header>
    <h1 ng-bind="displayTitle">New Resource</h1>
  </header>
  <form name="resource" action="" method="POST">
    <div class="tabs">
      <div class="tab">
        <fieldset>
          <div class="field">
            <label>Title</label>
            <input id="pagetitle" ng-value="New Post" ng-model="title" ng-change="handleTitleChange()" required  />
          </div>
        </fieldset>
        <fieldset>
          <div class="field">
            <label>Alias</label>
            <input id="alias" ng-model="alias" ng-change="aliasEdited = true" required  />
          </div>
        </fieldset>
      </div>
    </div>
    <div id="content-wrapper">
      <fieldset>
        <label>Content</label>
        <textarea id="content" rows="18" ng-model="content"></textarea>
      </fieldset>
    </div>
    <nav class="resource-btns">
      <ul>
        <li>
          <button id="save" type="submit" ng-click="handleSave()" ng-disabled="!resource.$dirty">Save</button><!-- disabling this button requires js for submit -->
        </li>
      </ul>
    </nav>
  </form>
</section>

Have a look at main.js:

angular.module('matboardApp')
  .controller('MainCtrl', function ($scope,$http,$filter) {
  $scope.aliasEdited = false;
  $scope.displayTitle = 'New Resource';
  $scope.handleTitleChange = function(){
    $scope.displayTitle = $scope.title;
    if(!$scope.aliasEdited) $scope.alias = $filter('alias')($scope.title);
  };
  $scope.handleSave = function(){
    $http({method:'POST', url:'views/main.html', data:{title:$scope.title, alias:$scope.alias, content:$scope.content}})
      .success(function(data, status, headers, config){
      console.log('success');
      }).error(function(data, status, headers, config){
      console.log('error');
    });
  };

  var leavingPageText = "Your changes will be lost.";
    window.onbeforeunload = function(){
        return leavingPageText;
    }

    $scope.$on('$locationChangeStart', function(event, next, current) {
        if(!confirm(leavingPageText + "\n\nAre you sure you want to leave this page?")) {
            event.preventDefault();
        }
    });
});