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',//这个是访问该状态时候浏览器地址栏对应的urlurl: '/articles',//此处对应内容部分，设置模板文件以及控制器
                views: {'content@': {templateUrl: 'scripts/app/article/articles.html',controller: 'ArticlesController'}}}).state('article.detail', {parent: 'site',//{id}表示该路径接受的参数。参数名为id,例如访问/article/1，这个1就是此时的idurl: '/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>titleth><th>contentth><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()">×button><h4 class="modal-title">Confirm delete operationh4>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> <span>Cancelspan>button><button type="submit" ng-disabled="deleteForm.$invalid" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle">span> <span>Deletespan>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(){}
})

转载于:https://www.cnblogs.com/whiteHome/p/5544880.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！