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:
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žadovatMyName
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. Nahrazujeng-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() {}
});