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