A brief analysis of the ui-router and ng-grid modules in angularJS

I was bored at home and happened to find a tutorial about angular on the Internet. I studied the two modules of angular ui-router and ng-grid, and imitated it and made a small thing.

The code has been uploaded to github, the address is here https://github.com/wwervin72/Angular.

Interested friends can take a look. So here we will first understand the usage of these two modules.

Let’s first talk about the ui-router module. This module is mainly used to implement deep routing. In fact, angular has a built-in instruction ng-route. If there are no nesting problems in the project, it is quite convenient to use this instruction to jump between pages. However, its shortcoming is that it has deep knowledge. There is no way around hierarchical nested routing. So first, if we want to use this module, we need to download it.

The download address is here http://www.bootcdn.cn/angular-ui-router/.

After downloading it, we can import it into our project. We should pay attention here, because this module is based on angular, so before this, we also need to import angular's js file. This can be downloaded from angular's official website.

After the above preparations are completed, we can start writing our code.

HTML part

<div class="container">
 <div ui-view>
 
 </div>
</div>

One thing to note here is that the attribute added in the div is no longer ng-view, but ui-view.

JS part

var app=angular.module('app',['ui.router','loginModel','listModel']);
 
app.config(function ($stateProvider, $urlRouterProvider) {
　$urlRouterProvider.otherwise('/index');
 $stateProvider
 .state('index',{
  url: '/index',
  templateUrl: 'tpls/start.html'
 })
 .state('register',{
  url: '/register',
  templateUrl: 'tpls/register.html'
 })
 .state('main',{
  url: '/main{positionType:[0,9]{1,5}}',
  views: {
  '': {
   templateUrl: 'tpls/main.html'
  },
  'typeList@main': {
   templateUrl: 'tpls/typeList.html'
  },
  'tbHero@main': {
   templateUrl: 'tpls/tbHero.html'
  }
  }
 })
 .state('addHero',{
  url: '/addHero',
  templateUrl: 'tpls/addHero.html'
 })
 .state('find',{
  url: '/findPwd',
  templateUrl: 'tpls/findPwd.html'
 })
 .state('detail',{
  url: '/detail/:id',
  templateUrl: 'tpls/detail.html'
 })
})

There are three places to pay attention to here:

1. When nesting, the outermost layer here is the main part, and then nested inside After covering the typeList and tbHero parts, we need to pay attention to the writing here.

2. When we need to open different content based on different selections, we need to pass parameters to the next page. Here is the detail part. We also need to pay more attention to the writing here.

3. When we use angular.module to create an app application, we need to import the ui.router module into it. In addition, some modules we created ourselves also need to be imported here.

4. We use $stateProvider to configure routing here instead of $routeProvider, and state is used here instead of when.

After the routing is configured here, the only thing left is to write the code for each part of tpls. I won’t go into too much introduction here. The most important thing here is the routing configuration.

Okay, let’s take a look at the usage of ng-grid. Here is the download address http://www.bootcdn.cn/ng-grid/.

HTML part

main part

<div class="row">
 <div class="col-sm-2" ui-view="typeList">
 
 </div>
 <div class="col-sm-10" ui-view="tbHero">
 
 </div>
</div>

typeList part

<div class="row">
 <div class="col-sm-12">
 <div class="list-group">
  <a href="javascript:void(0);" class="list-group-item active">英雄定位类型</a>
  <a ui-sref="main({positionType:0})" class="list-group-item">全部定位</a>
  <a ui-sref="main({positionType:1})" class="list-group-item">射手</a>
  <a ui-sref="main({positionType:2})" class="list-group-item">中单</a>
  <a ui-sref="main({positionType:3})" class="list-group-item">上单</a>
  <a ui-sref="main({positionType:4})" class="list-group-item">打野</a>
  <a ui-sref="main({positionType:5})" class="list-group-item">辅助</a>
 </div>
 </div>
</div>

tbHero part

