add pagination

example/app/common/commonmenu/commonmenu.html

@@ -62,6 +62,7 @@
 							<li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('checkboxtree')}}">{{'checkboxtree'|translate}}</a></li>
 							<li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('upload')}}">{{'upload'|translate}}</a></li>
 							<li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('calendar')}}">{{'calendar'|translate}}</a></li>
+							<li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('pagination')}}">{{'pagination'|translate}}</a></li>
 							<!--<li ui-sref-active="active"><a ui-sref="{{vm.globalRoute('list')}}">{{'list'|translate}}</a></li>-->
 						</ul>
 					</li>

example/app/components/pagination/pagination.component.js

@@ -0,0 +1,11 @@
+import template from './pagination.html';
+import controller from './pagination.controller';
+import './pagination.less';
+
+export default {
+  restrict: 'E',
+  bindings: {},
+  template,
+  controller,
+  controllerAs: 'vm'
+};

example/app/components/pagination/pagination.controller.js

@@ -0,0 +1,25 @@
+/**
+ * @description xxxx
+ *
+ * @author XXXXX@wandan.cn
+ * @date Mon Mar 06 2017 10:03:57 GMT+0800 (中国标准时间)
+ * @example: http://www.fancyui.org/#/zh-cn/component/Pagination
+ */
+
+import Base from '../../base';
+export default class PaginationController extends Base{
+  constructor($state,$translate, $scope) {
+    'ngInject';
+    super($state,$translate);
+    this.$scope = $scope;
+    $scope.$watch(
+      () =>{
+        return this.page;
+      },
+      (newVal, oldVal) =>{
+        console.log('page',newVal);
+      },
+      true
+    )
+  }
+}

example/app/components/pagination/pagination.html

@@ -0,0 +1,142 @@
+<section class="intro-content">
+	<h1 translate='{{vm.$state.current.name}}'></h1>
+	<p>采用分页的形式分隔长列表，每次只加载一个页面</p>
+</section>
+
+<section class="intro-content">
+	<h2>{{'Install' | translate}}</h2>
+	<p></p>
+</section>
+
+<div class="example-block">
+<div class="highlight" hljs hljs-language="bash">
+npm install fancyui --save</div>
+</div>
+
+<section class="intro-content">
+	<h2>{{'Inject_Module' | translate}}</h2>
+	<p></p>
+</section>
+
+<div class="example-block">
+	<div class="highlight no-border" hljs hljs-language="javascript">
+		import paginationComponent from './pagination.component';
+		export default angular.module('pagination', [
+		Pagination.name
+		])
+		.component('pagination', paginationComponent);
+	</div>
+</div>
+
+<!--示例-->
+<h2>{{'Example'|translate}}</h2>
+<div class="example-block">
+	<div class="bs-example pop-confirm-example">
+		<f-pagination
+				source-data="1000"
+				page-size="5"
+				current-page="1"
+				limit-page="10"
+				ng-model="vm.page"
+				>
+		</f-pagination>
+	</div>
+</div>
+
+<!--基础用法-->
+<h2>{{'Basic_Usage'|translate}}</h2>
+<h3>View</h3>
+<div class="example-block">
+<div class="highlight no-border" hljs hljs-language="html">
+  <f-pagination
+	source-data="100"
+	page-size="5"
+	current-page="1"
+	limit-page="30"
+	ng-model="vm.page"
+	></f-pagination>
+</div>
+</div>
+
+<h3>controller</h3>
+
+<div class="example-block">
+<div class="highlight no-border" hljs hljs-language="javascript">
+  <!--export default class PaginationController {-->
+    <!--constructor() {-->
+    <!--'ngInject';-->
+	<!--}-->
+  <!--}-->
+</div>
+</div>
+<section class="intro-content">
+	<h2>{{'Options'|translate}}</h2>
+	<table class="demo-table">
+		<thead>
+		<tr>
+			<th>{{'Param'|translate}}</th>
+			<th>{{'Type'|translate}}</th>
+			<th>{{'Optional'|translate}}</th>
+			<th>{{'DefaultValue'|translate}}</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>sourceData</td>
+			<td>Number</td>
+			<td>-</td>
+			<td>-</td>
+		</tr>
+		<tr>
+			<td>pageSize</td>
+			<td>Number</td>
+			<td>-</td>
+			<td>10</td>
+		</tr>
+		<tr>
+			<td>currentPage</td>
+			<td>Number</td>
+			<td>-</td>
+			<td>1</td>
+		</tr>
+		<tr>
+			<td>limitPage</td>
+			<td>Number</td>
+			<td>-</td>
+			<td>5</td>
+		</tr>
+		<tr>
+			<td>ngModel</td>
+			<td>number</td>
+			<td>-</td>
+			<td>-</td>
+		</tr>
+		<tr>
+			<td>onChange</td>
+			<td>function</td>
+			<td>-</td>
+			<td>-</td>
+		</tr>
+		</tbody>
+	</table>
+</section>
+
+<section class="intro-content">
+	<h2>{{'Event'|translate}}</h2>
+	<table class="demo-table">
+		<thead>
+		<tr>
+			<th>{{'EventName'|translate}}</th>
+			<th>{{'Description'|translate}}</th>
+			<th>{{'Params'|translate}}</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>on-change</td>
+			<td>{{'SwitchEventDes'|translate}}</td>
+			<td>{{'SwitchEventParam'|translate}}</td>
+		</tr>
+		</tbody>
+	</table>
+</section>

example/app/components/pagination/pagination.js

@@ -0,0 +1,7 @@
+import Pagination from '../../../../lib/Pagination/index.js';
+
+import paginationComponent from './pagination.component';
+export default angular.module('pagination', [
+  Pagination.name
+])
+.component('pagination', paginationComponent);

example/app/router/routerConfig.js

@@ -500,6 +500,19 @@ export default [
 			key: 'loading'
 		}
 	},
+  {
+	name: 'pagination',
+	moduleName: {
+	  'en-us': 'pagination',
+	  'zh-cn': '分页'
+	},
+	url: "/component/pagination",
+	template: '<pagination></pagination>',
+	lazyload: require("bundle?lazy&name=loading!../components/pagination/pagination.js"),
+	tracking: {
+	  key: 'pagination'
+	}
+  },
   {
     name: 'introduction',
     moduleName: {

lib/Pagination/Pagination.component.js

@@ -0,0 +1,20 @@
+import template from './Pagination.html';
+import controller from './Pagination.controller';
+import './Pagination.less';
+
+let PaginationComponent = {
+  restrict: 'E',
+  bindings: {
+    pageSize: '=?pageSize',
+    currentPage: '=?currentPage',
+    sourceData: '=?sourceData',
+    limitPage: '=?limitPage',
+    onChange: '&',
+    ngModel: '='
+  },
+  template,
+  controller,
+  controllerAs: 'vm'
+};
+
+export default PaginationComponent;