Что подразумевается под загрузкой в angular JS?

Я новичок в Angular JS. Я прошел через ссылку ниже. http://docs.angularjs.org/tutorial/step_00

Что такое файлы начальной загрузки? Где они расположены?

Что такое автоматическая загрузка и ручная инициализация начальной загрузки? Я прочитал недостаток ручной инициализации, как показано ниже.. из ссылки http://docs.angularjs.org/guide/bootstrap

Может ли кто-нибудь объяснить, в чем тут недостаток?

Ответы

Ответ 1

Несмотря на то, что 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

Ответ 2

Бутстрапинг является эквивалентом инициализации или запуска вашего приложения Angular. Существует 2 основных способа сделать это.

Первый автоматически загружается, добавляя ng-app к элементу в вашем HTML, например:

<html ng-app="myApp">
...
</html>

Во-вторых, нужно будет загрузиться с JavaScript, например, после создания вашего приложения через angular.module("myApp", []);

angular.bootstrap(document, ['myApp']);

Ответ 3

Добавление к ответу Дэйва Сверского (и я новичок в 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>

Отображается следующим образом:

Это связано с тем, что ng-приложение "загрузило" тег body и сообщило Angular о создании "внутреннего представления" содержимого. Внутреннее представление, конечно, 3. Из учебника:

"Если инструкция ng-app найдена, то Angular скомпилирует DOM рассматривая директиву ng-app как корень компиляции. Эта позволяет вам рассказать об этом только часть DOM как Angularприменение".

Angular также загружает модуль, связанный с директивой ng-app ( "модуль" в учебнике Angular) и создает инжектор приложения (используется для инъекции зависимостей).

Ответ 4

Директива ng-app указывает, какая часть страницы (все или часть, вплоть до вас) является корнем приложения Angular. Angular читает HTML внутри этого корня и компилирует его во внутреннее представление. Это чтение и компиляция - это процесс начальной загрузки.

Ручная перезагрузка - это когда вы пишете код для выполнения процесса начальной загрузки вместо использования директивы ng-app.

Ответ 5

Angular Процесс автозагрузки JS

AngularInit() - первый Angular api, вызываемый для автоматической загрузки с помощью функции jqLite ready.

ready(), вызываемый при готовности DOM
angularInit(), вызванный из ready()
Angular Init извлечь ng-app элемент из DOM, используя element.querySelectorAll() один из следующих форматов: 'ng: app', 'ng-app', 'x-ng-app', 'data-ng -приложение' Ex.

  <body ng-app=ngAppDemo>
      <div ng-controller="ngAppDemoController" >
          I can add: {{a}} + {{b}} =  {{ a+b }}         </div>
  </body>

ng-app="ngAppDemo" will be extracted.

Используя модуль регулярных выражений, ex. module = "ngAppDemo"
наконец-то загрузочный (..) вызов, который создает глобальный инжектор и корнеплод и загрузочный ремень Angular.

Ответ 6

На странице 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 предлагает множество параметров начальной загрузки для нескольких платформ. На этой странице описаны два варианта, предназначенные для браузера.

Ответ 7

В угловой инициализации /Bootstrap это делается двумя способами.

Позвольте мне объяснить, когда и где использовать ручную и автоматическую загрузку.

Ручная загрузка:

Предположим, вам нужно загрузить некоторые данные или связать некоторый шаблон с помощью запроса на стороне сервера, но что если угловое приложение будет автоматически инициализировано до завершения этой операции?

Можем ли мы вручную инициализировать наше приложение в зависимости от успеха и неудачи результата? Да, мы можем сделать это. Таким образом, решение вышеуказанной проблемы

Рассмотрим пример: вы используете сервер Worklight. Вы хотите инициализировать /bootstrap сразу после инициализации сервера worklight, здесь вы будете выполнять загрузку вручную. Ручная инициализация полезна, когда вы хотите выполнить определенные действия перед тем, как запускать угловое приложение и компилировать страницу.

angular.element(document).ready(function () 
  {
         angular.bootstrap(document, ['myApp']);
  });

Приведенный выше код записывается в файл main.js после инициализации worlight.

Автозагрузка:

Angular инициализирует/загружает автоматически при DOMContentLoaded или при загрузке сценария angular.js в браузер. Затем он ищет приложение ng. Когда он найден, он загружает модули, связанные с этой директивой ng-app.

Что подразумевается под загрузкой в ​​angular JS?