Angular 2 v Plain JS

Aktualizováno 5. června 2016 — rc 0
Angular 2 na začátku května zasáhl Release Candidate 0, což přineslo určité změny. Dílčí moduly Angular 2 je nyní třeba nainstalovat ručně a funkce bootstrap je pod jiným modulem.

Už jste investovali čas – hodně času learning Angular 1. Kontroléry, služby, direktivy, filtry… Všechny ty termíny konečně dává smysl – cesta sem byla poměrně dlouhá.

A nyní přichází Angular 2!

A zbavují se ovladačů? Všechno je nyní součástí? Co se stalo?!

"Dívat se na Angular 2 je jako dívat se na jiný programovací jazyk."

Angular 2 vypadá úplně nově:nový jazyk, nová syntaxe, nové koncepty. „Bude to jako učit se Angular 1 znovu , ale horší !“

Tohle je rozcestí. Trochu jako Matrix.

Můžete si vzít modrou pilulku a zůstat v Angular-land. Naučte se všechny nové změny, podobnou, ale odlišnou syntaxi a proč se rozhodli, že import 9 knihoven je lepší než jediná značka skriptu.

Nebo si vezměte červenou pilulku a vyzkoušejte React. Je to nový svět s některými novými koncepty, ale myslím si, že je to čistší a propracovanější svět než Angular 2. Poté, co jsem vyzkoušel obojí, zůstávám u Reactu. Pokud se rozhodnete jít cestou Reactu, podívejte se na časovou osu, kterou doporučuji, abyste se to naučili, abyste nebyli zahlceni.

V tomto příspěvku vytvoříte aplikaci „ahoj světe“ v Angular 2 pomocí obyčejného starého JavaScriptu . Žádný ES6, žádný TypeScript. A zabere to asi 5 minut vašeho času.

Jste připraveni začít?

Instalovat angular2

To předpokládá, že již máte Node.js a NPM. Získejte je, pokud ne!

Otevřete terminál. Vytvořte nový adresář:

$ mkdir plain-js-ng2
$ cd plain-js-ng2

Vytvořte package.json soubor s tímto obsahem:

{
  "name": "angular2-in-plain-js",
  "version": "0.3.0",
  "license": "ISC",
  "dependencies": {
    "core-js": "^2.4.0",
    "zone.js": "0.6.12",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",

    "@angular/core":  "2.0.0-rc.1",
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1"
  }
}

Nainstalujte Angular 2 a všechny jeho závislosti:

$ npm install
Poznámka: Pokud máte potíže s instalací angular2, ujistěte se, že používáte oficiální registr NPM. Zaškrtněte ten, který používáte, s npm config get registry a pokud to není „https://registry.npmjs.org“, spusťte npm config set registry https://registry.npmjs.org .

1. Vytvořte app.js

Vytvořte nový soubor s názvem app.js ve vašem oblíbeném textovém editoru. Zadejte toto:

Zapsat ručně? Jako divoch?
Když to napíšete, hodně se vám to vryje do mozku lepší než to jednoduše zkopírovat a vložit. Tvoříte nové neuronové dráhy. Tyto cesty jednoho dne pochopí Angular 2. Pomozte jim.
(function() {

  var HelloApp =
    ng.core
    .Component({
      selector: 'hello-app',
      template: '<h1>Hello Angular 2!</h1>'
    })
    .Class({
      constructor: function() {}
    });

  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(HelloApp);
  });

})();

2. Vytvořte index.html

Vytvořte index.html soubor a zadejte toto:

<html>
  <head>
    <title>Plain JS Angular 2</title>

    <!-- The stuff Angular 2 needs -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/@angular/core/core.umd.js"></script>
    <script src="node_modules/@angular/common/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>

    <!-- Our app -->
    <script src="app.js"></script>
  </head>
  <body>
    <hello-app></hello-app>
  </body>
</html>
Zapsat ručně? Jako divoch?
V dřívější verzi tohoto příspěvku jsem doporučoval napsat toto. V té době to byly pouze 2 značky skriptu, což se zvětšilo na devět . Pokud zkopírujete a vložíte tento HTML, nebudu mít žádné špatné pocity.