<div ng-controller="listCtrl">
 <div class="row">
 <div class="col-sm-3">
  <button class="btn btn-success" ui-sref="addHero()">添加英雄</button>
  <button class="btn btn-warning" ui-sref="index()">退出</button>
 </div>
 <div class="col-sm-9">
  <form class="form-horizontal">
  <input type="text" ng-model="filterOptions.filterText" placeholder="请输入查询关键字..." class="form-control searchText"/>
  </form>
 </div>
 </div>
 <div class="row">
 <div class="col-sm-12">
  <div class="gridStyle" ng-grid="gridOptions">
 
  </div>
 </div>
 </div>
</div>

JS part

var listModel = angular.module('listModel',['ngGrid']);
listModel.controller('listCtrl',['$scope','$http','$state','$stateParams', function ($scope, $http, $state, $stateParams) {
 
 $scope.pagingOptions = {
 pageSizes: [5,15,20],
 pageSize: 5,
 currentPage: 1
 };
 
 $scope.filterOptions = {
 filterText: '',
 useExternalFilter: true
 };
 
 $scope.totalServerItems = 0;
 $scope.getDates = function (pageSize,page,/*optional*/searchText) {
 setTimeout(function () {
  if(searchText){
  searchText = searchText.toLowerCase();
  $http.get('data/hero.php?param='+$stateParams.positionType).success(function (data) {
   var data = data.filter(function (item) {
   return JSON.stringify(item).indexOf(searchText) != -1;
   })
   data.forEach(function (item,i) {
   item.index = i+1;
   });
   $scope.totalServerItems = data.length;
   $scope.datas=data.slice((page-1)*pageSize,page*pageSize);
  }).error(function (data) {
   alert('请求错误...');
  })
  }else{
  $http.get('data/hero.php?param='+$stateParams.positionType).success(function (data) {
   data.forEach(function (item,i) {
   item.index = i+1;
   });
   $scope.totalServerItems = data.length;
   $scope.datas = data.slice((page-1)*pageSize,page*pageSize);
  }).error(function (data) {
   alert('请求错误...');
  })
  }
 },100);
 };
 $scope.getDates($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage);
 $scope.$watch('pagingOptions', function () {
 $scope.getDates($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage);
 },true);
 $scope.$watch('filterOptions', function () {
 $scope.getDates($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText);
 },true);
 
 $scope.gridOptions = {
 data: 'datas',  //表格中显示的数据来源
 multiSelect: false, //是否能多选
 enableRowSelection: false, //是否能选择行
 enableCellSelection: true, //是否能选择单元格
 enableCellEdit: false, //是否能修改内容
 enablePinning: true,  //是否被锁住了
 columnDefs: [
  {
  field: 'index', //这里是数据中的属性名
  width: 80,
  display: '序号', //这里是表格的每一列的名称
  pinnable: true,
  sortable: true  //是否能排序
  }, 
  {
  field: 'name',
  displayName: '姓名',
  width: 120,
  sortable: true,
  pinnable: true
  },
  {
  field:'alias',
  displayName:'别名',
  width: 60,
  sortable: true,
  pinnable: true
  },
  {
  field:'position',
  displayName: '定位',
  width: 70,
  sortable: true,
  pinnable: true
  },
  {
  field:'equip',
  displayName: '装备',
  width: 500,
  sortable: true,
  pinnable: true
  },
  {
  field:'id',
  displayName: '详细攻略',
  sortable: false,
  pinnable: true,
  cellTemplate:&#39;<div class="cellDetail"><a ui-sref="detail({id:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">详情</a></div>&#39;
  }
 ],
 enablePaging: true, //是否能翻页
 showFooter: true,  //是否显示表尾
 totalServerItems: &#39;totalServerItems&#39;, //数据的总条数 
 pagingOptions: $scope.pagingOptions, //分页部分
 filterOptions: $scope.filterOptions  //数据过滤部分
 }
}])

The most important thing here is $scope.gridOptions. At the same time, we need to pay more attention to the writing method of passing parameters in the last detailed guide.

A few renderings are attached below:

## Also here The content about angular form verification, service, wizard, php, etc. also used in it will not be introduced here. If there is anything wrong, please leave a message to let me know, thank you ^_^.

The above brief analysis of the ui-router and ng-grid modules in angularJS is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more articles on the ui-router and ng-grid modules in angularJS, please pay attention to the PHP Chinese website!