Первая статья AngularJs Stearch Notes, я надеюсь, что смогу продолжать писать. Содержание этой статьи в основном происходит из содержания документа http://docs.angularjs.org/guide/, но также добавляет некоторые из ваших собственных результатов и попыток.
1. Резюме
В этой статье объясняется процесс угловой инициализации и как вручную инициализировать угловую, когда вам это нужно.
2. Angular <Script> Tag
Этот пример используется, чтобы показать, как интегрировать Angular через рекомендуемый путь для достижения автоматической инициализации.
<! Doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html>
Поместите тег Sciprt внизу страницы. Это может предотвратить нагрузку HTML путем загрузки Angular.js, тем самым сокращая время нагрузки применения. Мы можем получить последнюю версию Angularjs в http://code.angularjs.org. По соображениям безопасности не обращайтесь напрямую к этому адресу в продукте для загрузки сценария. Но если это просто для исследований и обучения, не имеет значения, является ли это прямой связью.
SELECT: Angular- [версия] .JS-это версия, которая удобна для чтения и подходит для ежедневной разработки и отладки.
Выберите: Angular- [версия] .min.js-это сжатая и запутанная версия, подходящая для использования в конечном продукте.
Поместите «ng-app» в корневой узел приложения. Если вы хотите, чтобы Angular, чтобы автоматически запустить ваше приложение, вы обычно можете поместить его в тег <html>.
<html ng-app>
Если нам нужно использовать синтаксический синтаксический стиль старой школы «ng:», тогда нам нужно добавить XML-Namespace в тег HTML, чтобы «пожалуйста» IE. (Это историческая причина, и мы не рекомендуем использовать ng :)
<html xmlns: ng = "http://angularjs.org">
3. Автоматическая инициализация
Angular будет автоматически инициализирован в домуттентском событии, и Angular найдет корневой узел приложения, указанный вами через директиву NG-APP. Если найдено, Angular сделает следующее:
Директивы загрузки, связанные с модулем.
Создайте инжектор, связанный с приложением (диспетчер зависимостей).
Укажите корневой узел с NG-APP и запустите соответствующую работу «компиляции» DOM. Другими словами, часть страницы (не <tml>) может использоваться в качестве корневого узла, тем самым ограничивая объем угловой.
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-auto </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> Вот внешняя внешняя часть ng-app ~~ {{1+2}} <div ng-app> вот внутренняя часть ng-app ~~~ {{1+3*2}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </body> </html>Примечание: «NG-Cloak» в нем используется до завершения компиляции Angular.js (да! Это верно! Это до завершения компиляции, а не до того, как нагрузки AngularJS. Следовательно, если вы хотите хорошо избежать этой ситуации, лучший способ оптимизировать процесс загрузки приложения, или сочетать CSS для обработки некоммерческих шаблонов. Class = "NG-Cloak" Метод.
4. Ручная инициализация
Если мы хотим дополнительно управлять процессом инициализации (например, вам необходимо загрузить Angular.js через загрузчик сценария или выполнить некоторые операции перед страницей Angular Compilation), то мы можем вместо этого использовать метод запуска вручную.
Следующий пример эквивалентен использованию ng-app, директива:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap- Manual </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> Вот внешняя внешняя часть ng-app ~~ {{1+2}} <div id = "rootofapp"> Это внутренняя часть ng-app ~~~ {{1+3*2}} </div> <script src = "../ angular-1.1.js" typect/javascript "/javascript"/jav type = "text/javascript"> angular.element (document) .ready (function () {angular.bootstrap (angular.element (document.getElementById ("rootOfApp"));}); </script> </body> </html>То есть наш код может быть записан в следующих шагах:
1. После загрузки страницы и другого кода найдите корневой узел шаблона приложения;
2. Вызовите Angular.bootstrap и позвольте угловой компиляции шаблона в исполняемое двустороннее приложение для привязки!
Мы будем продолжать добавлять соответствующие статьи в будущем. Спасибо за поддержку этого сайта!
Связанные статьи:
Angularjs Bootstrap оснащен интерфейской каркасом - JS Control Part
AngularJs Bootstrap оснащен фронтальной каркаью - базовая страница
AngularJs Bootstrap, оснащенная передней рамкой -
Angularjs Bootstrap подробное объяснение и пример кода