3. Otevřete index.html

Načtěte index.html jakkoli chcete. Rád spouštím open index.html v terminálu (na počítači Mac).

Tak snadné! Takový Angular!

To je vše. Řekl jsem vám, že to bylo snadné!

Pokud vás zajímá, zda jsou tyto soubory skriptů zahrnuty do index.html , podívejte se na můj přehled závislostí Angular 2.

Podívejme se, co se děje v této malé aplikaci.

Komponenty přes směrnice

Angular 2 se zbavuje direktiv ve prospěch komponent, ale koncepčně jsou velmi podobné. Ani jejich kód není tak odlišný. Podívejte se na tento diagram:

Oba určují název značky HTML (selector vs odvozování z názvu směrnice).

Oba mají související chování (Class vs controller ).

Oba mají šablonu.

Dokonce ani syntaxe řetězení není tak cizí, pochází z Angular 1.

Explicitní bootstrap

Angular 2 přichází s funkcí nazvanou bootstrap který inicializuje aplikaci. Tento kousek kódu shora vše spustí:

document.addEventListener('DOMContentLoaded', function() {
  ng.platformBrowserDynamic.bootstrap(HelloApp);
});

Poslouchá na DOMContentLoaded událost pomocí prostého starého JavaScriptu a poté zavolá ng.platformBrowserDynamic.bootstrap s kořenovou komponentou .

Toto je koncepční posun od Angular 1:Aplikace se skládají z vnořených komponent až dolů . Vše je vnořeno do kořenového adresáře.

Vaše řada

Nyní, když máte spuštěnou (superzákladní) aplikaci Angular 2, můžete si s ní začít hrát. Zde je několik věcí, které můžete vyzkoušet:

Přidat druhou komponentu

Vytvořte novou komponentu, která bude obsahovat vaše jméno, a vykreslete ji za h1 tag.

Několik rad:

  • Každá součást musí být výslovně požadována, aby ji bylo možné používat. Vlastnost patří do komponenty a nazývá se directives (kupodivu). Obsahuje řadu komponent (což jsou pouze objekty Javascript). např. directives: [MyName] bude vyžadovat MyName komponentu a umožní vám používat její značku.

  • Zdá se, že šablony nejsou omezeny na jeden kořenový uzel jako u direktiv Angular 1.

Přidat seznam jmen

Přidejte ul tag s vnořeným li pro každé jméno.

  • Budete potřebovat nový ngFor syntax. Nahrazuje ng-repeat a atribut vypadá jako *ngFor="let name of names" (je tam * vpředu, je to důležité).

  • Proměnné deklarované v konstruktoru this objekt bude dostupný ze šablony pomocí ngFor a známý {{ curly_braces }} syntaxe.

Vzdát se?

Pokuste se nejprve přijít na cvičení sami. Podívejte se na tento příklad z oficiálních dokumentů Angular 2 – jejich syntaxe nevypadá stejně, ale vsadím se, že to zvládnete.

Ale pokud jste opravdu uvízli, odpovědi jsou níže (skryté). Kliknutím zobrazíte.

[odpověď] Ukaž své jméno
var MyName = ng.core
  .Component({
    selector: 'my-name',
    template: '<span>Dave</span>'
  })
  .Class({
    constructor: function() {}
  });

var HelloApp =
  ng.core.Component({
    selector: 'hello-app',
    template: '<h1>Hello Angular 2!</h1><my-name></my-name>',
    directives: [MyName]
  })
  .Class({
    constructor: function() {}
  });
[odpověď] Seznam přátel
var FriendsList = ng.core
  .Component({
    selector: 'friends',
    template: '<ul><li *ngFor="let friend of friends">{{ friend }}</li></ul>',
    directives: [ng.common.NgFor]
  })
  .Class({
    constructor: function() {
      this.friends = ["Alice", "Bob", "James", "Aaron"];
    }
  });

var HelloApp =
  ng.core.Component({
    selector: 'hello-app',
    template: '<h1>Hello Angular 2!</h1><friends></friends>',
    directives: [FriendsList]
  })
  .Class({
    constructor: function() {}
  });