http://www.cnblogs.com/qianmojing/p/6142178.html
/***
* 这里是登陆模块
* ***/
app.controller('validateCtrl',function($scope){
$scope.user={
email:'',
password:''
};
$scope.arrs={
email:'song@126.com',
password:'123456'
};
$scope.compare = function(user){
$scope.user= user;
$scope.same = angular.equals($scope.user.email,$scope.arrs.email)//对比
$scope.same1 = angular.equals($scope.user.password,$scope.arrs.password)//对比
console.log($scope.same);
console.log($scope.same1);
console.log($scope.user.email);
if($scope.same == false){
$scope.user.email='用户名不正确';
console.log(user.email);
};
if($scope.same1 == false){
$scope.user.password='';
console.log(user.password);
}
}
});
/**
*后台界面
**/
app.controller('booklist',function($scope,$http){
$scope.booklist ={};
$http.get('data/bookslist.json')
.success(function (item){
$scope.booklist = item;
console.log($scope.booklist)
});
});
/**
* 这里是书籍列表模块
**/
var bookListModule = angular.module("BookListModule", []);
bookListModule.controller('BookListCtrl', function($scope, $http, $state, $stateParams) {
//以下是分页内容
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [5, 10, 20],
pageSize: 5,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.books = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
//这里可以根据路由上传递过来的bookType参数加载不同的数据
console.log($stateParams);
$scope.getPagedDataAsync = function(pageSize, page, searchText) {
setTimeout(function() {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('../src/data/books' + $stateParams.bookType + '.json')//通过传值调用不同json
.success(function(largeLoad) {
data = largeLoad.filter(function(item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
$http.get('../src/data/books' + $stateParams.bookType + '.json')
.success(function(largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function(newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.gridOptions = {
data: 'books',//表格中显示的数据来源
rowTemplate: '<div style="height: 100%"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
multiSelect: false,//是否能多选
enableCellSelection: true, //是否能选择单元格
enableRowSelection: false,//是否能选择行
enableCellEdit: true,//是否能修改内容
enablePinning: true, //是否被锁住了
columnDefs: [{
field: 'index',//这里是数据中的属性名
displayName: '序号', //这里是表格的每一列的名称
width: 60,//表格的宽度
pinnable: false,
sortable: true//是否能排序
}, {
field: 'name',
displayName: '书名',
enableCellEdit: true
}, {
field: 'author',
displayName: '作者',
enableCellEdit: true,
width: 220,
pinnable: true,
sortable: true
}, {
field: 'pubTime',
displayName: '出版日期',
enableCellEdit: true,
width: 120
}, {
field: 'price',
displayName: '定价',
enableCellEdit: true,
width: 120,
cellFilter: 'currency:"￥"'
}, {
field: 'bookId',
displayName: '操作',
enableCellEdit: false,
sortable: false,
pinnable: false,
cellTemplate: '<div><a ui-sref="bookdetail({bookId:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">详情</a></div>'
}],
enablePaging: true,//是否能翻页
showFooter: true,//是否显示表尾
totalServerItems: 'totalServerItems',//数据的总条数
pagingOptions: $scope.pagingOptions,//分页部分
filterOptions: $scope.filterOptions,//数据过滤部分
};
});
/**
* 这里是书籍详情模块
* @type {[type]}
*/
var bookDetailModule = angular.module("BookDetailModule", []);
bookDetailModule.controller('BookDetailCtrl', function($scope, $http, $state, $stateParams) {
console.log($stateParams);
});
var bookadd = angular.module('Bookadd',['ngAnimate', 'ngSanitize','ui.bootstrap']);
bookadd.controller('Bookaddctrl',function($scope,$http,$state, $stateParams){
function abf(){
$scope.userInfo={};//空
$scope.userInfo.dt = new Date();//日历
$scope.popup2 = {
opened: false
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.sites=[ //下拉列表
{id:0,site:'计算机'},
{id:1,site:'金融'},
{id:2,site:'哲学'},
{id:3,site:'历史'}
];
$scope.userInfo.zw = '1';//默认选中一个
};
abf();//执行
$scope.geto =function(user){
$scope.userInfo = user
console.log($scope.userInfo.dt.toISOString().slice(0,10))//日期格式化
$http({
url:'data/books5.json',
method:'POST',
data:$scope.userInfo,
data:JSON.stringify($scope.userInfo)
}).success(function(da){
console.log(da);
// console.log($stateParams);
window.history.back();
});
};
$scope.setFormData = function(){//清空
abf();
}
})
var app = angular.module('routerApp',['ui.router','ngGrid', 'BookListModule', 'BookDetailModule','Bookadd']);
/**
* 由于整个应用都会和路由打交道，所以这里把$state和$stateParams这两个对象放到$rootScope上，
* 方便其它地方引用和注入。
* 这里的run方法只会在angular启动的时候运行一次。
* $rootScope
* $state
* $stateParams
**/
app.run(function($rootScope,$state,$stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
/**
* 配置路由.config
* 这里采用的是ui-router这个路由，而不是原生的ng-router路由
* ng原生的路由不能支持嵌套视图，所以这里必须使用ui-router;
* $stateProvider
* $urlRouterProvider
**/
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/index');//没有任何值得情况下去到index
$stateProvider.state('index',{//登陆页面
url:'/index',
templateUrl:'tpls/loginForm.html'
}).state('booklist',{//后台界面
url: '/{bookType:[0-9]{1,4}}',
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'bookgrid@booklist': {
templateUrl: 'tpls/bookGrid.html'
}
}
}).state('addbook', {
url: '/addbook',
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'addbook@addbook':{
templateUrl: 'tpls/addBookForm.html'
}
}
})
.state('bookdetail', {
url: '/bookdetail/:bookId',//注意这里在路由中传参数的方式
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'seebook@bookdetail':{
templateUrl: 'tpls/bookDetail.html'
}
}
})
})
复制代码
<!-- 导航 -->
<nav class="navbar navbar-inverse lan navbar-static-top" role="navigation">
<div class="navbar navbar-inverse lan navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#leftnav" >
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">图书管理系统</a>
</div>
<ul class="nav navbar-nav navbar-right maright">
<li><a><span class="badge colorred">5</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span> 退出</a></li>
</ul>
<!-- 左侧栏 -->
<div class="navbar-collapse" id="leftnav" ng-controller="booklist">
<ul class="nav">
<li>
<a data-target="#list" class="coloractive" data-toggle="collapse" aria-expanded="true">
<span class="glyphicon glyphicon-book"></span> 书籍类型
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
<ul id="list" class="nav collapse listbg in" aria-expanded="true">
<li ng-repeat="book in booklist" ui-sref = "booklist({bookType:{{book.id}}})">
<a > <span class="glyphicon {{book.img}}"></span> {{book.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 右侧 -->
<div class="page_mian">
<div class="container">
<div class="row ">
<div ui-view="bookgrid" class="col-xs-12">
<!--书籍列表加载中...-->
</div>
<div ui-view="addbook" class="col-xs-12">
<!--添加书籍-->
</div>
<div ui-view="seebook" class="col-xs-12">
<!--查看书籍-->
</div>
</div>
</div>
</div>
复制代码
