Det bästa sättet att se kraften i en AngularJS-applikation är att skapa ditt första grundprogram "Hello World" -app i Angular.JS.
Det finns många integrerade utvecklingsmiljöer du kan använda för AngularJS-utveckling, några av de populära nämns nedan. I vårt exempel använder vi Webstorm som vår IDE.
- Webstorm
- Sublim text
- AngularJS Eclipse
- Visuell Studio
Hej värld, AngularJS
Exemplet nedan visar det enklaste sättet att skapa din första "Hello world" -applikation i AngularJS.
Guru99 {{message}}
Kodförklaring:
- Nyckelordet " ng-app " används för att beteckna att denna applikation ska betraktas som en vinkelj-applikation. Vilket namn som helst kan ges till denna ansökan.
- Styrenheten är det som används för att hålla affärslogiken. I h1-taggen vill vi komma åt styrenheten, som har logiken att visa "HelloWorld", så vi kan säga, i den här taggen vill vi komma åt kontrollenheten som heter "HelloWorldCtrl".
- Vi använder en medlemsvariabel som kallas "meddelande", vilket bara är en platshållare för att visa "Hello World" -meddelandet.
- "Skripttaggen" används för att referera till angular.js-skriptet som har all nödvändig funktionalitet för vinklad js. Utan denna referens, om vi försöker använda några AngularJS-funktioner, fungerar de inte.
- "Controller" är den plats där vi faktiskt skapar vår affärslogik, som är vår controller. Specifikationerna för varje nyckelord kommer att förklaras i de efterföljande kapitlen. Vad är viktigt att notera att vi definierar en styrenhetsmetod som heter 'HelloWorldCtrl' som det hänvisas till i steg 2.
- Vi skapar en "funktion" som kommer att anropas när vår kod anropar denna styrenhet. $ Scope-objektet är ett speciellt objekt i AngularJS som är ett globalt objekt som används inom Angular.js. $ Scope-objektet används för att hantera data mellan styrenheten och vyn.
- Vi skapar en medlemsvariabel som heter "meddelande", tilldelar den värdet "HelloWorld" och bifogar medlemsvariabeln till scope-objektet.
OBS : ng-controller-direktivet är ett nyckelord som definierats i AngularJS (steg 2) och används för att definiera styrenheter i din applikation. Här i vår applikation har vi använt nyckelordet ng-controller för att definiera en controller med namnet 'HelloWorldCtrl'. Den faktiska logiken för styrenheten skapas i (steg 5).
Om kommandot utförs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Meddelandet 'Hello World' visas.
