Структура AngularJS в основном используется в передних проектах. Я раньше не знал об этой структуре, и это было потому, что я вступил во владение недавно, поэтому я планировал научиться это хорошо. Раньше я был ПК, но теперь я взял на себя мобильный проект. Мобильная структура пользовательского интерфейса использует Ionic + Vordova, но не использует начальную загрузку. В основном я использую интерфейс приложения iOS + Android. Я не знаю много об ионной рамках, и мне нужно потратить время, чтобы познакомиться с этим. Angularjs Learning Novices приветствуют меня исправить.
Что такое angularjs?
Проще говоря, это структура JavaScript, которая добавляется на веб -страницу с помощью тегов сценариев. То есть, когда мы используем AngularJS, нам нужно представить следующий код.
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
Обычно рекомендуется разместить сценарий в нижней части элемента <body>, который должен улучшить скорость загрузки веб -страницы. Потому что загрузка HTML не подлежит загрузке скрипта.
Что такое angularjs?
AngularJS облегчает разработку современных одностраничных приложений (спа -салоны: приложения для одной страницы).
• AngularJS связывает данные приложения с элементами HTML.
• AngularJs могут клонировать и повторять HTML -элементы.
• AngularJs может скрывать и отображать HTML -элементы.
• AngularJs может добавить код «за« html -элементом ».
• AngularJs поддерживает проверку ввода.
Например, мобильные терминалы в основном используют сравнения на одну страницу, которые выполняются с использованием угловой конверсии маршрутизации. Как и наш текущий проект, мы также используем одну страницу. То есть на главной странице все прыгающие страницы выполняются на главной странице. Скриншот выглядит следующим образом:
Angularjs выражения
Выражение AngularJS записано в двойных скобках: {{Expression}}.
Экспрессии AngularJS связывают данные с HTML, что аналогично директиве NG-Bind.
AngularJs будет «выводить» данные в месте, где написано выражение.
Выражения AngularJS во многом похожи на выражения JavaScript: они могут содержать литералы, операторы и переменные.
<! Doctype html> <!-Tag angularjs для обработки всей страницы HTML и загрузки приложения-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </head> <body> <p> Имя: {{"ting"+"feng"}} </p> <p> Номер: {5+5}} </p> <div ng-init = "person = {name: 'tingfeng', age: '13 '}"> <p> name: {{person.name}} возраст: {{person.age}} </p> </div> </body> </html>Применение AngularJs в HTML
В основном расширяет HTML через NG-направляющий. Директива AngularJS представляет собой HTML -атрибут, префиксированный NG, который содержит четыре основные функции: MVC, модульная система, система инструкций (Директива) и батанирование данных
NG-INIT: эта директива инициализирует переменные приложения AngularJS. Например, следующие столбцы:
<! Doctype html> <!-Tag angularjs, чтобы обработать всю страницу HTML и направлять приложение-> <html ng-App> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </script> </script> </script> </script> </script> </script> </script> </script> </script> </script. ng-init = "name = 'tingfeng'"> <p> имя: <span ng-bind = "name"> </span> </p> </div> </body> </html>
NG-APP: эта директива указывает на то, что приложение AngularJS определено. Обычно расположенные за HTML, вы также можете использовать директиву NG-APP на месте. Например, <viv ng-app>, сценарий Angularjs будет работать только в Div, что означает, что отсюда все содержание является Angularjs для управления.
NG-Model: Эта директива относится к значениям привязки (например, значение ввода) приложения.
NG-Bind: Эта директива связывает данные приложения с представлением HTML. Используйте соответствующие инструкции, чтобы использовать AngularJS для работы на HTML -странице. Давайте посмотрим на код, как его использовать.
В настоящее время используйте NG-модель, чтобы привязаться к переменной модели SetName. При вводе значения в поле ввода соответствующее имя SETNAME также изменится. Вы можете проверить это самостоятельно.
Объяснение о объеме $
Что такое $ scope? Какова его функция? Как его использовать?
Проще говоря, Scope - это POJO (PlainoldjavascriptObject), аналогичный объекту, с свойствами и методами, Scope - это Pojo (plainoldjavascriptObject), аналогичный объекту, с свойствами и методами, Scope обеспечивает Watch (), Watch () и применение () методы инструмента. MVC AngularJS все сделан с помощью $ Scope.
Особенности: 1. Это среда выполнения (или объем) выражения
2. Прицел - это структура дерева, параллельная с меткой DOM, содержащая прицел, которая является структурой дерева, параллельной метке DOM, содержащей на нем корни, находится на верхнем уровне.
3. Область применения унаследован в области родительского масштаба будет наследовать свойства и методы родительского корткопа.
4. $ Scope может распространять события, аналогичные DOM, который может распространять или вниз.
5. $ Scope является не только основой MVC, но и основой для реализации двустороннего привязки позже.
Компоненты Angularjs
Шаблон: то есть написанные файлы HTML и CSS, показывающие представление приложения. AngularJS может построить свои собственные HTML -теги в HTML!
Контроллер: в отличие от AJAX, нет необходимости писать слушатель или контроллер DOM, поскольку он уже встроен в AngularJS. Преимущества: легко писать, проверять, поддерживать и понимать.
Данные модели: модель расширяется от AngularJs как атрибуты объектов домена. Данные модели могут быть объектом JS, массивом или примитивным типом, но все они принадлежат к объекту AngularJS.
Как понять масштаб в AngularJs?
То есть сфера может рассматриваться как шаблон, связь, которая работает вместе с моделью и контроллером. AngularJS использует область, а в шаблоне есть также информация, модели данных и контроллеры. Они могут помочь разделить модель и представление, но они оба синхронизированы! Любые изменения в модели будут немедленно отражены на представлении, и любые изменения в представлении будут немедленно отражены в модели.
Вид: В AngularJs представление - это отображение после того, как модель отображается через шаблон HTML. То есть, независимо от того, когда изменяется модель, AngularJs обновят точки соединения в режиме реального времени и обновляют представление.
Это более интуитивно понятно для пост -кодов!
<! Doctype html> <html ng-app = "helloangular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </scrode> <croppt> // modular var mymodul = angodula. []); －Control шаблон helloangularmymodule.controller ("helloangular", ['$ scope', функция helloangular ($ scope) {$ scope.value = {name: 'jiangting'};}]); </script> </head> <body> <!-mvc-view angular-> <div ng-controller = "helloangular"> － Контроллер helloargular <p> {{value.name}}, Hello! </p> </div> <!-Angular Modular-> </body> </html>Давайте посмотрим на приложение контроллера, то есть контроллер, то есть контроллер управляет данными, связывает его и отображает его на странице HTML.
Angularjs Module (модуль) определяет приложения AngularJS.
Контроллер AngularJS (контроллер) используется для управления приложениями AngularJS.
Директива NG-APP определяет приложение, а контроллер NG определяет контроллер. Давайте используем приведенные выше столбцы для просмотра:
Модуль AngularJS определяет приложения:
var mymodule = angular.module ("helloangular", []); －Control Шаблон HelloAngularAngularJs Controller Controlment Application:
mymodule.controller ("helloangular", ['$ scope', функция helloangular ($ scope) {$ scope.value = {name: 'jiangting'};}]);Понять фронт-энд MVC
О функциях контроллера:
1. Не пытайтесь взять контроллер, контроллер обычно отвечает только за небольшой вид.
2. Не управляйте DOM непосредственно в контроллере, это не его ответственность
3. Не выполняйте операции фильтрации данных в контроллере, существует служба фильтра
4. Не форматируйте данные в контроллере, NG имеет очень полезные элементы управления формой
5. Контроллер не будет звонить друг другу. Взаимодействие между контроллерами будет проводиться через события. Это будет через службу фильтра. 4. Не форматируйте данные в контроллере. Есть очень полезные элементы управления формой. 5. Контроллер не будет звонить друг другу. Взаимодействие между контроллерами будет проводиться через события. Это будет осуществляться через масштаб.
Давайте посмотрим, как настроить командную систему, код выглядит следующим образом:
<! Doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </scrode> <script> // Система обучения var mymodule = Angular.module (Mymodule ("MyModule (" MyModule ("," MyModule ("MyModule (" MyModule ("," MyModule ("MyModule" []); myModule.Directive ("hello", function () {return {ruptrict: 'e', шаблон: '<div> Привет всем!В Директиве впоследствии возвращаются три параметра, где средняя шаблона относится к вставленной метке HTML. Теперь я сам напишу кусок HTML -кода и посмотрю, как написать его в AngularJS.
Оригинальный статический HTML -код заключается в следующем:
<ul> <li> <pan> new1 </span> <p> Просто тест Page1 </p> </li> <li> <pan> new2 </span> <p> Просто тест Page2 </p> </li> </ul>
Способ изменить его на AngularJS заключается в следующем:
<! Doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </scrod> <script> // $ Scope-это применение контроллера. // AngularJs Scope: он может рассматриваться как шаблон. После того, как приложение будет запущено, будет создана корневая область, а область контроллера является типичным преемником корневой области. Function newsctrl ($ scope) {$ scope.news = [{"content": "new1", "ввести": "просто тест page1"}, {"content": "new2", "ввести": "просто тест Page2"}]; commas};} </script> </head> <body ng-controller = "newsctrl"> <ul> <li ng-repeat = "new In news"> {{new.content}} <p> {{new.introduce}} </p> </li> </ul> </body> </htmluce}Выше приведено анализ основных особенностей AngularJS, представленных вам редактором (i). Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!