The following is an analysis of the ui-router and ng-grid modules in angularJS. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at it at home. I just found a tutorial on angular on the Internet and learned about the ui-router and ng-grid modules of angular, by the way, I made a small thing.
The Code has been uploaded to github at https://github.com/wwervin72/angular.
If you are interested, you can check it out. Then, let's take a look at the usage of these two modules.
Let's talk about the ui-router module, which is mainly used to implement deep routing. In fact, angular has a built-in command ng-route. If there is no Nesting Problem in the project, it is quite convenient to use this command to redirect between pages, however, his shortcoming is that there is no way for him to take deep nested routes. First, we need to download this module.
Http://www.bootcdn.cn/angular-ui-router /.
After downloading it, we can import it into our project. Note that this module is based on angular, so before that, we also need to import angular js files. This can be downloaded from angular's official website.
After the above preparations are completed, we can start to write our code.
HTML section
Note that the property added in p is not ng-view, but ui-view.
JS Section
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' })})
Note the following three points:
1. During nesting, the outermost layer here is the main part, and the typeList and tbHero sections are nested in it. We need to note the writing method here.
2. When we need to open different content based on different choices, that is, we need to pass parameters to the next page. Here I am the detail part. We also need to pay more attention to the writing method here.
3. When we use angular. module to create an app, We need to import the ui. router module into it. In addition, we need to import some modules we have created here.
4. Here we use $ stateProvider to configure the route, instead of $ routeProvider, and the state instead of when used here.
After the routing configuration is complete, the rest is the code of each part in tpls. Here we will not introduce it too much. The most important thing here is the routing configuration.
Now let's take a look at the usage of ng-grid. Here is http://www.bootcdn.cn/ng-grid /.
HTML section
Main Section
TypeList Section
Hero positioning types all positioning shooters single-on-single-field support
TbHero part
Add hero Exit
JS Section
Var listModel = angular. module ('listmodel', ['nggrid']); listModel. controller ('listctrl ', [' $ scope ',' $ http', '$ 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,/* opt Ional */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, // whether enableRowSelection can be selected multiple times: false, // whether the row enableCellSelection can be selected: true, // whether the cell enableCellEdit: false can be selected, // whether the content can be modified enablePinning: true, // whether columnDefs: [{field: 'index' is locked ', // here is the data attribute name width: 80, display: 'sequence number ', // here is the name of each column in the table pinnable: true, sortable: true // can be sorted?}, {field: 'name', displayName: 'name', width: 120, sortable: true, pinnable: true}, {field: 'Alias', displayName: 'Alias ', width: 60, sortable: true, pinnable: true}, {field: 'position', displayName: 'location', width: 70, sortable: true, pinnable: true}, {field: 'equip', displayName: 'equiptment ', width: 500, sortable: true, pinnable: true}, {field: 'id', displayName: 'detailed strategy', sortable: false, pinnable: true, cellTemplate :'Details
'}], EnablePaging: true, // whether to flip the page showFooter: true, // whether to display the total number of totalServerItems: 'totalserveritems' At the end of the table, // pagingOptions: $ scope. pagingOptions, // filterOptions: $ scope. filterOptions // data filtering}])
The most important part here is $ scope. gridOptions. At the same time, we need to pay more attention to writing parameters in the last detailed introduction.
A few images are attached below:
In addition, the content about angular form verification, service, wizard, php and so on is not introduced too much here. If there is something wrong with it, please leave a message. Thank you! ^_^.
In the above analysis, the ui-router and ng-grid modules in angularJS are all the content that I have shared with you. I hope you can provide a reference and support for PHP.
For more information about the ui-router and ng-grid modules in angularJS, please follow the PHP Chinese network!