Webbramverk, 1DV450
Linnéuniversitetet, vt 2016

Klientramverk

AngularJS

Denna presentation är licensierat under en Creative Commons Erkännande 3.0 Unported Licens. (Där inte annat anges)

Nya krav på klientapplikationer - SPA

JavaScripts utveckling
Single Page Application
DOM-manipulering
Offline
State change in client application
Partial page update
Server communication (AJAX, Web Sockets)
Bookmarking, deep-link, route-handling
Browser history

Mer logik på klienten, BaaS

Baas

JavaScript frameworks

http://github.com/showcases/front-end-javascript-frameworks

Gemensamma delar

"Full-stack" klientramverk

Återanvändsbara komponenter
Dynamisk databindning mot DOM
Routing
Templatemotor

AngularJS

Min erfarenhet av javascriptramverk Varför valde jag angular?

AngularJS

Miško Hevery and Adam Abrons, 2009
Google - open source
Version 1.5.0 - 2016-02
Stort community, anställt utvecklingsteam
The A in MEAN
AngularJS - 2.0 ???? (http://angular.io)
http://angularjs.org/
ng-conf 2015

Vem, vad, community, utveckling

Filosofi och designmål

Imperativ programmering för logik (beskriv steg för steg vad som ska göras)
Deklarativ programmering för UI (beskriv VAD som ska göras - inte HUR)
"Show HTML new tricks"- Utvecklare och designers
Data-binding
DOM-manipulering skilt från applikationslogik
Modulärt, Direktiv, Komponenter, Dependency Injections
Kunna skriva testningsbar kod

MVC / MVVM / MVW

MVC är en högnivåarkitektur
Har många "varianter" (MVP, MVVM, MTV)
Har många tolkningar av olika utvecklare...ifrån olika bakgrund
AngularJS === MVW
MVC Does Not Scale, Use Flux Instead http://www.infoq.com/news/2014/05/facebook-mvc-flux

Foto cc by: http://www.flickr.com/photos/nyuhuhuu/

Having said, I'd rather see developers build kick-ass apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you" - Igor Minar 19 juli 2012

Scope
Controller
Model/ViewModel
Dependency injection
Route providing
Modules
Services, Factories, Providers
Directive
Filters
Declarative partial template view

Foto cc by: http://www.flickr.com/photos/83633410@N07/

Utvecklingsmiljö

WebStorm - https://www.jetbrains.com/webstorm/
Atom.io
...

Att tänka på

Jobba mot ditt API =>Två servrar?
Same-origin policy? https://github.com/cyu/rack-cors
Single Page Application - Deeplinking?

Hello John!

Visa hello world Prata om directives Bygg vidare med lista på lag

$scope (angularjs 1.5 and before)

Används som klister mellan controller och vyn
Innehåller både data och funktionalitet
ViewModel? Modeller är javascriptobject som deklareras på $scope

Alternativ syntax

Visa hello world Prata om directives Bygg vidare med lista på lag

Moduler och Dependency injection

Kod-container för olika delar av din applikation (controllers, services, filters, directives)
Testbarhet, "Separation of Concerns"
Men också för att beskriva beroenden - Dependency injections
Angular har en DI engine

// $scope och $http är inbyggt i angularJS
// TeamService är en egen service/modul som har en specifik uppgift
TeamListController.$inject = ['$scope', '$http', 'TeamService'];

"Angular modules don't try to solve the problem of script load ordering or lazy script fetching." - require.js

!-- MVC architecture example-->

Exempel - Modules

Exempel med egen controller-fil

Egna moduler

Registreras i applikationen via "recept" som bygger upp objekten och gör dessa tillgängliga för DI. http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory

Values - Använd ej?
Constants - Registerar konstanter för applikationen
Factories - Vanligast? privata variabler i eget scope
Services - Enkel, förvirrande namn, nja...
Providers - Mer avancerad. Ger möjlighet att konfigurera innan användandet

Foto cc by: http://www.flickr.com/photos/seattlemunicipalarchives/

!-- MVC architecture example-->

Exempel - Adding service

Visa ett exempel med controllers i olika filer

Routing

Ladda ner angular-route.js
Inkludera ngRoute som modul i din applikation
Definiera dina routes i applikationens "config"
Flyttades ut från angular.js core från 1.2 RC1

Partial views

SPA skiftar "states" och laddar om views i en och samma sida
Vi vill kunna tala om vad som ska laddas in

Exempel routing och views

Applikationsstruktur

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
index.html

What if > 10 controllers?

app/
----- shared/   // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
----- components/   // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/      // Images and icons for your app
----- css/      // All styles and style related files (SCSS or LESS files)
----- js/       // JavaScript files written for your app that are not for angular
----- libs/     // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html

Nästa gång

Jobba mot ett API
$http, $resource...
Custom Directives

Webbramverk, 1DV450 Linnéuniversitetet, vt 2016

Klientramverk

Nya krav på klientapplikationer - SPA

Mer logik på klienten, BaaS

JavaScript frameworks

Gemensamma delar

AngularJS

AngularJS

Filosofi och designmål

MVC / MVVM / MVW

Utvecklingsmiljö

Att tänka på

Hello John!

$scope (angularjs 1.5 and before)

Alternativ syntax

Moduler och Dependency injection

Exempel - Modules

Egna moduler

Exempel - Adding service

Routing

Partial views

Exempel routing och views

Applikationsstruktur

Nästa gång

Webbramverk, 1DV450
Linnéuniversitetet, vt 2016