Najlepszym sposobem, aby zobaczyć możliwości aplikacji AngularJS, jest utworzenie pierwszej podstawowej aplikacji „Hello World” w Angular.JS.
Istnieje wiele zintegrowanych środowisk programistycznych, których możesz użyć do programowania AngularJS, niektóre z popularnych są wymienione poniżej. W naszym przykładzie używamy Webstorm jako naszego IDE.
- Burza internetowa
- Wysublimowany tekst
- AngularJS Eclipse
- Visual Studio
Witaj świecie, AngularJS
Poniższy przykład przedstawia najłatwiejszy sposób tworzenia pierwszej aplikacji „Hello world” w AngularJS.
Guru99 {{message}}
Objaśnienie kodu:
- Słowo kluczowe „ ng-app ” oznacza, że tę aplikację należy traktować jako aplikację kątową js. Aplikacji można nadać dowolną nazwę.
- Kontroler jest tym, co jest używane do przechowywania logiki biznesowej. W tagu h1 chcemy uzyskać dostęp do kontrolera, który będzie miał logikę wyświetlającą „HelloWorld”, więc możemy powiedzieć, że w tym tagu chcemy uzyskać dostęp do kontrolera o nazwie „HelloWorldCtrl”.
- Używamy zmiennej składowej o nazwie „wiadomość”, która jest niczym innym jak symbolem zastępczym do wyświetlania wiadomości „Hello World”.
- „Znacznik skryptu” jest używany do odniesienia się do skryptu angular.js, który ma wszystkie niezbędne funkcje dla angular js. Bez tego odniesienia, jeśli spróbujemy użyć jakichkolwiek funkcji AngularJS, nie będą one działać.
- „Kontroler” to miejsce, w którym faktycznie tworzymy naszą logikę biznesową, czyli nasz kontroler. Specyfika każdego słowa kluczowego zostanie wyjaśniona w kolejnych rozdziałach. Należy zauważyć, że definiujemy metodę kontrolera o nazwie „HelloWorldCtrl”, do której odwołujemy się w kroku 2.
- Tworzymy „funkcję”, która zostanie wywołana, gdy nasz kod wywoła ten kontroler. Obiekt $ scope to specjalny obiekt w AngularJS, który jest obiektem globalnym używanym w Angular.js. Obiekt $ scope służy do zarządzania danymi między kontrolerem a widokiem.
- Tworzymy zmienną składową o nazwie „wiadomość”, przypisując jej wartość „HelloWorld” i dołączając zmienną składową do obiektu zasięgu.
UWAGA : Dyrektywa ng-controller jest słowem kluczowym zdefiniowanym w AngularJS (krok # 2) i służy do definiowania kontrolerów w twojej aplikacji. W naszej aplikacji użyliśmy słowa kluczowego ng-controller do zdefiniowania kontrolera o nazwie „HelloWorldCtrl”. Rzeczywista logika dla kontrolera zostanie utworzona w (krok # 5).
Jeśli polecenie zostanie wykonane pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Zostanie wyświetlony komunikat „Hello World”.