I was bored at home, and I happened to find a tutorial about angular online. I learned 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, and the address is here https://github.com/wwervin72/Angular.
Interested friends can take a look. Then here we first understand the usage of these two modules.
Let’s first talk about the ui-router module, which is mainly used to implement deep-level routing. In fact, angular has a built-in instruction ng-route. If there is no nesting problem in the project, it is quite convenient to use this instruction to achieve jumps between pages, but its shortcomings are that it has no way to use deep nested routes. 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, we can import it into our project. Please note here that because this modular is based on angular, we need to import angular js file before this. This can be downloaded on the official website of angular.
Then after all the above preparations are done, we can write our code hand-written.
HTML part
<div> <div ui-view> </div></div>
Here is one thing to note that the attributes added in the div are 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:
1. When nesting, the outermost layer of me is the main part, and then the typeList and tbHero parts are nested inside. We need to pay attention to the writing method here.
2. When we need to open different contents according to the choice, we need to pass parameters to the next page. Here is the detail part, and we also need to pay more attention to the writing method here.
3. When we use angular.module to create an app application, we need to import the ui.router module in it, and some modules we created ourselves also need to import them here.
4. We use $stateProvider to configure routes, not $routeProvider, and the state used here instead of when.
After the routing is configured, the rest is to write the code for each part of tpls. I won’t introduce it too much 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> <div ui-view="typeList"> </div> <div ui-view="tbHero"> </div></div>
typeList part
<div> <div> <div> <a href="javascript:void(0);">Hero Positioning Type</a> <a ui-sref="main({positionType:0})">All Positioning</a> <a ui-sref="main({positionType:1})">Shooters</a> <a ui-sref="main({positionType:2})">Middle Lane</a> <a ui-sref="main({positionType:3})">Top Lane</a> <a ui-sref="main({positionType:4})">Jungler</a> <a ui-sref="main({positionType:5})">Assist</a> </div> </div></div>tbHero part
<div ng-controller="listCtrl"> <div> <div> <button ui-sref="addHero()">Add Hero</button> <button ui-sref="index()">Exit</button> </div> <div> <form> <input type="text" ng-model="filterOptions.filterText" placeholder="Please enter query keyword..."/> </form> </div> </div> <div> <div> <div ng-grid="gridOptions"> </div> </div> </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('request error...'); }) }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('request error...'); }) } } },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', //The data source displayed in the table multiSelect: false, //Is it possible to select multiple enableRowSelection: false, //Is it possible to select rows enabledCellSelection: true, //Is it possible to select cells enabledCellEdit: false, //Is it possible to modify content enabledPinning: true, //Is it locked columnDefs: [ { field: 'index', //Here is the attribute name in the data width: 80, display: 'sequence number', //Here is the name of each column in the table pinnable: true, sortable: true //Is it possible to sort}, { field: 'name', displayName: 'name', width: 120, sortable: true, pinnable: true }, { field:'alias', displayName: 'alias', displayName: 'alias', displayName: 'alias', displayName: 'alias', width: 60, sortable: true, pinnable: true }, { field:'position', displayName: 'position', width: 70, sortable: true, pinnable: true }, { field:'equip', displayName: 'equip', width: 500, sortable: true, pinnable: true }, { field:'id', displayName: 'detail strategy', sortable: false, pinnable: true, cellTemplate:'<div><a ui-sref="detail({id:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">Details</a></div>' } ], enablePaging: true, //Can you turn the page showFooter: true, //Do you display the end of the table totalServerItems: 'totalServerItems', //Total number of data pagingOptions: $scope.pagingOptions, //Page part filterOptions: $scope.filterOptions //Data filter part }}])The most important thing here is $scope.gridOptions. At the same time, we need to pay more attention to the writing method of the parameters in the last detailed guide.
Here are a few renderings:
Here are a few renderings:
In addition, I will not introduce the contents of angular form verification, service, wizard, php, etc. here. If there is anything wrong with the writing, I will leave a message to inform you, thank you ^_^.
The above brief analysis of the ui-router and ng-grid modules in angularJS is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.