Aplikacja AngularJS Hello World: Twój pierwszy przykładowy program
Jamesa Hartmana
Najlepszym sposobem na poznanie mocy aplikacji AngularJS jest utworzenie pierwszego podstawowego programu „Hello World” w Angular.JS.
Istnieje wiele zintegrowanych środowisk programistycznych, których można używać do programowania AngularJS. Niektóre z popularnych są wymienione poniżej. W naszym przykładzie używamy Webstorm jako nasze IDE.
- Webstorm
- Sublime Text
- angularjs Eclipse
- visual Studio
Witaj, świecie, AngularJS
Poniższy przykład pokazuje najprostszy sposób stworzenia pierwszej aplikacji typu „Hello world” w AngularJS.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World"
} )
</script>
</body>
</html>
Code Wyjaśnienie:
- "aplikacja ng” jest używane do wskazania, że tę aplikację należy traktować jako aplikację kątową js. Tej aplikacji można nadać dowolną nazwę.
- Kontroler służy do przechowywania logiki biznesowej. W tagu h1 chcemy uzyskać dostęp do kontrolera, który będzie miał logikę wyświetlania „HelloWorld”, więc możemy powiedzieć, że w tym tagu chcemy uzyskać dostęp do kontrolera o nazwie „HelloWorldCtrl”.
- Używamy zmiennej członkowskiej o nazwie „message”, która jest niczym innym jak symbolem zastępczym wyświetlającym komunikat „Hello World”.
- „Znacznik skryptu” służy do odwoływania się do skryptu angular.js, który posiada wszystkie niezbędne funkcjonalności 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 tak naprawdę tworzymy naszą logikę biznesową, czyli nasz kontroler. Specyfika każdego słowa kluczowego zostanie wyjaśniona w kolejnych rozdziałach. Warto 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 pomiędzy kontrolerem a widokiem.
- Tworzymy zmienną składową o nazwie „message”, przypisując jej wartość „HelloWorld” i dołączając zmienną składową do obiektu zakresu.
UWAGA: Dyrektywa ng-controller jest słowem kluczowym zdefiniowanym w angularjs (krok nr 2) i służy do definiowania kontrolerów w aplikacji. W naszej aplikacji użyliśmy słowa kluczowego ng-controller do zdefiniowania kontrolera o nazwie „HelloWorldCtrl”. Rzeczywista logika sterownika zostanie utworzona w (kroku 5).
Jeśli polecenie zostanie wykonane pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Wyświetli się komunikat „Witaj, świecie”.
