Я новичок в Angular JS. Я прошел через ссылку ниже. http://docs.angularjs.org/tutorial/step_00
Что такое файлы начальной загрузки? Где они расположены?
Что такое автоматическая загрузка и ручная инициализация начальной загрузки? Я прочитал недостаток ручной инициализации, как показано ниже.. из ссылки http://docs.angularjs.org/guide/bootstrap
Может ли кто-нибудь объяснить, в чем тут недостаток?
Несмотря на то, что Everyone above ответил отлично, и я нашел то, что искал, но все же рабочий пример кажется отсутствующим.
Хотя понимание об автоматической/ручной загрузке в AngularJS ниже примеров может помочь много:
AngularJS: автозагрузка:
Angular автоматически инициализирует /bootstraps при событии DOMContentLoaded или при загрузке angular.js script в браузер и завершается установка document.readyState. В этот момент AngularJS ищет директиву ng-app. Когда найдена директива ng-app, Angular будет:
Загрузите модуль, связанный с директивой.
Создайте инжектор приложения.
Скомпилируйте DOM, начиная с корневого элемента ng-app.
Этот процесс называется автозагрузкой.
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl">Hello {{msg}}!</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
$scope.msg = 'Nik';
});
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/nikdtu/ohrjjqws/
AngularJS - Ручная загрузка:
Вы можете вручную инициализировать приложение Angular с помощью функции angular.bootstrap(). Эта функция принимает модули как параметры и должна вызываться внутри функции angular.element(document).ready(). Функция angular.element(document).ready() запускается, когда DOM готов к обработке.
<html>
<body>
<div ng-controller="Ctrl">Hello {{msg}}!</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
$scope.msg = 'Nik';
});
//manual bootstrap process
angular.element(document).ready(function () { angular.bootstrap(document, ['myApp']); });
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/nikdtu/umcq4wq7/
Примечание:
Вы не должны использовать директиву ng-app при ручной загрузке ваше приложение.
Вы не должны смешивать автоматический и ручной способ загрузки ваше приложение.
Определите модули, контроллер, службы и т.д., прежде чем вручную загрузив ваше приложение, как определено в приведенных выше примерах.
Ссылка: http://www.dotnettricks.com/books/angularjs/interview
Бутстрапинг является эквивалентом инициализации или запуска вашего приложения Angular. Существует 2 основных способа сделать это.
Первый автоматически загружается, добавляя ng-app к элементу в вашем HTML, например:
<html ng-app="myApp">
...
</html>
Во-вторых, нужно будет загрузиться с JavaScript, например, после создания вашего приложения через angular.module("myApp", []);
angular.bootstrap(document, ['myApp']);
Добавление к ответу Дэйва Сверского (и я новичок в Angular, так что поправьте меня, если я ошибаюсь):
Следующее изображение, взятое из учебника начальной загрузки angularjs.org. Объясняет, что Дэйв сформулировал.
HTML, внутри элемента с директивой ng-app, компилируется AngularJS. Например:
<body>
<div> {{ 1 + 2 }} </div>
</body>
Отметьте как это:
{{ 1 + 2 }}
Однако добавление директивы ng-app:
<body ng-app="module">
<div> {{ 1 + 2 }} </div>
</body>
Отображается следующим образом:
3
Это связано с тем, что ng-приложение "загрузило" тег body и сообщило Angular о создании "внутреннего представления" содержимого. Внутреннее представление, конечно, 3. Из учебника:
"Если инструкция ng-app найдена, то Angular скомпилирует DOM рассматривая директиву ng-app как корень компиляции. Эта позволяет вам рассказать об этом только часть DOM как Angularприменение".
Angular также загружает модуль, связанный с директивой ng-app ( "модуль" в учебнике Angular) и создает инжектор приложения (используется для инъекции зависимостей).
Директива ng-app указывает, какая часть страницы (все или часть, вплоть до вас) является корнем приложения Angular. Angular читает HTML внутри этого корня и компилирует его во внутреннее представление. Это чтение и компиляция - это процесс начальной загрузки.
Ручная перезагрузка - это когда вы пишете код для выполнения процесса начальной загрузки вместо использования директивы ng-app.
Angular Процесс автозагрузки JS
AngularInit() - первый Angular api, вызываемый для автоматической загрузки с помощью функции jqLite ready.
<body ng-app=ngAppDemo> <div ng-controller="ngAppDemoController" > I can add: {{a}} + {{b}} = {{ a+b }} </div> </body>
ng-app="ngAppDemo" will be extracted.
На странице Angular NgModules:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Наконец, свойство @NgModule.bootstrap идентифицирует этот AppComponent как компонент начальной загрузки. Когда Angular запускает приложение, он помещает HTML-рендеринг AppComponent в DOM внутри тегов элементов index.html.
Загрузка в main.ts
Вы запускаете приложение, загружая AppModule в файл main.ts.
Angular предлагает множество параметров начальной загрузки для нескольких платформ. На этой странице описаны два варианта, предназначенные для браузера.
В угловой инициализации /Bootstrap это делается двумя способами.
Позвольте мне объяснить, когда и где использовать ручную и автоматическую загрузку.
Ручная загрузка:
Предположим, вам нужно загрузить некоторые данные или связать некоторый шаблон с помощью запроса на стороне сервера, но что если угловое приложение будет автоматически инициализировано до завершения этой операции?
Можем ли мы вручную инициализировать наше приложение в зависимости от успеха и неудачи результата? Да, мы можем сделать это. Таким образом, решение вышеуказанной проблемы
Рассмотрим пример: вы используете сервер Worklight. Вы хотите инициализировать /bootstrap сразу после инициализации сервера worklight, здесь вы будете выполнять загрузку вручную. Ручная инициализация полезна, когда вы хотите выполнить определенные действия перед тем, как запускать угловое приложение и компилировать страницу.
angular.element(document).ready(function ()
{
angular.bootstrap(document, ['myApp']);
});
Приведенный выше код записывается в файл main.js после инициализации worlight.
Автозагрузка:
Angular инициализирует/загружает автоматически при DOMContentLoaded или при загрузке сценария angular.js в браузер. Затем он ищет приложение ng. Когда он найден, он загружает модули, связанные с этой директивой ng-app.