Основная идея Angular состоит в том, чтобы управлять всем с помощью данных, а все остальное - расширение данных.
Чтобы применить идею о том, что все является объектом, в угловом случае можно сказать, что все данные.
О строительстве проекта
(1) Требование и йомен
Когда вы впервые попадаете или используете Angular, вы всегда будете озадачены похожими вопросами. Мой практический ответ заключается в том, что вам не нужны требования или йомен. Первое не используется, потому что сам угловой имеет реализацию модуля. Последнее заключается в том, что угловая организационная структура и строительство проекта совершенно не нужны, чтобы быть настолько сложными. Просто напишите или вытащите начальный проект на GitHub.
(2) Как организовать структуру проекта
Эта проблема немного бесполезна, потому что она полностью варьируется от человека к человеку к проекту. Я лично рекомендую две организационные структуры, одну в соответствии с функцией кода, то есть контроллер помещается в одну папку, а службы размещаются в одной папке. Другой следует реализованным функциям. Например, пользователь помещает соответствующий шаблон, сервисы и контроллеры в папку пользователя.
Оба в порядке, и с точки зрения обслуживания, второй будет лучше.
(3) Отдел контроллера и обслуживания
Здесь контроллеры обычно являются одним контроллером на странице. Если страница имеет общую часть, публичная часть всегда использует контроллер. Сервис следует разделить на две части, одна - это служба, которая взаимодействует с данными сервера, а другая - некоторое функциональное общее содержание, которое помещает некоторые многократные услуги, написанные самим собой, аналогичными для уведомления и т. Д.
Что касается того, должна ли служба быть более разделена в соответствии с функциями и модулями, это зависит от проекта.
(4) Использование угловых плагинов и библиотек
Для проекта определенно нереально готовиться в Интернете, но еще более нереально писать все самостоятельно. Многие плагины в угловых разрабатываются угловой командой или некоторыми людьми, инкапсулированными в плагины jQuery. Мой взгляд на плагины очень прост. Если вы используете их, вы можете использовать их как можно скорее. Если вы не можете удовлетворить потребности, вы можете написать их самостоятельно или улучшить их на существующих плагинах.
Для плагинов, с которыми вы не можете справиться в течение нескольких часов отладки, пожалуйста, послушайте мои советы и откажитесь от них. Большинство плагинов-это плагины пользовательского интерфейса, поэтому вам не нужно заниматься сложностью. Иногда простые управления HTML также имеют свою простую красоту.
Если вы столкнетесь с конфликтами с угловым плагином, особенно плагинами пользовательского интерфейса, вы должны отказаться от одного из них в большинстве случаев, таких как Angular-UI и Angular-Strap.
Советы по использованию
Введя основной текст ниже, я перечислю некоторые методы, которые я использовал в процессе использования угловой, и перечислю их один за другим в форме сцены. Я не буду объяснять некоторые основные концепции угловых здесь. Эта статья искусна, а не основного учебника.
(1) Флегский конфликт между "{{}}" в Angular и Python
В шаблоне, используемом колбой Python, связывание данных также передается через два «{» брекеты, которые противоречат связующему связующему обращению Angular. Есть два решения для этого. Одним из них является изменение знаки связывания угловой, а другой - модифицировать знак связывания колбы. Оба решения даются здесь.
Измените Angular:
$ interpolateProvider.StartSymbol ('{[{'). Endymbol ('}]}');
// Просто добавьте это предложение в конфигурацию и поместите его в модуль маршрута. Здесь вы изменяете исходное угловое {{}} привязка с {[{}]} привязкой с {[{}]} привязкой.
Изменить колбу:
Class CustomFlask (Flask): Jinja_options = flask.jinja_options.copy () jinja_options.update (dict (block_start_string = '{%', block_end_string = '%}', variable_start_string = '{#', variable_end_string = '#}', somply_start_str Comment_end_string = '#>',)) app = customflask (__ name__, exance_path = '/web')Здесь я рекомендую изменить колбу, потому что после использования Angular передние и задние концы разделены. Шаблон Jinjia от Flask больше не нужен. В то же время, если вы изменяете метку угловой связывания, другие элементы управления и библиотеки будут иметь проблемы.
(2) Удалите URL -адрес всегда по умолчанию «#»
При настройке маршрута включите режим HTML5.
angular.module ('router', ['ngroute']). config (['$ routeprovider', '$ location provider', function ($ routeprovider, $ location provider) {$ location provider.html5mode (true); // установить это предложение}]);(3) ng-click = «выражение» и аналогичные инструкции, как написать несколько выражений в выражении?
Например, если я хочу назначить значения 2 переменные в NG-клике, я могу разделить его через «;» полуколон:
<a ng-click = "obja = 1; objb = 2"> </a>
(4) $ watch не влияет или вступает в силу один раз
Вообще говоря, эта ситуация появится при прослушивании строки или номера, $ racope. $ Watch ("name", function () {}). Это не вступает в силу или вступает в силу один раз. Решение заключается в том, что $ watch как можно больше слушает объект, и прикрепляет значение, которое вы хотите прослушать в объекте.
Когда вы используете Modal в Angular-UI, это более очевидно. Конкретная причина связана с наследством применения $. Поскольку Modal эквивалентен созданию другой области в контроллере текущей страницы, невозможно получить и отследить цепочку прототипа для литералов. Если вы хотите его решить, у вас должен быть объект для достижения привязки обновления данных в рамках области родительского ребенка через цепочку прототипа.
(5) Я надеюсь, что содержание NG-View отображается на всей странице
Обычно страница может иметь фиксированную верхнюю меню или боковую панель, такие фиксированные части, а затем каждый маршрут меняет шаблон NG-View. Если страница хочет, чтобы вся страница полностью отображалась, она не включает фиксированные части, такие как верхний меню.
Обычно здесь шаблон. HTML, отображаемый с помощью index.html и NG-View. Верхняя меню и боковая панель расположены в index.html. Их дисплей скрыт путем привязки переменной с ng-if.
Если страница должна быть полностью отображена сама по себе и не отображает боковую панель, то сообщение отправляется в его контроллере через $ Scope. $ Emit, а контроллер страницы индекса слушает сообщение через $ Scope. $ ON. Как только сообщение услышано, переменные, которые контролируют видимую и скрытую боковую панель, изменяются.
Вы также можете использовать сервис для управления глобальной переменной, а личные рекомендации по -прежнему проходят через вещание сообщений.
(6) Не забудьте использовать NG-IF вместо NG-SHOW
Это небольшая яма угловой, или можно сказать, что это яма, которая не является большой или маленькой. Некоторые длинные данные списка могут отображаться по умолчанию, скрытыми и нажав на отображение. Эта часть контента, которая может контролировать видимый и скрытый, также будет сопровождаться большим количеством привязки данных. Это сильно влияет на производительность при рендеринге страницы.
Возьмите список. Например, Angular обычно рекомендует, чтобы на странице было не более 2000 привязков данных. Если есть страница, которая напрямую связывает 2000 моделей, а затем вы загружаете ее, вы обнаружите, что она очень застряла. Если вы устанавливаете каждые 100 моделей в NG-Show, он не отображается по умолчанию, вы обнаружите, что это все еще очень застряло.
Затем вы заменяете все NG-Show на NG-IF, и вы обнаружите, что производительность мгновенно быстро, как два приложения. Причина в том, что NG-SHOW все еще будет выполнять все привязки, и NG-IF выполнит привязки, когда он будет равен TRUE, то есть он выполнит привязки при отображении. Это значительно улучшит производительность. Я использовал эту простую модификацию раньше, и страница загружалась примерно в 10 раз быстрее.
Поэтому, когда вы можете использовать NG-IF, используйте его вместо всех NG-Show и NG-HIDE.
(7) о NG-BIND-HTML
Обычно данные связаны с HTML-элементами, и NG-Bind достаточно, но в некоторых ситуациях то, что должно быть связано,-это не обычные данные, а HTML. Тогда NG-Bind недостаточно. Вам необходимо использовать NG-BIND-HTML, который выведет контент в качестве формата HTML. Например, если вы хотите вывести HTML с классом, то используйте NG-BIND-HTML, и требуется сотрудничество NGSANITIZE, и необходимо ввести соответствующий файл.
(8) Получить результат после фильтра данных.
Это обычно используется при поиске, например, несколько данных, образующих список. Затем отфильтруйте поле, и теперь вам нужно получить результат после фильтра, есть 2 способа.
Один из них написан в HTML NG-Repeat, как это:
ng-repeat = "Food in foodcategory._displayfoods = (foodcategory.foods | filter: {'name': searchobj.foodfilter} | orderby: food.sort_order)"
Таким образом, _displayFoods является окончательным результатом отображения после фильтра. Другим способом является использование двух наборов данных, один набор записан в контроллере, а затем фильтр и заказы работают в контроллере. Окончательный результат используется для NG-Repeat.
Первый метод более удобен, в то время как второй метод лучше, а производительность хороша.
(9) NG-Class и NG-стиль присваивает значения, судя
Определите, применять ли определенный класс и разные стили на основе значения переменной.
ng-class = "{'state-error' :! foodform.foodstock. $ valive}"
ng-style = "{color: i.color == '' || i.name == 'live'? '' default ':' #ffff '}"
(10) Проверка формы принимает ввод в качестве примера
Угловую форму можно проверить через атрибут ввода HTML5. Здесь он в основном заблокирован через форму и атрибуты входного имени. formname.inputname. $ valy указывает, проходит ли пространство, где имя, передается в INPUTNAME, проверку собственной атрибуты.
(11) $ обещание для $ resource и $ http
$ Q.all ([resource.query (). $ propect, resource2.query (). $ promise]). Тогда (functon (успех) {console.log (успех);}, functon (error) {console.log (ошибка);}); foodfactory.food.save (f). $ promis.then (function) foodfactory.food.get ({id: result.id}). $ promise.then (function (data) {});});Это не объяснено, просто прочитайте это напрямую. Обратите внимание, что обещание $ HTTP должно быть возвращено вручную, поэтому в целом он проходит ресурс.
(12) Только одна недвижимость в $ Watch прослушивает
Установите третий параметр $ watch на Deep To Deep Watch. Однако иногда вы не хотите или не хотите слушать все свойства коллекции. Просто следите за одним или несколькими из них, хотя вы можете зацикливаться на петле, это, очевидно, слишком разочаровывает.
С помощью следующего метода записи вы можете отслеживать свой свойство объекта коллекции.
$ scope.people = [{"groupname": "g1", "persions": [{"id": 1, "name": "bill"}, {"id": 2, "name": "bill2"}]}, {"GroupName": "G2", "Первая листь "Bill4"}]}] $ scope. $ watch (function ($ scope) {return $ scope.people.map (function (obj) {return obj.persions.map (function (g) {return g.name});});}, функция (newval) {$ scope.count ++; истинный);(13) Дебал на лечение анти-сосуды
Это очень полезно для частой обработки отправления и подходит для некоторых сценариев, таких как NG-Change и $ Watch. Например, когда поиск по ключевым словам устраняется, $ debounce инкапсулируется в качестве услуги, а интерфейс называется напрямую. Код: http://jsfiddle.net/warspawn/6k7kd/
(14) Быстро найти место в месте
Вообще говоря, страница может быть объединена с кодом JS для достижения быстрого позиционирования через форму <a id = "Bottom"> </a>. В угловании он также реализуется с помощью аналогичных принципов, а код выглядит следующим образом:
var Old = $ location.hash (); $ location.hash ('batchmenu-bottom'); $ anchorscroll (); $ location.hash (старый);Это связано с тем, что прямое местоположение. Hash вызовет изменения URL и прыжки с страницы, поэтому добавляется код для предотвращения прыжков.
Я в настоящее время суммировал так много. Многие вещи ищут информацию и практикуются на себе. Я надеюсь, что они будут полезны для TX, который вам нужен. Если в будущем появится что -нибудь новое, я буду продолжать писать это.
Выше приведено краткое изложение угловых навыков применения. Мы будем продолжать добавлять и организовывать соответствующие статьи в будущем. Спасибо за поддержку этого сайта!