Aplikacija AngularJS Hello World: Vaš prvi primjer programa

By: James Hartman James Hartman
Hours Ažurirano

Najbolji način da vidite snagu AngularJS aplikacije je da napravite svoju prvu osnovnu programsku aplikaciju “Hello World” u Angular.JS.

Postoje mnoga integrirana razvojna okruženja koja možete koristiti za AngularJS razvoj, neka od popularnih spomenuta su u nastavku. U našem primjeru koristimo Webstorm kao naš IDE.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Pozdrav svijetu, AngularJS

Primjer u nastavku prikazuje najlakši način za stvaranje vaše prve aplikacije “Hello world” u AngularJS-u.

Program AngularJS Hello World

<!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>

Objašnjenje koda:

  1. "ng-aplikacija” ključna riječ koristi se za označavanje da ovu aplikaciju treba smatrati kutnom js aplikacijom. Ovoj se aplikaciji može dati bilo koji naziv.
  2. Kontroler je ono što se koristi za držanje poslovne logike. U oznaci h1 želimo pristupiti kontroleru, koji će imati logiku za prikaz "HelloWorld", tako da možemo reći, u ovoj oznaci želimo pristupiti kontroleru pod nazivom "HelloWorldCtrl".
  3. Koristimo varijablu člana pod nazivom "message" koja nije ništa drugo nego rezervirano mjesto za prikaz poruke "Hello World".
  4. "Oznaka skripte" koristi se za referenciranje skripte angular.js koja ima sve potrebne funkcije za angular js. Bez ove reference, ako pokušamo koristiti bilo koju AngularJS funkciju, ona neće raditi.
  5. “Kontroler” je mjesto gdje zapravo stvaramo svoju poslovnu logiku, a to je naš kontroler. Specifičnosti svake ključne riječi bit će objašnjene u narednim poglavljima. Važno je napomenuti da definiramo metodu kontrolera pod nazivom 'HelloWorldCtrl' koja se spominje u koraku 2.
  6. Stvaramo "funkciju" koja će biti pozvana kada naš kod pozove ovaj kontroler. $scope objekt je poseban objekt u AngularJS koji je globalni objekt koji se koristi unutar Angular.js. Objekt $scope koristi se za upravljanje podacima između kontrolera i pogleda.
  7. Stvaramo varijablu člana pod nazivom "message", dodjeljujemo joj vrijednost "HelloWorld" i pridružujemo varijablu člana objektu opsega.

BILJEŠKA: Direktiva ng-controller je ključna riječ definirana u AngularJS (korak#2) i koristi se za definiranje kontrolera u vašoj aplikaciji. Ovdje u našoj aplikaciji upotrijebili smo ključnu riječ ng-controller za definiranje kontrolera pod nazivom 'HelloWorldCtrl'. Stvarna logika za kontroler bit će stvorena u (korak#5).

Ako je naredba uspješno izvršena, sljedeći će se izlaz prikazati kada pokrenete svoj kod u pregledniku.

Izlaz:

Prikazat će se poruka 'Hello World'.

Program AngularJS Hello World