Мне было скучно дома, и мне случайно найти учебник об угловом онлайн. Я выучил два модуля Angular, UI-Router и NG-Grid, имитировал его и сделал небольшую вещь.
Код был загружен в GitHub, и адрес здесь https://github.com/wwervin72/angular.
Заинтересованные друзья могут посмотреть. Затем мы сначала понимаем использование этих двух модулей.
Давайте впервые поговорим о модуле пользовательского интерфейса, который в основном используется для реализации глубокого уровня маршрутизации. На самом деле, Angular имеет встроенную инструкцию NG-Route. Если в проекте нет проблем с гнездованием, вполне удобно использовать эту инструкцию для достижения прыжков между страницами, но его недостатки в том, что она не может использовать глубокие вложенные маршруты. Итак, во -первых, если мы хотим использовать этот модуль, нам нужно его скачать.
Адрес загрузки здесь http://www.bootcdn.cn/angular-ui-router/.
После загрузки мы можем импортировать его в наш проект. Обратите внимание, что, поскольку этот модул основан на угловой, нам необходимо импортировать Angular File JS до этого. Это может быть загружено на официальном сайте Angular.
Затем после всех вышеперечисленных приготовлений мы можем написать наш код вручную.
HTML Part
<div> <div ui-view> </div> </div>
Вот одна вещь, чтобы отметить, что атрибуты, добавленные в DIV, больше не NG-View, а UI-просмотр.
JS Part
var app = angular.module ('app', ['ui.router', 'loginmodel', 'listmodel']); app.config (function ($ stateprovider, $ urlrouterprovider) {$ urlrouterprovider.therwise ('/index'); $ stateprovider .State ('index', {uspate ','/indexl 'tpls/start.html'}) .state ('register', {url: '/regist', templateurl: 'tpls/regist.html'}) .state ('main', {url: '/main {pusectionpe: [0,9] {1,5}}', views: {': {tomplate: {tomplate: 'tpls/main.html'}, 'typelist@main': {templateurl: 'tpls/typelist.html'}, 'tbhero@main': {templateurl: 'tpls/tbhero.html'}}}. 'tpls/addhro.html'}) .state ('find', {url: '/findpwd', templateurl: 'tpls/findpwd.html'}) .state ('detail', {url: '/detail/: id', templateurl: 'tpls/detail.html'})Есть три места, на которые можно обратить внимание на:
1. При гнездовании внешний слой меня является основной частью, а затем вложенные детали Typelist и Tbhero вложены внутри. Нам нужно обратить внимание на метод написания здесь.
2. Когда нам нужно открыть различное содержимое в соответствии с выбором, нам нужно передать параметры на следующую страницу. Вот детальная часть, и мы также должны уделять больше внимания методу написания здесь.
3. Когда мы используем Angular.Module для создания приложения приложения, нам необходимо импортировать в него модуль UI.Router, и некоторые модули, которые мы сами создали, также должны импортировать их здесь.
4. Мы используем $ stateprovider для настройки маршрутов, а не $ routeprovider, и состояние, используемое здесь вместо того, когда.
После того, как маршрутизация настроена, остальное - написать код для каждой части TPL. Я не буду вводить это слишком много здесь. Самая важная вещь здесь - конфигурация маршрутизации.
Хорошо, давайте посмотрим на использование NG-Grid. Вот адрес загрузки http://www.bootcdn.cn/ng-grid/.
HTML Part
Главная часть
<div> <div ui-view = "typelist"> </div> <div ui-view = "tbhero"> </div> </div>
Typelist Part
<div> <div> <div> <a href = "javascript: void (0);"> Тип позиционирования героя </a> <a ui-sref = "main ({positiontype: 0})"> все позиционирование </a> <a ui-sref = "main ({posiptype: 1})"> «Производители </a> <a ui-sref = "main ({posifype: 2})"> Middle Lane </a> <a ui-sref = "main ({positiontype: 3})"> Top Lane </a> <a ui-sref = "main ({posiptype: 4})"> Jungler </a> <a ui-sref = "main ({posiptype: 5})"> помощь </a> </div> </div> </div>Tbhero Part
<div ng-controller = "listctrl"> <div> <div> <button ui-sref = "addho ()"> добавить герой </button> <button ui-sref = "index ()"> exit </button> </div> <div> <form> <input = "ng-model =" filteroptions.filtertext "warce work work work work work workword wormodel =" filteroptions.filtertext "water work work workworde. </form> </div> </div> <div> <div> <div ng-grid = "gridoptions"> </div> </div> </div> </div> </div> </div>
JS Part
var listmodel = angular.module ('listmodel', ['nggrid']); listmodel.controller ('listctrl', ['$ scope', '$ http', '$ atation', '$ atationparams', функция ($ scope, $ http, $ stateparams) [5,15,20], Pagesize: 5, CurrentPage: 1}; searchtext.tolowercase (); }); (data) {data.foreach (item, i) {item.index = i+1;}); $ scope.getdates ($ scope.pagingoptions.paderize, $ scope.pagingoptions.currentpage); $ scope.getdates ($ scope.pagingoptions.paderize, $ scope.pagingoptions.currentpage, $ scope.filteroptions.filtertext); строки enabledCellSelection: true, // возможно ли выбрать ячейки EnabledCellEdit: false, // возможно ли изменять контент включено: true, // Это заблокированные ColumnDefs: [{Field: 'Index', // Вот имя атрибута в ширине данных: 80, «Последовательный номер». Sort}, {Field: 'name', displayName: 'name', width: 120, sortable: true, pinnable: true}, {field: 'псевдоним', DisplayName: 'псевдоним', DisplayName: 'Alias', DisplayName: 'Alias', DisplayName: 'Alias', Width: 60, Sortable: True: True: True: 'Ploiple:' Ploiple: 'Ploiple: Ширина: 70, сортируется: true, pinnable: true}, {field: 'equip', displayname: 'equip', width: 500, сортируемый: true, pinnable: true}, {field: 'id', displaynam UI-SREF = "Detail ({id: row.getProperty (col.field)})" id = "{{row.getProperty (col.field)}}"> Подробная информация </a> </div> '}], Enuctable: True, // Вы можете повернуть страницу Showfooter: true, // do Вы отображаете end of tatalsertemes: Data PagingOptions: $ scope.pagingoptions, // Fileptions Page Part: $ scope.filteroptions // Часть фильтра данных}}])Самая важная вещь здесь - $ scope.gridoptions. В то же время мы должны уделять больше внимания методу написания параметров в последнем подробном руководстве.
Вот несколько визуализаций:
Вот несколько визуализаций:
Кроме того, я не буду представлять содержимое проверки угловой формы, обслуживания, мастера, PHP и т. Д. Здесь. Если с написанием что -то не так, я оставлю сообщение, чтобы сообщить вам, спасибо ^_ ^.
Приведенный выше краткий анализ модулей пользовательского интерфейса и ng-grid в AngularJS является всем контентом, которым я поделился с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.