Как вы видите живой пример из Angular2 Quick Start, вы обнаружите, что главная страница Angular2, то есть index.html
, использует SystemJS
для запуска приложения Angular2.
index.html
<script src="systemjs.config.js"></script><script>
System.import('app').catch(function(err){ console.error(err); });
</script>
System.import('app')
запускает приложение, которое влияет на <my-app>Loading...</my-app>
Итак, для запуска приложения используется systemjs. Тогда что такое systemjs
?
системные
Как упоминалось в README, systemjs — это универсальный загрузчик динамических модулей, он загружает в браузер следующее:
- модули es6
- AMD
- CommonJS
- глобальные скрипты,
- и многое другое
Как пользователь angular2, которому любопытно, как это работает в браузере, мы сосредоточимся на модулях ES6.
он построен на основе загрузчика модулей ES6. Итак, приступим к ES6.
ES6
Оператор import используется для импорта функций, объектов или примитивов, которые были экспортированы из внешнего модуля, другого скрипта и т. д.
https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import
import { member } from "module-name";
import { member1 , member2 } from "module-name";
В приведенном выше предложении было сказано that have been exported
. В ES6 вы можете экспортировать функции, объекты или примитивы из файла. Синтаксис выглядит следующим образом как задокументировано
export { name1, name2, .., nameN };
export let name1, name2,.., nameN; // also var
Резюме
Возвращаясь к systemjs, функция system.import
загружает javascript. и основное использование в браузере похоже на это.
<script src="systemjs.config.js"></script><script>
System.import('app').catch(function(err){ console.error(err); });
</script>
Итак, мы видим две вещи, одна config, а другая System.import('app')
1. config
2. Пакет приложения, который импортируется System.import
, запускает ваше приложение
Отсюда столько вопросов.
В: где находится приложение и как его исправить?
О: оно определено в system.config.js с использованием map
и packages
config.map['app'] = 'app'; // tells you where you find app package,
config.packages['app'] = { main: 'main.ts', defaultExtension: 'ts' }; // tells you what file to execute
Q. Где находится main.ts
и что он делает?
A. Он расположен в app/main.ts, потому что config.map['app']
сказал вам найти app
пакетов в каталоге app
.
и он загружает приложение angular, которое это ваше приложение.
bootstarp читает AppComponent
и находит html-тег my-app
в документе, а затем отображает ваши приложения между этими двумя тегами; <my-app>
и </my-app>
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Аллен Ким