2015-11-16 15 views
13

Jestem nowy dla kątowego, więc proszę o pomoc. Otrzymuję błąd podczas próby uruchomienia prostego kodu z kątowy z kątowym NG-kontrolera tag gdzie jestem wyświetlający zmienną w html są zdefiniowane w pliku javascript jako:angular2js: Uncaught Reference Error: System nie jest zdefiniowany

var MainController = function($scope){ 
$scope.message = "harsh"; 

i wyświetlania w html jak w tym: html page

błąd na konsoli chrome jako:

Uncaught ReferenceError: System is not defined(anonymous function) @ angular2.js:3098

co wskazuje na jakąś funkcję w angular2js:

System.register("angular2/src/core/facade/lang", [], true, function(require, exports, module) { 

Nie rozumiem problemu. Czy jest to związane z plikiem angular2.js, który zawierałem z angularjs.org?

+1

'ng-controller' nie wydaje się jak coś można wykorzystać w Kątowymi 2. I pewnie zacząć tutaj gdybym był tobą ~ https://angular.io/docs/ts/latest/quickstart.html – Phil

+0

Domyślam się, że jest to kątowe, nie kątowe 2 ... –

Odpowiedz

9

Spróbuj włączyć plik System JS do kodu HTML.

<script src="https://jspm.io/[email protected]"></script> 

Sprawdź to repo Github za wszelką pomoc: https://github.com/kensplanet/angularjs2-hello-world/blob/master/index.html

Angular2 sposób to zrobić

Plunker linku: http://plnkr.co/edit/36PZLTZ58bXmD4me0cpS?p=preview

index.html

<html> 
    <head> 
     <title>AngularJS2 Hello World Demo</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.28/angular2.dev.js"></script> 
    </head> 

    <body> 
     <harsh></harsh> 

    <script> 
     System.import('harsh'); 
    </script> 
     </body> 
</html> 

harsh.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc); 
    switch (arguments.length) { 
     case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target); 
     case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0); 
     case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc); 
    } 
}; 
var angular2_1 = require('angular2/angular2'); 
var angularjs2Component = (function() { 
    function angularjs2Component() { 
     this.name = "Harsh"; 
    } 
    angularjs2Component = __decorate([ 
     angular2_1.Component({ 
      selector: 'harsh' 
     }), 
     angular2_1.View({ 
      template: '<h1>Hello {{name}}<h1>' 
     }) 
    ], angularjs2Component); 
    return angularjs2Component; 
})(); 
angular2_1.bootstrap(angularjs2Component); 

wyjściowa:

Hello Harsh


+0

Dzięki za to, że usunął błąd, ale wiadomość jest nadal nie jest wyświetlany –

+0

W Angular2, kontroler ng jest nieprawidłowy. Angular2 nie ma kontrolerów. Zamiast tego ma komponenty. Twój kod nie zadziała. Składnia nie jest podobna do 1.x – kensplanet

+0

@kensplanet jakie są tego rodzaju błędy, dlaczego tak się dzieje? – blackHawk

0

Korzystanie https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-all.umd.js pomógł usunąć ten błąd. Nie jest wymagany zewnętrzny numer .

0

To może wydawać się raczej oczywiste, ale upewnij się, że run:

npm install 

aby zapełnić node_modules katalog w katalogu głównym swojej aplikacji. W szczególności potrzebujesz:

node_modules/systemjs/dist/system.src.js 
-1

W przypadku korzystania z niektórych Seed of AngularJS.

Te kwestie mogą być, jeśli usuniesz lub nie zawierać coś takiego w index.html

<!-- shims:js --> 
    <!-- endinject --> 

Czasem programiści, którzy nie zna angularjs 2 i konkretnego projektu nasion myśli, że oni usunąć dodatkowe komentarze HTML i nawet nie zdaje sobie sprawy, że jest to injection.

2

I got the same issue in Angular 2.0 with TypeScript.

Im mój problem miałem żądania URL z dodatkowym ukośnika „/” jak „http://localhost:3000/login/” (dodatkową kreską po „login”)

+2

To było dokładnie to, na co wpadłem. dziwne. – newman

0

Niedawno wpadł na ten sam problem, wykonując tutorial PluralSight i za pomocą Plunkera. I rozwiązać problem przy użyciu tego skryptu

<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js" data-semver="1.3.0-beta.5" data-require="[email protected]*"></script> 

zamiast tego:

<script src="https://code.angularjs.org/2.0.0-snapshot/angular2.js" data-require="[email protected]*" data-semver="2.0.0"></script> 
Powiązane problemy