Webbutveckling med AngularJS

Storlek: px

Starta visningen från sidan:

Download "Webbutveckling med AngularJS"

Britta Nyström
för 7 år sedan
Visningar:

1 Webbutveckling med AngularJS Kommunikation och Användargränssnitt HT 2016 Per Lind

2 Upplägg Laboration 1 - Skapa en SPA (single-page application) med AngularJS Laboration 2 - Responsiv design, mobile-first m.m.

3 Laboration 1 Vi kommer använda: AngularJS 1.5.x (1.5.8 senaste release) Bootstrap 3.3.x (3.3.7 senaste release)

4 Dokumentation

5 AngularJS - Varför Angular? Om man vill skapa dynamiska webb appar på klient-sidan så är Angular ett väldigt bra val. Har mycket abstraktion och tar i bakgrunden hand om många av de banala delarna i CRUD (create, read, update and delete) applikationer. Det har utökad HTML syntax i form av directives som låter en defienera nya HTML element och attribut. HTML templates är inte längre statiska mallar. Låter dig organisera dina filer, man kan bygga välstrukturerade skalbara projekt. Använder MVC-mönstret (model - view - controller). Fungerar tillsammans med jquery.

6 Dokumentsturktur Det är helt fritt att välja dokumentstruktur för projekt. Men rekommendationen är att försöka dela upp filer i en mapp per feature, istället för att t.ex. gruppera views för sig och controllers för sig osv.

7 Databindning

8 Databindning angular.module('scopeexample', []).controller('mycontroller', ['$scope', function($scope) { $scope.username = 'World'; $scope.sayhello = function() { $scope.greeting = 'Hello ' + $scope.username + '!'; }; }]); <html ng-app= myapp> <head>... </head> <body ng-controller= mycontroller > <button ng-click= sayhello() >Greet</button> <p>my greeting: {{greeting}}<p> </body> </html> När $scope.greeting tilldelas ett värde i Controller får view att uppdatera sig med nya model värdet

9 Databindning Genom att använda ngmodel-direktivet binds data till modellen. Angular uttryck inuti {{ }} har tillgång till scope och kan alltså hämta ut model-värden.

10 AngularJS - Controller och scope Vad är scope? Scope är objektet som håller referenser till applikationens model (variabler och funktioner). Scope fungerar som en koppling mellan controller och view. Controller har som roll att initiera och hantera beteende på $scope objektet.

11 AngularJS - Directives Angular is what HTML would have been, had it been designed for applications. - från AngularJS Devloper Guide Angular utökar HTML med så kallade directives. Några key features i Angular som använder directives: Data binding med {{ }}. DOM manipulations direktiv så som ngrepeat, ngif, ngshow, nghide etc. Inbyggt stöd för formulärvalidering. Utökat beteende som t.ex. DOM event handling på element. Skriva återanvändbara HTML komponenter.

er apps rot. <!doctype html> <html ng-app= myapp > <head>...</head> <body>.

12 Bootstrapping index.html Initiera appen med ngapp-direktivet. Detta görs genom att lägga till ng-app som attribut i det element som ska bli er apps rot. <!doctype html> <html ng-app= myapp > <head>...</head> <body>... <script src= angular.js ></script> </body> </html> app.js var app = angular.module('myapp', []);

13 Fler directives Directives är föregångaren till components och låter en definiera element och attribute som utökar vanlig HTML syntax. Det finns många directives i Angular, vilka ersätter vanlig DOM manipulation som man annars skulle behövt skriva med t.ex. jquery. Om man vill lägga in ytterligare beteende så går det att skriva egna directives. ngclick - kan definiera ett uttryck som anropas när användaren klickar på elementet. ngchange - kan definiera ett uttryck som anropas när ngmodel ändras på elementet (ngmodel krävs). ngclass - kan skriva villkor för när en CSS ska appliceras på ett element.

