Skapa webbappar enkelt med AngularJS

Jag har börjat förälska mig mer och mer i AngularJS som är ett javascript ramverk som utvidgar HTML. Just första stegen med AngularJS är väldigt simpla allt du behöver göra är att sätta attributet ng-app initiera vart AngularJs ska titta, i en “onepage-app” sätt i <html ng-app>.

AngularJS kan koppla ihop input och övrig html utan att behöva skriva någon kod t.ex.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Namn:</label>
      <input type="text" ng-model="dittNamn" placeholder="Fyll i ditt namn">
      <hr>
      <h1>Hej, {{dittNamn}}!</h1>
    </div>
  </body>
</html>

Vi kopplar samman text input med ng-model med namnet “dittNamn” vilket innebär att så fort vi ändrar i input-fältet så kommer modellen dittNamn att uppdateras och om dittNamn skulle ändras någon annanstans så uppdateras input-fältets värde. Längre ner i koden har vi {{dittNamn}} vilket är AngularJS’s sätt att skriva ut värden från modeller, eftersom dittNamn till en början inte har något värde kommer det bara stå “Hej, ” men direkt när du skriver något i textfältet uppdateras {{dittNamn}}. T.ex. om jag fyller i Patrik i textfältet kommer AngularJS direkt uppdatera till “Hej, Patrik” medan jag skriver. Detta exempel kan du testa på Angulars hemsida.

Du kan att stoppa in 2 textfält med ng-model=”dittNamn” och se vad som händer.

Detta är ett väldigt enkelt exempel av Angular, det blir klurigare sen när man börjar jobba med $scope, directives och services men det tar jag upp i senare blogginlägg.

Leave a Reply

Your email address will not be published. Required fields are marked *