Analysis on the ui-router and ng-grid modules in angularJS

Source: Internet
Author: User
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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.