Ich war zu Hause gelangweilt und fand zufällig ein Tutorial über Angular online. Ich lernte die beiden Module von Angular, UI-Router und Ng-Grid und ahmte sie nach und machte eine kleine Sache.
Der Code wurde in GitHub hochgeladen, und die Adresse ist hier https://github.com/wwirvin72/angular.
Interessierte Freunde können einen Blick darauf werfen. Dann verstehen wir hier zuerst die Verwendung dieser beiden Module.
Sprechen wir zuerst über das UI-Router-Modul, das hauptsächlich zur Implementierung von Tiefständen verwendet wird. In der Tat verfügt Angular über eine eingebaute Anweisung ng-route. Wenn das Projekt kein Verschachtelungsproblem gibt, ist es ziemlich bequem, diese Anweisung zu verwenden, um Sprünge zwischen den Seiten zu erreichen, aber seine Mängel sind, dass es keine Möglichkeit hat, tiefe verschachtelte Routen zu verwenden. Wenn wir dieses Modul verwenden möchten, müssen wir es zuerst herunterladen.
Die Download-Adresse ist hier http://www.bootcdn.cn/angular-ui-router/.
Nach dem Herunterladen können wir es in unser Projekt importieren. Bitte beachten Sie hier, dass wir davor, da dieses Modular auf Angular basiert, vorher eine Winkel -JS -Datei importieren müssen. Dies kann auf der offiziellen Website von Angular heruntergeladen werden.
Nachdem alle oben genannten Vorbereitungen durchgeführt wurden, können wir unseren Code-Handschrieben schreiben.
HTML -Teil
<div> <div ui-view> </div> </div>
Hier ist eine Sache zu beachten, dass die im Div hinzugefügten Attribute nicht mehr ng-view, sondern UI-View sind.
JS Teil
var app = angular.module ('app', ['ui.router', 'loginModel', 'listModel']); App.Config ($ stateProvider, $ urlrouterProvider) {$ urlrouterProvider.otherIge ('/Index'/Index; $ StateProvider. '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' })})Es gibt drei Orte, auf die man sich beachten kann:
1. Beim Verschärfen ist die äußerste Schicht von mir der Hauptteil, und dann sind die Typelisten- und Tbhero -Teile im Inneren verschachtelt. Wir müssen hier auf die Schreibmethode achten.
2. Wenn wir verschiedene Inhalte entsprechend der Wahl öffnen müssen, müssen wir Parameter an die nächste Seite übergeben. Hier ist der Detailteil, und wir müssen auch der Schreibmethode mehr Aufmerksamkeit schenken.
3. Wenn wir Angular.module verwenden, um eine App -Anwendung zu erstellen, müssen wir das UI.router -Modul darin importieren, und einige Module, die wir selbst erstellt haben, müssen sie auch hier importieren.
V.
Nach der Konfiguration des Routings besteht der Rest darin, den Code für jeden Teil von TPLs zu schreiben. Ich werde es hier nicht zu viel vorstellen. Das Wichtigste hier ist die Routing -Konfiguration.
Okay, werfen wir einen Blick auf die Verwendung von NG-Grid. Hier ist die Download-Adresse http://www.bootcdn.cn/ng-grid/.
HTML -Teil
Hauptteil
<div> <div ui-view = "typelist"> </div> <div ui-view = "tbhero"> </div> </div>
Typelist Teil
<div> <div> <div> <a href = "javaScript: void (0);"> Heldenpositionierungstyp </a> <a ui-sref = "main ({PositionType: 0})"> Alle Positionierung </a> <a ui-sref = "main ({{Positiontype: 1})" Schützen ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">" ui-sref = "main ({{{pospectype: 1})" schießer 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 Teil
<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 gent-model =" filteropions.Filterte.Filterte.Filterte.Filtertex. " </div> </div> <div> <div> <div ng-grid = "gridOptions"> </div> </div> </div> </div> </div> </div>
JS Teil
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}; SearchText.tolowerCase (); }); $ http.get ('data/Hero.php? param ='+$ stateParams.PositionType) .success (Funktion (Daten) {data.foreach (Funktion (item, i) {itel.index = i+1;}); }). Fehler (function (data) {alert ('anforderungsfehler ...');})}}}, 100); $ scope.getDates ($ scope.PagingOptions.PageSize, $ scope.pagingOptions.currentPage); }, true); 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: 'detailstrategie', sortierbar: false, finnbar: true, cellTemplate: '<div> <a ui-sref = "detail ({id: row.getProperty (col.field)})" id = "{{row.getProperty (col.field)}}} details: todes: Sie drehen den Seitenshowfoter: true, // Zeigen Sie das Ende der Tabellen -Tollerveritems an: 'TotalServeritems', // Gesamtzahl der DatenpagingOptionen: $ scope.pagingOptions, // Seiten Teilfilteroptionen: $ scope.filteroptionen // Datenfilter Teil}}])Das Wichtigste hier ist $ scope.gridOptions. Gleichzeitig müssen wir der Schreibmethode der Parameter im letzten detaillierten Handbuch mehr Aufmerksamkeit schenken.
Hier sind ein paar Renderings:
Hier sind ein paar Renderings:
Darüber hinaus werde ich hier nicht den Inhalt der Winkelformüberprüfung, des Dienstes, des Assistenten, des PHP usw. einführen. Wenn am Schreiben etwas nicht stimmt, werde ich eine Nachricht hinterlassen, um Sie zu informieren, danke ^_ ^.
Die obige kurze Analyse der Module UI-Router und NG-Gitter in AngularJS ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.