// source http://jsbin.com/weguzoh angular SPA

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js"></script>
<style>
  a, a:hover {
    text-decoration: none;
  }
  #content{
    border:2px solid #e5e5e5;
    overflow: hidden;
  }
  #leftpanel{
    background-color: #f8f8f8;
    width: 120px;
    float: left;
    min-height:100%;

  }
  #right{
    background-color:#fff;
    padding-left: 120px;}
  #rightpanel{
    height:100%;

  }
  .date{
    font-size: 12px;
    color:#999;
  }
  .content{
    background-color: lightyellow;
    display: inline-block;
  }
  #container{
    margin: 10px;
  }
  table th {
    white-space: nowrap;
    font-weight: bold;
  }
  table td {
      padding: 2px 6px;
  }
  .table-striped tr:nth-child(odd) td {
    background-color: #ffffe0;
  }
  .clearfix:after,.clearfix:before {
    display: table;
    content: "";
    line-height: 0
  }

  .clearfix:after {
    clear: both
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
</style>


<!-- template -->
<div ng-app="NewsPub">

  <script type="text/ng-template" id="list.html">
    <table width="100%" border="1" style="border-collapse:collapse;" class="table-striped">
      <thead>
      <tr>
          <th><a href="javascript:;" ng-click="sortType = 'id';sortReverse=!sortReverse">id</a></th>
          <th>title</th>
          <th>content</th>
          <th><a href="javascript:;" ng-click="sortType = 'date';sortReverse=!sortReverse">publish date</a></th>
          <th>options</th>
      </tr>
      </thead>
      <tr ng-repeat="news in newsList | orderBy:sortType:sortReverse | filter: searchText">
        <td>{{news.id}}</td>
        <td><a ng-href='#/detail/{{news.id}}'>{{news.title}}</a></td>
        <td>{{news.content}}</td>
        <td>{{news.date | date: 'yyyy-MM-dd' }}</td>
        <td>
          <a ng-href="#/edit/{{news.id}}">edit</a>
          <a href="javascript:;" ng-click="removeItem(news)">delete</a>
        </td>
      </tr>
    </table>
  </script>

  <script type="text/ng-template" id="add.html">
    <form ng-submit="add()">
      <h3>add news</h3>
      title: <input type="text" ng-model="title" placeholder="title..."><br>
      <p>content: </p>
      <textarea ng-model="content" cols="30" rows="10" style="vertical-align:top;"
                   placeholder="contents..."></textarea>

       <br>
      <button>submit</button>
    </form>
  </script>

  <script type="text/ng-template" id="edit.html">
    <form ng-submit="update()">
      <h3>edit news{{news.id}}</h3>
      titl: <input type="text" ng-model="news.title"><br>
      <p>content: </p><textarea ng-model="news.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
      <button>submit</button>
    </form>
  </script>
  <!-- contents -->
  <script type="text/ng-template" id="detail.html">
    <a href="#/list">back to list</a>
    <div id="container">
      <a ng-href="#/edit/{{news.id}}">edit</a>
      <h3>{{news.title}}</h3>
      <p>
          <span class="date">publish date {{news.date | date: 'yyyy-MM-dd' }}</span>
      </p>

      <div class="content">content:   {{news.content}}</div>
    </div>
  </script>


  <!-- basic -->
  <div class="clearfix">
    <h1 class="fl">news publish system</h1>
    <form class="fr">
      <input type="text" ng-model="searchText" placeholder="search news"/>
      <input type="button" value="Search"/>
    </form>
  </div>
  <div id="content">
    <div id="leftpanel">
      <ul>
        <li><a href="#/list">news list</a></li>
        <li><a href="#/add">publish</a></li>
      </ul>
    </div>
    <div id="right" ng-controller="mainController">
      <div id="rightpanel" ng-view>contents</div>
    </div>
  </div>
</div>
<script>
  var app = angular.module('NewsPub', ['ngRoute']);
  // route
  app.config(function routeConfig($routeProvider){
    $routeProvider.
      when('/', {
        controller: 'ListController',
        templateUrl: 'list.html'
      }).
      when('/detail/:id', {
        controller: 'DetailController',
        templateUrl: 'detail.html'
      }).
      when('/edit/:id', {
        controller: 'EditController',
        templateUrl: 'edit.html'
      }).
      when('/list', {
        controller: 'ListController',
        templateUrl: 'list.html'
      }).
      when('/add', {
        controller: 'AddController',
        templateUrl: 'add.html'
      }).
      otherwise({
        redirectTo: '/'
      });
  });

  app.controller('mainController',['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.newsList =[{
      id : 1,
      title : 'title 1111',
      content : 'content 1111111',
      date : '1415002691359'
    },{
      id : 2,
      title : 'title 2222',
      content : 'content 2222222',
      date : new Date()
    },{
      id : 3,
      title : 'title 3333',
      content : 'content 3333333',
      date : new Date()
    },{
      id : 4,
      title : 'title 4444',
      content : 'content 4444444',
      date : new Date()
    },{
      id : 5,
      title : 'title 5555',
      content : 'content 5555555',
      date : new Date()
    },{
      id : 6,
      title : 'title 6666',
      content : 'content 6666666',
      date : new Date()
    },{
      id : 7,
      title : 'title 7777',
      content : 'content 7777777',
      date : new Date()
    }];
    if (angular.isDefined(window.localStorage.newsList)) {
      $rootScope.newsList = JSON.parse(window.localStorage.newsList);
    } else {
      window.localStorage.newsList = JSON.stringify($rootScope.newsList);
      // = newsList;
    }
    $scope.$watch('newsList', function () {
      // save to local storage
      window.localStorage.newsList = JSON.stringify($rootScope.newsList);
    },true)
  }])

  // news list
  app.controller('ListController',['$scope', '$rootScope',function($scope, $rootScope){
    $scope.removeItem = function(news) {
      var index = $rootScope.newsList.indexOf(news);
      if (confirm('confirm to remove this item?')) {
        $rootScope.newsList.splice(index,1);
      }
    }
  }]);

  // news detail
  app.controller('DetailController',function($scope, $rootScope, $routeParams){
    // $scope.news = $rootScope.newsList[$routeParams.id-1];
    $scope.news = $rootScope.newsList.find(item => item.id == $routeParams.id);
  });

  // news add
  app.controller('AddController',function($scope, $rootScope, $location){
    $scope.title = '';
    $scope.content = '';
    $scope.add = function(){
      $rootScope.newsList.push({
        id : (+new Date),
        title : $scope.title,
        content : $scope.content,
        date : new Date()
      });

      $location.path('list');
    }
  });

  // news edit
  app.controller('EditController',function($scope, $rootScope, $routeParams, $location){
    // $scope.news = $rootScope.newsList[$routeParams.id-1];
    $scope.news = $rootScope.newsList.find(item => item.id == $routeParams.id)
    $scope.update = function(){
      $rootScope.newsList[$routeParams.id-1] = $scope.news;
      // $rootScope.newsList = Object.assign({}, $rootScope.newsList)
      $location.path('list');
    }
  })
</script>