Je m'ennuyais à la maison et j'ai trouvé un tutoriel sur Angular Online. J'ai appris les deux modules d'angulaires, d'interface utilisateur et de grille ng, et je l'ai imité et j'ai fait une petite chose.
Le code a été téléchargé sur github, et l'adresse est ici https://github.com/wwervin72/angular.
Les amis intéressés peuvent jeter un œil. Ensuite, nous comprenons d'abord l'utilisation de ces deux modules.
Parlons d'abord du module d'interface utilisateur, qui est principalement utilisé pour implémenter un routage de niveau profond. En fait, Angular a une instruction intégrée NG-ROUTE. S'il n'y a pas de problème de nidification dans le projet, il est tout à fait pratique d'utiliser cette instruction pour obtenir des sauts entre les pages, mais ses lacunes sont qu'il n'a aucun moyen d'utiliser des itinéraires imbriqués profonds. Donc, d'abord, si nous voulons utiliser ce module, nous devons le télécharger.
L'adresse de téléchargement est ici http://www.bootcdn.cn/angular-ui-router/.
Après le téléchargement, nous pouvons l'importer dans notre projet. Veuillez noter ici que parce que ce modulaire est basé sur Angular, nous devons importer un fichier JS angulaire avant cela. Cela peut être téléchargé sur le site officiel d'Angular.
Ensuite, une fois toutes les préparations ci-dessus, nous pouvons écrire notre code rédigé à la main.
Partie HTML
<div> <div ui-view> </div> </div>
Voici une chose à noter que les attributs ajoutés dans la div ne sont plus NG-View, mais la vue UI-.
Partie js
var app = angular.module ('app', ['ui.router', 'LoginModel', 'listModel']); app.config (function ($ stateProvider, $ urlrouterprovider) {$ urlrouterprovider.ise ('/ index'); $ staterl. 'tpls / start.html'}) .state ('registre', {url: '/ registre', templateUrl: 'tpls / registre.html'}) .state ('main', {url: '/ main {positionType: [0,9] {1,5}}', {'': ': {templateUrl:' tpls / main. }, '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 ('de détail', {url: '/ détail /: id', templateUrl: 'tpls / de détail.html'})})Il y a trois endroits pour prêter attention:
1. Lors de la nidification, la couche la plus externe de moi est la partie principale, puis les pièces Typelist et Tbhero sont imbriquées à l'intérieur. Nous devons faire attention à la méthode d'écriture ici.
2. Lorsque nous devons ouvrir différents contenus en fonction du choix, nous devons passer les paramètres à la page suivante. Voici la partie détaillée, et nous devons également accorder plus d'attention à la méthode d'écriture ici.
3. Lorsque nous utilisons Angular.Module pour créer une application d'application, nous devons y importer le module UI.Router, et certains modules que nous avons créés nous-mêmes devaient également les importer ici.
4. Nous utilisons $ StateProvider pour configurer les itinéraires, pas $ RouteProvider, et l'état utilisé ici au lieu de quand.
Une fois le routage configuré, le reste est d'écrire le code pour chaque partie de TPLS. Je ne le présenterai pas trop ici. La chose la plus importante ici est la configuration de routage.
D'accord, jetons un coup d'œil à l'utilisation de Ng-Grid. Voici l'adresse de téléchargement http://www.bootcdn.cn/ng-grid/.
Partie HTML
Partie principale
<div> <div ui-view = "typelist"> </div> <div ui-view = "tbhero"> </div> </div>
partie typelist
<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>partie tbhero
<div ng-controlller = "listctrl"> <div> <div> <button ui-sref = "addHero ()"> Ajouter le héros </ bouton </div> </div> <div> <div> <div ng-grid = "Gridoptions"> </div> </div> </div> </div> </div> </div>
Partie js
var listmodel = angular.module ('listModel', ['nggrid']); listModel.Controller ('listCtrl', ['$ scope', '$ http', '$ State', '$ Stateparams' [5,15,20], PageSize: 5, CurrentPage: 1}; $ scope.filterOptions = {filterText: '', useExternalFilter: true}; searchText.tolowerCase (); $ http.get ('data / héros.php? param =' + $ stateParams.positionType). }). $ http.get ('data / héros.php? param =' + $ stateParams.positionType) .success (fonction (data) {data.ForEach (function (item, i) {item.index = i + 1;}); $ scope.totalServertems = data.length; $ scope.datas = data.slice ((page-1) * pace * pace.datas); }). Erreur (Données) {alerte ('Erreur de demande ...');})}}, 100); $ scope. }, true); $ scope.gridoptions = {data: 'datas', // la source de données affichée dans le tableau multiselect: false, // est-il possible de sélectionner ColumnDefs: [{champ: 'index', // voici le nom d'attribut dans la largeur des données: 80, affichage: 'numéro de séquence', // voici le nom de chaque colonne du tableau pinnable: true, sortable: true // est-il possible de trier}, {champ: 'name', affichename: 'name', large: 120, triable: true, pinnable: true: 'name': ' DisplayName: 'Alias', DisplayName: 'Alias', DisplayName: 'Alias', DisplayName: 'Alias', Width: 60, Sortable: True, Pinnable: True,}, {Field: 'Position', DisplayName: 'Position', Width: 70, Triable: TRUE ', WILLSH: TRUE, {Field:' Equip ', affichenname:' équipe PINNABLE: true}, {champ: 'id', affichagename: 'Detail Strategy', sortable: false, pinnable: true, cellTemplate: '<div> <a ui-sref = "Detail ({id: row.getproperty (col.field)})" id = "{{row.getProperty (col.field)}}"> Detail true, // pouvez-vous tourner la page showfooter: true, // Affichez-vous la fin de la table TotalServeritems: 'TOTALSERVERITEMS', // Nombre total de données de données: $ scope.pagingoptions, // Page Part FilterOptions: $ scope.filteroPtions // partie de filtre de données}]]))La chose la plus importante ici est $ scope.gridoptions. Dans le même temps, nous devons accorder plus d'attention à la méthode d'écriture des paramètres dans le dernier guide détaillé.
Voici quelques rendus:
Voici quelques rendus:
De plus, je ne présenterai pas le contenu de la vérification de la forme angulaire, du service, de l'assistant, du php, etc. ici. S'il y a quelque chose de mal à l'écriture, je laisserai un message pour vous informer, merci ^ _ ^.
La brève analyse ci-dessus des modules d'interface utilisateur et de réseau Ng dans AngularJS est tout le contenu que j'ai partagé avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.