hmm: AngularJS 2 ich komm net rein

Hi,

ich möchte mir mal Angular2 angucken. Auf einer Ubuntu VM die komplett leer ist tue ich dafür folgendes:

  1. ich installiere das neuste npm und das neuste nodejs node -v v4.6.1 nodejs -v 7.10.0 npm -v 4.6.1

  2. ich gebe folgendes ein:

sudo npm install -g @angular/cli

  1. ich gebe ein: ng help

und bekomme:

/home/ubuntu/.nvm/versions/node/v4.6.1/lib/node_modules/@angular/cli/models/config/config.js:16 constructor(_configPath, schema, configJson, fallbacks = []) { ^

SyntaxError: Unexpected token = at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/home/ubuntu/.nvm/versions/node/v4.6.1/lib/node_modules/@angular/cli/models/config.js:3:18) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10)

wie löse ich das Problem?

  1. Tach!

    ich möchte mir mal Angular2 angucken.

    AngularJS hieß nur die Version 1. Version 2 wurde komplett umgestrickt und ab jetzt heißt es nur noch Angular ohne JS. Liegt wohl auch daran, dass die eigentliche Programmiersprache nicht mehr Javascript sondern TypeScript ist.

    Auf einer Ubuntu VM die komplett leer ist tue ich dafür folgendes:

    1. ich installiere das neuste npm und das neuste nodejs node -v v4.6.1 nodejs -v 7.10.0 npm -v 4.6.1

    Unter Windows habe ich Node.js als Recommended (6er LTS nicht der 7er Zweig) installiert und bekomme für node die Version 6.9.1, nodejs gibt es nicht und npm hat die 3.10.10.

    1. ich gebe folgendes ein:

    sudo npm install -g @angular/cli

    1. ich gebe ein: ng help

    Soweit so richtig.

    und bekomme:

    /home/ubuntu/.nvm/versions/node/v4.6.1/lib/node_modules/@angular/cli/models/config/config.js:16 constructor(_configPath, schema, configJson, fallbacks = []) {

    Dann lösch mal das /home/ubuntu/.nvm/ und installier noch mal neu. Achso, dein Ubuntu war frisch und das Verzeichnis hat nicht existiert? Dann nimm mal die 6er LTS-Version.

    dedlfix.

    1. sudo npm install -g @angular/cli

      brauch ich das?

      hast du irgendwo eine frische anleitung wie man das ganze angular 2 ts zeug auf ubuntuinstalliert? ich glaub ich zerschieß mir mitlerweise sogar die das package.json, ich mach jetzt erstmal eine neue ubuntu vm auf....

      1. z.b. das ding hier:

        https://www.npmjs.com/package/angular-ts-starter-kit

        ist hier das npm start notwendig? wo wird den der router gesetzt (localhost:port)?

        hab ich hier irgendwas fileserver mäßiges so wie bei node server.js?

      2. Tach!

        sudo npm install -g @angular/cli

        brauch ich das?

        Brauchen nicht, aber man möchte das, weil es sozusagen "batteries included" ist.

        hast du irgendwo eine frische anleitung wie man das ganze angular 2 ts zeug auf ubuntuinstalliert? ich glaub ich zerschieß mir mitlerweise sogar die das package.json, ich mach jetzt erstmal eine neue ubuntu vm auf.

        Nö, aber das node.js-Zeug hat doch seine eigene Infrastruktur, da ist es fast egal, welches Betriebssystem man hat.

        dedlfix.

        1. <html>
            <head>
              <title>Angular 2 QuickStart</title>
              <script src="node_modules/systemjs/dist/system.src.js"></script>
              <script src="node_modules/typescript/lib/typescript.js"></script>
              <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
              <script>
                System.config({
                  transpiler: 'typescript',
                });
                System.import('app.ts');
              </script>
            </head>
            <body>
              <my-app>loading...</my-app>
            </body>
          </html>
          
          

          braucht diese indexdatei nur ein "npm start" oder ähnliches um zu funktionieren? die index.html scheint sich auch ohne irgendwelche startbefehle die ts datei zu holen, ist dass so gedacht?

          1. Tach!

            braucht diese indexdatei nur ein "npm start" oder ähnliches um zu funktionieren?

            Das ist keine AngularCLI-Index-Datei. Misch das bitte nicht. Entweder AngularCLI oder du nimmst das Quickstart, dann aber ohne AngularCLI. Wenn du dich fpr AngularCLI entscheidest, solltest zu zumindest das Scaffolding für das Projekt durchführen. Module, Components und den anderen Kleinkram kann man dann auch zu Fuß hinzufügen, wenn man das unbedingt machen möchte und nicht den Scaffolder von AngularCLI dafür verwendet.

            Und lies bitte erstmal die Anleitung von AngularCli. Das überschreibt sozusagen einige der Vorgehensweisen der normalen Angular-Dokumentation.

            Wenn du das CLI nimmst, ist es für den Build-Prozess zuständig. Für die Entwicklung reicht ng serve und dann rufst du die angegebene Adresse im Browser auf. Für das Erstellen der Dateien für die Produktivumgebung gibt es ng build. npm-Befehle brauchst du keine für das Arbeiten mit AngularCLI.

            die index.html scheint sich auch ohne irgendwelche startbefehle die ts datei zu holen, ist dass so gedacht?

            Wenn sich was ts-Dateien holt, ist es der Browser, der das über eine map-Datei erfährt und dir dann statt der tatsächlich ausgeführten .js die .ts-Datei zeigt.

            dedlfix.

            1. danke!

              Frage:

              Für was genau benutzt man Angular 2 eigendlich? Ich habe z.B. eine riesen JavaScript/Dom Funktion die mir eine Tabelle erstellt. Geht das erstellen vernünftiger Tabellen per Angular 2 sauberer?

              1. Tach!

                Für was genau benutzt man Angular 2 eigendlich?

                Das was man früher als Desktopanwendung schrieb, kann man mit Angular so schreiben, dass es im Browser läuft. Es kommt dabei darauf an, dass das durch den Anwendungsfall geforderte Maß an Interaktivität gegeben ist. Für statische Websites, die drei Zeilen Javascript für irgendeine Spezialität benötigen, ist Angular und andere Web-Application-Frameworks zu viel des Guten.

                Ich habe z.B. eine riesen JavaScript/Dom Funktion die mir eine Tabelle erstellt. Geht das erstellen vernünftiger Tabellen per Angular 2 sauberer?

                Schau dir das Template-System von Angular an, insbesondere die Themen Interpolation und strukturelle Direktiven, besonders ngFor.

                Mit den Components von Angular kann man sich quasi eigene HTML-Elemente erstellen, mit denen man komplexe Funktionalität verstecken kann. Dadurch kann man einen Gewinn bei der Übersichtlichkeit bekommen.

                Wenn die Tabelle jedoch statisch ist, sehe ich wenig Sinn darin, sie clientseitig zu erstellen, inklusive der Infrastruktur für die Übertragung der Daten vom Server zum Client, wenn ebensogut ein serverseitiger Prozess die Tabelle als fertiges HTML rendern kann.

                dedlfix.