0007-一套完整的CRUD_DEMO

　　好久没写了，一直在忙别的东西，但是想想，还是把之前的补充完整好了。给大家一个参考，也为自己留个备份。

　　首先写一个Html作为内容载体，主要结构如下

　　

<div ui-view="navbar" ng-cloak=""></div>

<div class="container">
    <div class="well" ui-view="content"></div>
</div>

<div class="footer">
    <p >页脚</p>
</div>

　　新建一个抽象路由用来放导航条，

$stateProvider.state('site', {
            'abstract': true,
            views: {
                'navbar@': {
                    templateUrl: 'scripts/components/navbar/navbar.html',
                    controller: 'NavbarController'
                }
            }
        });

　　假设我们要操作的对象为article（文章）。我们要对article对象进行CRUD操作。

　　在此假设该数据的数据结构为：article:{title:String,content:String};

　　首先创建一个叫做article的文件夹表示这个文件夹里的内容都是对article的操作。

　　然后创建一个叫做article.js的路由配置文件，文件内容大体如下

angular.module('MyApp')
    .config(function ($stateProvider) {
        $stateProvider
            //定义一个展示文章列表的state
            .state('article', {
                //它的父状态定义为一个自定义的抽象状态。
                parent: 'site',
                //这个是访问该状态时候浏览器地址栏对应的url
                url: '/articles',
                //此处对应内容部分，设置模板文件以及控制器
                views: {
                    'content@': {
                        templateUrl: 'scripts/app/article/articles.html',
                        controller: 'ArticlesController'
                    }
                }
            })
            .state('article.detail', {
                parent: 'site',
                //{id}表示该路径接受的参数。参数名为id,例如访问/article/1，这个1就是此时的id
                url: '/article/{id}',
                views: {
                    'content@': {
                        templateUrl: 'scripts/app/article/article-detail.html',
                        controller: 'ArticleDetailController'
                    }
                },
                //
                resolve: {
                    //url中的参数id存在于$stateParams中，此时调用了一个ArticleService用来获取文章数据
                    entity: ['$stateParams', 'Article', function($stateParams, Article) {
                        //获取id为路径传来id的stateParams.
                        return Article.get({id : $stateParams.id});
                    }]
                }
            })
            .state('article.new', {
                parent: 'article',
                url: '/article/new',
                //这里用来弹出一个模态框。引用了ui-bootstrap的组件uibModal,模态框将显示于parent状态对应的页面上。
                onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
                    $uibModal.open({
                        templateUrl: 'scripts/app/article/article-dialog.html',
                        controller: 'ArticleDialogController',
                        size: 'lg',
                        resolve: {
                            entity: function () {
                                return {
                                    title:null,
                                    content:null
                                };
                            }
                        }
                    }).result.then(function(result) {
                        //当模态框确定关闭时重新刷新页面进入article状态。(新增了数据)
                        $state.go('article', null, { reload: true });
                    }, function() {
                        //当模态框取消关闭时重新进入article状态。(未新增数据，所以不刷新)。
                        $state.go('article');
                    })
                }]
            })
            .state('article.edit', {
                parent: 'article',
                url: '/article/{id}/edit',
                onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
                    $uibModal.open({
                        templateUrl: 'scripts/app/article/article-dialog.html',
                        controller: 'ArticleDialogController',
                        size: 'lg',
                        resolve: {
                            entity: ['Article', function(Article) {
                                return Article.get({id : $stateParams.id});
                            }]
                        }
                    }).result.then(function(result) {
                        $state.go('article', null, { reload: true });
                    }, function() {
                        //返回上个路由状态。
                        $state.go('^');
                    })
                }]
            })
            .state('article.delete', {
                parent: 'article',
                url: '/article/{id}/delete',
                onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
                    $uibModal.open({
                        templateUrl: 'scripts/app/article/article-delete-dialog.html',
                        controller: 'ArticleDeleteController',
                        size: 'md',
                        resolve: {
                            entity: ['Article', function(Article) {
                                return Article.get({id : $stateParams.id});
                            }]
                        }
                    }).result.then(function(result) {
                        $state.go('article', null, { reload: true });
                    }, function() {
                        $state.go('^');
                    })
                }]
            })
    });

　　接下来依次来看每个状态对应的controller和temmplate。

　　1.首先来看articles.html

　　此处用到一个uib-pagination组件，为ui-bootstrap的组件，用来做分页条使用，一般列表项多时大都需要采取分页展示。

<div class="table-responsive">
  <table class="table table-striped">
      <thead>
          <tr>
               <th>title</th>
               <th>content</th>
               <th>操作</th>
          </tr>
      </thead>
      <tbody>
            <tr ng-repeat="article in articles track by article.id">
              <td>{{article.id}}</td>
              <td>{{article.title}}</td>
              <td>{{article.content}}</td>
              <td>
                  <button type="button" 
