как использовать Angular2, systemjs локально БЕЗ node.js/npm?

Это index.html с angular-alpha35:

    <html>
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <title>APP Ang2</title>
        <script src="scripts/traceur-runtime.js"></script>
        <script src="https://jspm.io/[email protected]"></script>
        <script src="scripts/bundle35/angular2.dev.js"></script> 
        <script src="scripts/bundle35/router.dev.js"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>

        <app>Loading...</app>

        <script>System.import('app').catch(console.log.bind(console));</script>

    </body>
    </html>

И он отлично работает, если есть подключение к Интернету и можно загрузить system.js. Если я попытаюсь получить локальную копию system.js следующим образом:

<script src="scripts/[email protected]"></script>

то ничего не работает, пока я не поставлю rx.js в корневую папку и не поставлю эту строку в конец файла:

    <script src="scripts/[email protected]"></script>
</body>
</html>

тогда System.js работает нормально, но в этом случае возникает странная проблема с привязками angular2. они не работают, пока я не взаимодействую со страницей (отправлю форму, открою выбор, заставлю какой-то div изменить свои размеры даже с простым скрытием и т. д.). Как только что-то меняется на странице, все привязки начинают работать, и страница воскресает.

Как заставить все это работать локально без node.js и без подключения к интернету?


javascript angular systemjs
person kakaja    schedule 26.08.2015    source источник
comment
Я бы изменил тег angularjs на angular2 или что-то, что на самом деле связано с angular2. Затем node.js находится на стороне сервера, вы можете обслуживать свое приложение angular2, используя простой http. Для systemjs это сложная вещь. Я сам боролся, и кажется, что онлайн-версия из jspm отличается от той, которую вы получаете из пакетов. Кроме того, все это будет лучше упаковано, как только появится финальная версия. А пока вы можете заняться этим исходным проектом, который дает небольшую структуру, настройку gulp и обрабатывает зависимости: github.com/mgechev/angular2-seed   -  person Arnaud Boeglin    schedule 26.08.2015
comment
Спасибо за ваш комментарий. Я изменил теги. Я видел этот начальный проект, но я действительно хочу обойтись без node/gulp. И это работает без него, просто я каждый раз завишу от загружаемых systemjs. Попробую проверить версию jspm в пакетах, может если ту включу, то заработает. Я думаю, что совершенно не логично, что я не могу делать все это локально.   -  person kakaja    schedule 26.08.2015
comment
Вы добавили это? System.config({ baseURL: '/scripts' });   -  person Alfonso Presa    schedule 26.08.2015
comment
Кроме того, не добавляя rx.js и es6-module-loader, можете ли вы проверить, пытается ли он делать какие-либо запросы в сетевом инспекторе?   -  person Alfonso Presa    schedule 26.08.2015
comment
если убрать rx и es6-module-loader, и добавить конфиг для baseURL, то он загружает сам [email protected], который в /scripts, но потом не находит app.js то есть в корне   -  person kakaja    schedule 26.08.2015
comment
Это моя установка на случай, если она сработает для вас stackoverflow.com/questions/32120244/   -  person Eric Martinez    schedule 26.08.2015
comment
Спасибо за ссылку Эрик Матринес   -  person kakaja    schedule 27.08.2015

Ответы (2)


arrow_upward
5
arrow_downward

Вы должны включить sfx-версию angular 2 следующим образом:

<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script>

Обратите внимание, что это автономный файл js, который вы можете загрузить локально.

Проверьте этот пример проекта, который я сделал в github:

https://github.com/alfonso-presa/angular2-es5-sample

Изменить: проверьте этот вопрос SO для получения дополнительных разъяснений о том, что означает sfx: Разница между angular.dev.js и angular.sfx.dev.js

person Alfonso Presa    schedule 26.08.2015
comment
Благодарю вас! Действительно интересно увидеть совершенно другую установку ng2. Хотя для своего проекта я хотел бы по-прежнему использовать system.js. - person kakaja; 26.08.2015
comment
Спасибо за ссылку на разъяснение. - person kakaja; 26.08.2015

arrow_upward
0
arrow_downward

Благодаря идее Arnaud Boeglin о разнице в версии пакетов, я проверил с помощью es6-module-loder и случайно это установка работает отлично (пока я не нашел никаких проблем):

    <script src="scripts/traceur-runtime.js"></script>
    <script src="scripts/es6-module-loader.js"></script>
    <script src="scripts/[email protected]"></script>
    <script src="scripts/bundle35/angular2.dev.js"></script> 
    <script src="scripts/bundle35/router.dev.js"></script>

Загрузчик es6-module-loader должен стоять перед systemjs в теге <head>.

person kakaja    schedule 26.08.2015