Когда мы пишем Angularjs приложения, очень сложно получить данные (данные) и услуги, скрытые в приложении, через консоли JavaScript Chrome, Firefox и IE. Вот несколько простых советов, которые могут помочь нам использовать консоль JavaScript для мониторинга и управления действующим угловым приложением, облегчая тестирование, изменение или даже запись угловых приложений в режиме реального времени.
1: Получить сферу (сфера)
Мы можем использовать строку кода JS, чтобы получить любую область (или даже изолированные области):
Скопируйте код следующим образом:> angular.Element (targetNode) .scope ()
-> childscope {$ id: "005", это: childscope, $$ слушатели: объект, $$ listenercount: Object, $ parent: scope…}
Или получить изолированные прицелы:
Скопируйте код следующим образом:> angular.Element (TargetNode) .IsolatesCope ()
-> Scope {$ id: "009", $$ Childtain: Childscope, $$ childhead: kildscope, $$ Provsibling: Childscope, $$ nextsibling: scope…}
TargetNode здесь относится к HTML -узлу (HTML Node). Вы можете легко использовать Document.QuerySelector (), чтобы получить его.
2: Монитор Дерево областей (дерево областей)
Чтобы лучше отлаживать наше приложение, иногда нам нужно проверить структуру (область применения) на странице. В настоящее время нам нужно использовать Angularjs
Baratang и NG-Inpector-это два хромированных расширения браузера, которые помогут нам рассматривать возможности в режиме реального времени. И эти два расширения имеют некоторые другие очень полезные функции.
(1) .Angularjs Baratang
(2) .ng-inspector
3: Служба Crawl (услуги)
Мы можем использовать функцию инжектора, которая определяет элемент NGAPP, чтобы получить любую службу (сервис) или косвенно получить сервис (сервис) через любой элемент с классом NG-Scope.
Скопируйте код следующим образом:> angular.Element (document.queryselector ('html')). Injector (). Get ('myservice')
-> Object {undo: function, redo: function, _pushaction: функция, newDocument: function, init: function…}
// или немного более общий
> Angular.Element (Document.Queryselector ('. NG-Scope')). Injector (). get ('MyService')
Далее мы можем использовать связанную службу так же, как и после введения в программу.
4: Получить контроллер из Директивы
Существуют директивы (инструкции), которые определяют определенные (обычно общие) функции как контроллер. Чтобы получить пример контроллера с указанной директивой из консоли, нам нужно только использовать функцию Controller ().
Скопируйте код следующим образом:> angular.Element ('my-pages'). Controller ()
-> Конструктор {}
Последний не используется, но является более продвинутой техникой.
5: Хромированная консоль (консольная) функции
Chrome имеет много очень полезных команд ярлыков для отладки веб -приложений в консоли (консоль). Вот некоторые из самых полезных команд для углового развития:
$ 0 - $ 4: Получите последние 5 элементов DOM в окне Inspotor (монитор). Этот сочетание метода может помочь нам захватить области (область (область) выбранного элемента: angular.element ($ 0) .scope ()
$ (селектор) и $$ (селектор): он может удобно заменить QuerySelector () и Queryselectorall.
Спасибо @ZGOHR за этот совет!
Суммировать
С этими простыми советами мы можем получить данные в любом объеме, мониторинг иерархии областей, услуг инъекций и управления.
Поэтому в следующий раз, когда вы захотите сделать тонкую настройку, проверить код или управлять приложением AngularJS из консоли, я надеюсь, что вы сможете запомнить эти советы, как я, и использовать их больше.
Чтобы просмотреть больше синтаксиса Angularjs, вы можете следовать: AngularJs Справочная версия английской версии, и я надеюсь, что все будут поддерживать Wulin.com больше.