14 Components AngularJS 1.5 introducerade component. Det är en förenkling av directive som gör det lättare att skapa egna återanvändabara HTML-mallar med tillhörande controller. Controllern är som standard tillgänglig i HTML mallen under alias:et $ctrl. phone-name.js function PhoneNameController() { }; angular.module('heroapp').component('phonename', { template: '<h1>{{$ctrl.phone.name}}</h1>', controller: PhoneNameController, bindings: { name: '=' } }); index.html... <phone-name name="name"></phone-name>... output: <phone-name name="name" class="ng-isolate-scope"> <h1 class="ng-binding">name: Olof</h1> </phone-name>

15 Angular route var app = angular.module('myapp', []); app.config(['$locationprovider', '$routeprovider', function($locationprovider, $routeprovider) { $locationprovider.hashprefix('!'); } ]); $routeprovider.when('/view1'){ templateurl: '/view1 controller: View1Controller}); $routeprovider.when(/details/:id){ templateurl: '/details/details.html, controller: DetailsController}); $routeprovider.otherwise({ redirectto: '/view1'}); Det är möjligt att skicka med parameter-värden i en URL-route, genom att använda kolon som prefix. Se details/:id, denna url kommer läsa ut adressen details/123 som Url: details/ $routeparam.id = 123; Utöver templateurl och controller, så är det även möjligt att i routing ha med ett resolve-uttryck som hämtar data från en resurs och skickar den till controller:n. Se $routeprovider.

Bootstrap Twitter Bootstrap kan användas för att få lite snyggare element. Det är ett CSS-ramverk som bygger på ett grid-system med tolv kolumner. <link rel="stylesheet" href="bootstrap.min.

16 Bootstrap Twitter Bootstrap kan användas för att få lite snyggare element. Det är ett CSS-ramverk som bygger på ett grid-system med tolv kolumner. <link rel="stylesheet" href="bootstrap.min.css" /> <script src="bootstrap.min.js" ></script> Bootstrap är uppdelat i två delar, ett stylesheet med ett tema och ett javascript bibliotek med UI komponenter så som dropdowns, dialogrutor (modals), tabbar och tooltips m.m. Det finns många färdiga templates att utgå ifrån både på w3schools och getboostrap.

17 Navbar En av de Bootstrap komponenter som vi kommer se i första laborationen är Navbar. Vilket som hörs på namnet är en toolbar för navigation..navbar.navbar-default.collapse.navbar-collapse

18 Bootswatch Bootswatch - alternativa Bootstrap teman

19 Laboration Ni kommer få ett projekt att utgå ifrån på laborationen som baseras på angular-seed. Obs! Angular-seed appen använder CSS temat ifrån html5-boilerplate, men eftersom vi använder Bootstrap kan ni ta bort det. Det finns varken npm eller bower i datorsalarna så om ni använder angular-seed så behöver ni ersätta alla länkar med bower_components/ i index-filen med samma minifierade filer ifrån googleapis eller Grupp 1 14/9 Onsdag: /9 Onsdag: Grupp 2 21/9 Onsdag: /10 Onsdag:

20 Rekommendationer Om ni kommer arbeta på egna dator så rekommenderas starkt utvecklingsmiljön Webstorm eller Phpstorm. Det är också värt att installera NPM och Bower. Här finns en bra blogpost som kan vara en bra utgångspunkt: an-bower/ Bower gör livet betydligt lättare när man har många tredje-parts beroende i sitt projekt, då det sköter hämtning och länkning åt en. För att installera beroende kör man kommandot bower update i kommandotolken. bower.json - ifrån angular-seed { } "name": "angular-seed", "description": "A starter project for AngularJS", "version": "0.0.0", "homepage": " "license": "MIT", "private": true, "dependencies": { } "angular": "~1.5.0", "angular-route": "~1.5.0", "angular-loader": "~1.5.0", "angular-mocks": "~1.5.0", "html5-boilerplate": "^5.3.0"

Relevanta dokument

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>