　　　　　　　　　　　　　　　ui-sref="article.detail({id:article.id})"
                          class="btn btn-info btn-sm">
                      <span class="glyphicon glyphicon-eye-open"></span>
                  </button>
                  <button type="button" 
　　　　　　　　　　　　　　　ui-sref="article.edit({id:article.id})"
                          class="btn btn-primary btn-sm">
                      <span class="glyphicon glyphicon-pencil"></span>
                  </button>
                  <button type="button" 
　　　　　　　　　　　　　　　ui-sref="article.delete({id:article.id})"
                          class="btn btn-danger btn-sm">
                      <span class="glyphicon glyphicon-remove-circle"></span>
                  </button>
              </td>
          </tr>
      </tbody>
  </table>
</div>
<div class="text - center">
  <uib-pagination class="pagination - sm" total-items="totalItems" ng-model="page" ng-change="loadAll()"></uib-pagination>
</div>

　　　ArticlesController主要内容如下

'use strict';

angular.module('MyApp')
  .controller('ArticleController', function ($scope, $state) {
        $scope.articles = [];
        $scope.page = 1;
        $scope.loadAll = function() {
            Article.query({page: $scope.page - 1, size: 20}, function(result, headers) {
                $scope.links = ParseLinks.parse(headers('link'));
                $scope.totalItems = headers('X-Total-Count');
                $scope.articles = result;
            });
        };
        $scope.loadPage = function(page) {
            $scope.page = page;
            $scope.loadAll();
        };
        $scope.loadAll();

  })

　　2.详情页面html如下：

<form id="fm" name="fm" novalidate>
    <formly-form model="formModel" fields="formFields" options="formOptions" form="fm">

    </formly-form>
    <button onclick="history.go(-1);">返回</button>
</form>

　　控制器内容如下，主要用了formly-form组件，具体细节不做介绍，用的时候查文档：　　

'use strict';

angular.module('MyApp')
  .controller('ArticleDetailController', function ($scope, $state) {
    $scope.formModel = {};
    $scope.formFields = [];
    $scope.formOptions = {};
})

　　3.编辑界面如下：

<form id="fm" name="fm" novalidate ng-submit="onFormSubmit(fm)">
    <formly-form model="formModel" fields="formFields" options="formOptions" form="fm">
        <div class="row form-submit-btn-group">
          <div class="col">
            <button type="submit" form="fm" class="btn btn-info">保存</button>
          </div>
        </div>
    </formly-form>
    <button onclick="history.go(-1)">返回</button>
</form>

　　对应的控制器如下：

angular.module('MyApp')
  .controller('ArticleEditController', function ($scope, $state) {
    $scope.formModel = {};
    $scope.formFields = [{
        key: 'title',
        type: 'inline-input',
        templateOptions: {
          label:"标题",
          type:'text',
          focus:true,
          placeholder: '请输入标题',
          required: true
        }
      }];
    $scope.formOptions = {};

    var editSuccess = function(){
        console.log("edit ok");
    }

    var editFailed = function(){
        console.log("edit failed");
    }

    $scope.onFormSubmit = function(){
        var data = $scope.formModel;

    }
})

　　4.增加界面如下：

<form id="fm" name="fm" novalidate ng-submit="onFormSubmit(fm)">
    <formly-form model="formModel" fields="formFields" options="formOptions" form="fm">
        <div class="row form-submit-btn-group">
          <div class="col">
            <button type="submit" form="fm" class="btn btn-info">提交</button>
          </div>
        </div>
    </formly-form>
</form>

　　对应的控制器如下：

'use strict';

angular.module('MyApp')
  .controller('ArticleAddController', function ($scope, $state) {
    $scope.formModel = {};
    $scope.formFields = [{
        key: 'title',
        type: 'inline-input',
        templateOptions: {
          label:"标题",
          type:'text',
          focus:true,
          placeholder: '请输入标题',
          required: true
        }
      }];
    $scope.formOptions = {};

    var addSuccess = function(){
        console.log("add ok");
    }

    var addFailed = function(){
        console.log("add failed");
    }

    $scope.onFormSubmit = function(){
        var data = $scope.formModel;

    }
})

　　5.删除界面如下：

<form name="deleteForm" ng-submit="confirmDelete()">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                ng-click="clear()">&times;</button>
        <h4 class="modal-title">Confirm delete operation</h4>
    </div>
    <div class="modal-body">
        <p>Are you sure you want to delete this article?</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span>Cancel</span>
        </button>
        <button type="submit" ng-disabled="deleteForm.$invalid" class="btn btn-danger">
            <span class="glyphicon glyphicon-remove-circle"></span>&nbsp;<span>Delete</span>
        </button>
    </div>
</form>

　　对应的控制器如下：

angular.module('MyApp')
  .controller('ArticleDeleteController', function ($scope, $state) {
    var delSuccess = function(){
        console.log("del success");
    }
    var delFailed = function(){
        console.log("del failed");
    }

    $scope.confirmDelete = function(){

    }
})