好久没写了,一直在忙别的东西,但是想想,还是把之前的补充完整好了。给大家一个参考,也为自己留个备份。
首先写一个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()">×</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> <span>Cancel</span> </button> <button type="submit" ng-disabled="deleteForm.$invalid" class="btn btn-danger"> <span class="glyphicon glyphicon-remove-circle"></span> <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(){ } })