2015-03-22 3 views
3

Итак, я начинаю изучать Угловое и я, начиная с версии 2.0, так как она будет ломаться 1 на тот момент я пытаюсь получить quick start application от углового веб-сайта для работыУгловое 2 Quickstart приложение

Я настроил код, как указано, и настроить веб-сайт в IIS, чтобы указать на каталог исходного кода, но я получаю сообщение об ошибке.

Uncaught (in promise) Error loading "app" at http://localhost:88/app.js 
http://localhost:88/app.js:1:46: Unexpected token angular2 

Кто-нибудь создал это приложение в IIS, и если да, можете ли вы помочь?

app.js Файл:

import {Component, Template, bootstrap} from angular2/angular2; 

//Annotation section 
@Component({ 
    selector: 'my-app' 
}) 

@Template({ 
    inline: '<h1>Hello {{name}}</h1>' 
}) 

//Component controller 
class MyAppConponent{ 
    constuctor(){ 
     this.name = 'Alice'; 
    } 
} 

bootstrap(MyAppConponent); 

файл index.html

<!-- index.html --> 
<html> 
    <head> 
     <title>Angular 2 Quickstart</title> 
     <script src="/quickstart/dist/es6-shim.js"></script> 
    </head> 
    <body> 
     <!-- The app component created in app.es6 --> 
     <my-app></my-app> 

     <script> 
      // Rewrite the paths to load the files 
      System.paths = { 
       'angular2/*':'/quickstart/angular2/*.js', // Angular 
       'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions 
       'app': 'app.js' // The my-app component 
      }; 
      // Kick off the application 
      System.import('app'); 
     </script> 

    </body> 
</html> 

Кроме того - я сделал имя файла приложения app.es6 как сайт показал, но я видел, если расширение сделало разницу, поскольку es6 является новым стандартом javascript, и просмотр может его еще не поддерживать, и я получаю

GET http://localhost:88/app.es6 404 (не найден)

как ошибка с этим расширением.

Я использую Chrome Canary для моего браузера

+1

Отправьте свой код здесь или прикрепите plnker или jsfiddle – Sajeetharan

ответ

2

Похоже синтаксической ошибки

import {Component, Template, bootstrap} from 'angular2/angular2'; 

Если это исправить

0

Вот конечный продукт, который я придумал.

В app.ts

/// <reference path="typings/angular2/angular2.d.ts" /> 
///<reference path="typings/es6-promise/es6-promise.d.ts"/> 
///<reference path="typings/rx/rx.d.ts"/> 

import {Component, View, bootstrap} from 'angular2/angular2'; 

@Component({ 
    selector : 'my-app' 
}) 
@View({ 
    templateUrl: '<h1>Hello {{name}}<h1>' 
}) 
// Component controller 
class MyAppComponent { 
    name : string; 
    constructor(){ 
     this.name = 'Alice'; 
    } 
} 

bootstrap(MyAppComponent); 

В index.html

<!DOCTYPE html> 
<!-- index.html --> 
<html> 
    <head> 
    <title>Angular 2 Quickstart</title> 
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> 
    <script src="https://jspm.io/[email protected]"></script> 
    <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script> 
    </head> 
    <body> 

    <!-- The app component created in app.ts --> 
    <my-app></my-app> 
    <script>System.import('app');</script> 
    </body> 
</html> 

Я не думаю, что это повлияло на целостность кода, но вы видите компонент неправильно с контроллерами.

0

app.js должно быть app.ts. Удостоверьтесь, что ваш наблюдатель типов будет настроен, а затем перезапустите приложение.

Смежные вопросы