No page in angular 2
-
I'm working intelliJ IDEA Pishu in the angular 2 environment. The simplest example. In the file, I write index.html
<!DOCTYPE html> <head> <title>Angular 2 быстрый старт</title> <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> <script src="https://jspm.io/system@0.16.js"></script> <script src ="system.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script> </head> <body> <app></app> <script async>System.import('app');</script> </body> </html>And file app.ts
import{bootstrap, Component, View} from "angular2/angular2"; @Component({ selector:'app' }) @View({ template:'<div>My first angular 2 App</div>' }) class App{}bootstrap(App);
And...
Index.htmlYes.<app></app>I think we need to connect. But how?
I'm launching an empty page. No mistakes.
-
Good afternoon. By what you described, I tried to figure it out, but I can tell you there's no problem here, that's it. You didn't provide the code from your file system.js. So, by what we have: (1)
<!DOCTYPE html> <html> <head> <title>Angular 2 быстрый старт</title><!--дальше подключаем стандартные скрипты--> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script> <!--Здесь мы возвращаемся к Вашему system.js. По существующим в--> <!--интеренете образцам и для удобства я назову его "config.js", а не "system.js"--> <script src="config.js"></script> </head> <body> <!--в БОДИ тоже самое, что и у Вас--> <app></app> <!--хотя импортировать app лучше в head--> <script>System.import('app');</script> </body></html>
2) file app.ts
//подключаем ядро
import {Component} from 'angular2/core';
//подключаем bootstrap (bootstrapper:)), через который будем выводить наше приложение
import {bootstrap} from 'angular2/platform/browser';//создаем компонент приложения
@Component({
selector:'app',
template:'<div>My first angular 2 App</div>'
})
//и сразу экспортируем его
export class App{};//и выводим его же через бутстрэпер
//в оф документации говорят "обуваем" и типа выводим на прогулку
bootstrap(App);
(3) and now config.js. You called it a system.js. It contains a description of the structure, a map of all the connections, and the decoding of this whole connection.
System.config({//указываем, что используем TypeScript transpiler: 'typescript', //настройки компилятора TypeScript typescriptOptions: { emitDecoratorMetadata: true }, //map (карта) - указывает приложению где искать Ваш app.ts //и все другие подключаемые файлы (когда они будут) //В данном примере - это папка "src". //Т.е. мой файл "app.ts" лежит в папке "src" map: { app: "./src" }, //packages определяет пакеты приложения //т.е. здесь мы указали что главный файл, о подключении //которого Вы задали главный вопрос - это "app.ts" //и указываем расширение поумолчанию ts(typescript) packages: { app: { main: './app.ts', defaultExtension: 'ts' } }});
In conclusion, I attach a reference to Plunker
http://plnkr.co/edit/WDIDAdI9vzxsZkyLbfjt?p=preview
