好久没写了，一直在忙别的东西，但是想想，还是把之前的补充完整好了。给大家一个参考，也为自己留个备份。
首先写一个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(){
}
})