Estaba aburrido en casa y encontré un tutorial sobre Angular Online. Aprendí los dos módulos de Angular, UI-Router y Ng-Grid, e imité e hice algo pequeño.
El código se ha cargado a GitHub, y la dirección está aquí https://github.com/wwervin72/angular.
Los amigos interesados pueden echar un vistazo. Luego, aquí entendemos primero el uso de estos dos módulos.
Primero hablemos sobre el módulo UI-Router, que se utiliza principalmente para implementar el enrutamiento de nivel profundo. De hecho, Angular tiene una instrucción incorporada ng-rutee. Si no hay ningún problema de anidación en el proyecto, es bastante conveniente usar esta instrucción para lograr saltos entre páginas, pero sus deficiencias son que no tiene forma de usar rutas anidadas profundas. Primero, si queremos usar este módulo, necesitamos descargarlo.
La dirección de descarga está aquí http://www.bootcdn.cn/angular-ui-router/.
Después de descargar, podemos importarlo a nuestro proyecto. Tenga en cuenta aquí que debido a que este modular se basa en Angular, necesitamos importar un archivo JS Angular antes de esto. Esto se puede descargar en el sitio web oficial de Angular.
Luego, después de que se realicen los preparativos anteriores, podemos escribir nuestro código escrito a mano.
Parte html
<Viv> <div Ui-view> </div> </div>
Aquí hay una cosa a tener en cuenta que los atributos agregados en el DIV ya no son Ng-View, sino UI-View.
Parte js
var app = angular.module ('app', ['ui.router', 'loginModel', 'listModel']); app.config (function ($ stateProvider, $ urlrouterProvider) {$ urlrouterProvider.otherwise ('/index'); $ stateProvider .state. 'tpls/start.html'}) .state ('registrar', {url: '/registro', templateUrl: 'tpls/registert.html'}) .state ('main', {url: '/main {posicionType: [0,9] {1,5}}', vistas: {'': {TemplateUrl: 'tpls/main.html'}, 'typeList@main': {TemplateUrl: 'tpls/typeList.html'}, 'tbhero@main': {TemplateUrl: 'tpls/tbhero.html'}}}) .state ('addHero', {url: '/addHero', TemplPlyurl: TemplPlyurl: 'tpls/addhero.html'}) .state ('find', {url: '/findpwd', templateUrl: 'tpls/findpwd.html'}) .state ('detalle', {url: '/detall/: id', templateUrl: 'tpls/detalle.html'})})Hay tres lugares para prestar atención a:
1. Al anidar, la capa más externa de mí es la parte principal, y luego las partes típicas y tbhero están anidadas por dentro. Necesitamos prestar atención al método de escritura aquí.
2. Cuando necesitamos abrir diferentes contenidos de acuerdo con la elección, necesitamos pasar los parámetros a la página siguiente. Aquí está la parte detallada, y también debemos prestar más atención al método de escritura aquí.
3. Cuando usamos angular.module para crear una aplicación de aplicación, necesitamos importar el módulo UI.router en él, y algunos módulos que creamos también necesitamos importarlos aquí.
4. Utilizamos $ StateProvider para configurar rutas, no $ Routeprovider, y el estado utilizado aquí en lugar de cuándo.
Después de configurar el enrutamiento, el resto es escribir el código para cada parte de TPLS. No lo presentaré demasiado aquí. Lo más importante aquí es la configuración de enrutamiento.
Bien, echemos un vistazo al uso de Ng-Grid. Aquí está la dirección de descarga http://www.bootcdn.cn/ng-grid/.
Parte html
Parte principal
<Div> <div ui-view = "typelist"> </div> <div ui-view = "tbhero"> </div> </div>
parte del typelista
<Div> <viv> <viv> <a href = "JavaScript: void (0);"> Tipo de posicionamiento de héroe </a> <a ui-sref = "main ({positionType: 0})"> todos los posicionamiento </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})"> asistencia </a> </div> </div> </div>parte de tbhero
<div ng-concontroller = "listctrl"> <div> <div> <button ui-sref = "addHero ()"> Agregar héroe </botón> <botón ui-sref = "index ()"> salir </boton> </div> <div> <form> <put type = "text" ng-model = "filterOptions.filterTex </div> </div> <div> <div> <div ng-grid = "gridOptions"> </div> </div> </div> </div> </div> </div>
Parte js
var listModel = angular.module ('listModel', ['nggrid']); listModel.controller ('listCtrl', ['$ scope', '$ http', '$ state', '$ stateParams', function ($ scope, $ http, $ state, stateparams) {$ scope.pagingOptions = {PAGEATES: [5,15,20], PageSize: 5, CurrentPage: 1}; SearchText.tOlowerCase (); }); (data) {data.forEach (function (item, i) {item.index = i+1;}); $ scope.getDates ($ scope.pagingOptions.pagesize, $ scope.pagingOptions.currentPage); $ Scope.getDates ($ Scope.PagingOptions.pagesize, $ scope.pagingOptions.currentPage, $ scope.filterOptions.filterText); filas habilitadas cableLelection: true, // ¿Es posible seleccionar celdas EndabledCelledit: False? // es posible modificar el contenido EnabledPinning: true, // ¿Se bloquea la columna de columna? 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', Ancho: 70, Strayable: True, Pinnable: True}, {Field: 'Equip', DisplayName: 'Equth, Width: 500, Sortable: True, Pinnable: True}, {Field:' Id ', DisplayName:' Detalle Strategy ', Sortable: False, Pinnable: True, CellTeplate:' <Div> <a ui-sref = "detall ({id: row.getProperty (col.field)})" id = "{{row.getProperty (col.field)}}"> Detalles </a> </div> '}], EnablePaging: true, // puede convertir el showfooter de la página: true, // ¿Muestra el final de la tabla totalserververververserverss? // Número total de paginas de datos: $ Scope.PagingOptions, // Page Part FilterOptions: $ scope.filterOptions // Part de filtro de datos}}])Lo más importante aquí es $ scope.gridoptions. Al mismo tiempo, debemos prestar más atención al método de escritura de los parámetros en la última guía detallada.
Aquí hay algunas representaciones:
Aquí hay algunas representaciones:
Además, no introduciré el contenido de la verificación de la forma angular, el servicio, el asistente, el PHP, etc. aquí. Si hay algo malo en la escritura, dejaré un mensaje para informarle, gracias ^_ ^.
El breve análisis anterior de los módulos UI-Router y Ng-Grid en AngularJS es todo el contenido que he compartido con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.