AngularJS Skriven av: Isak Glans. Datum: 2015-04-29. Kurs: Webbutveckling. Lärare: Per Sahlin. Utbildning: Systemutvecklare i.net, Newtons Yrkeshögskola. 1
Sammanfattning Syftet med denna uppsats är att ge en praktisk inledning till ramverket AngularJS för nybörjare. Denna guide kommer inte att ge en heltäckande grund i AngularJS, men förhoppningsvis de första stegen som behövs för att komma igång med att lära sig detta ramverk. För att du som läsare skall kunna förstå denna guide så behöver du kunna grunderna HTML och Javascript. Inledning Angular är ett populärt Javacript ramverk (eng. framework) utvecklats av Google omkring 2009. Den används ofta för att programmera ihop det grafiska gränssnittet i såväl mobil- som webbapplikationer. Angular applikationer är tänkt att skapa så kallade single page applikationer (SPA). En single page applikation är en webbapplikation som påminner mer om ett datorprogram (s.k. rich extensible web applications) än en HTML webbsida. Detta innebär att man egentligen utgår ifrån en enda index html fil, och som sedan delvis uppdateras när användaren interagerar med webbapplikationen. Istället för att ladda om sidan på nytt så uppdaterar man exempelvis enbart en div-taggs innehåll. Installation Det första steget för att lära sig Angular är att antingen ladda ner ramverket (https://angularjs.org/), eller också länka in den i din HTML header med ett så kallat CDN script på följande vis: <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> Om du väljer att ladda ner Angular så får du en zip fil med en rad filer. För att göra de exempel som visas i denna guide så behöver du egentligen bara en fil, nämligen angular.min.js. Nästa steg är att skapa dig en index.html fil, vari du länkar in Angular. Därefter behöver du skapa dig en javascriptfil som du också länkar in i din index.html fil. Nästa steg är att bli bekant med några av de nyckelord som Angular använder i HTML. Angular i HTML Angular är ett kraftfullt ramverk som ger enkla redskap för att skapa kopplingar (eng binding) mellan data och interface (i detta fallet html filen). Så här kan Angular koden se ut i ett HTML dokument : Exempel 1. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script> </head> <body> <div ng-app=""> 2
<p>name: <input type="text" ng-model="name" /></p> <p ng-bind="name"></p> </div> </body> </html> Exempel 1 gör en koppling (eng. binding) mellan input elementet och paragraf-taggen. Det som skrivs i input elementet kommer också att visas i paragrafen. Allt som krävdes var den kod som visas ovan, och AngularJS ramverket. Observera följande nyckelord: ng-app, ng-model, och ng-bind. Dessa är reserverade ord som används i Angular JS. Lite förenklat kan man förklara hur de används i exemplet på följande sätt: Ng-app säger att html-elementet (med alla sina barnobjekt) är en angular modul. Ng-model säger att input elementets text är en egenskap i ng-app. Ng-bind säger att paragrafen är ihopkopplad med input taggen. Exempel 1 kommer egentligen inte att validera i W3C:s valideringstest, eftersom webläsaren inte känner till Angulars syntax. För att komma runt detta problem kan man lägga till HTML taggen data- före ng-taggarna. <div data-ng-app=""> <input type="test" data-ng-model="firstname"> <p>the name is <span data-ng-bind="firstname"></span></p> </div> För att skriva logiska beräkningar i HTML använder man så kallade expressions. En expression skrivs ut med dubbla hakparentser {{ }} på följande vis: <p>my first expression: {{ 5 + 5 }}</p> På detta sätt kan man även skriva ut model data. <div data-ng-app=""> <input type="test" data-ng-model="firstname"> <p>the name is {{firstname}}</p> </div> Variabler och Iterationer Med hjälp av AngularJS kan man skapa variabler i HTML koden, och göra iterationer. Följande exempel skapar en array i body taggen, och sedan itererar igenom den i en ul-tagg: <!DOCTYPE html> <html data-ng-app=""> <head> <title>iteration</title> </head> <body data-ng-init="names=['pelle', 'Lisa', 'Ida']"> <ul> 3
</ul> <li data-ng-repeat="personname in names"> {{ personname }}</li> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </body> </html> Observera att ng-app ligger i HTML-taggen. Detta görs för att knyta hela index.html till en modul. För att deklarera en variabel i AngularJS används syntaxen data-ng-init. Data-ng-repeat säger åt AngularJS att gör en iteration. Ng-repeat kan även ta emot argument som gör iterationen än mer kraftfull. Exempelvis kan man lägga in ett filter i iterationen på följande sätt: <ul> <li data-ng-repeat="personname in names filter:'lisa'">{{ personname }}</li> </ul> Designmönster MVW bygger liksom många andra populära ramverk idag, på idén att man skall separera kod logik från presentation. Detta innebär att man försöker att placera logik och data källor i vad som kallas för en model. Den biten av ett projekt som berör presentation kallas för view. För att sammanlänka en model med en view används en controller, men också något som heter scope (mer om detta senare). En del programmerare skulle säga att detta sätt att sammanlänka model och view borde ses som en s.k. modelview arkitektur, och andra att det helt enkelt är en controller som i MVC (Model View Controller). Eftersom systemutvecklarna bakom AngularJS valt att inte ta ställning i denna fråga så har de benämnt sitt designmönster för MVW (Model View Whatever). En AngularJS applikation består, förenklat sett, av följande bitar : module, controller, scope och view. För att förstå dessa byggstenar tänkte jag vissa några exempel. MVM exempel Något förenklat kan man säga att en module representerar en behållare för till exempel controller, factory och m.m. Se bild nedan. 4
Illustration 1: Bild hämtad från video: Wahlin En modul skapas med följande kod: var app = angular.module('myapp', []); Modulen i exemplet ovan har döpts till myapp. Hakparenteserna presenterar s.k. dependencies, men de förklaras inte i denna guide. För att initiera modulen så skriver följande i HTML-taggen i din index.html fil: <html ng-app="myapp"> Nu vet Angular att index.html filen är knuten till din modul. Följande kod visar ett exempel som visar en modul, controller och scope. <!DOCTYPE html> <html data-ng-app="demoapp"> <head> <title>controller & scope</title> </head> <body data-ng-controller="simplecontroller"> <h1>controller & scope</h1> <ul> <li data-ng-repeat="personname in names">{{ personname}}</li> </ul> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script> var demoapp = angular.module('demoapp', []); var mycontrollers = {}; mycontrollers.simplecontroller = function ($scope) { $scope.names = ['Pelle', 'Lisa', 'Ida'] 5
} demoapp.controller(mycontrollers); </script> </body> </html> En controller i AngularJS har som funktion att hantera logik, och att bland annat spara data i $scope objektet. $scope objektet används sedan i view:en, det vill säga en HTML fil, för att t ex skriva ut datat. $scope kan liknas vid klistret som håller ihop en controller med en view. Den behövs inte deklareras eftersom den skapas av AngularJS. Inte heller behöver man säga åt Angular att skicka med $scope objektet, för det görs automatiskt. Detta var en kort inledning till hur AngularJS. Förhoppningsvis kan detta vara en början på någons väg i att lära sig detta populära javascriptramverk. Referenser - w3schools.com. Tillgänglig: http://www.w3schools.com/angular/angular_intro.asp. - Alicea, Tony (2014-10). Learn and Understand AngularJS - The First 50 Minutes. tillgänglig: https://www.youtube.com/watch?v=ejbkojeg6f0. - Wahlin Dan (2013-04). AngularJS Fundamentals In 60-ish Minutes, tillgänglig: https://www.youtube.com/watch?v=i9mhiguzkem. 6