MVC – i relation till Angular.js + dependency injection

mvc

Det är vanligt att dela upp en applikation i separata lager. I MVC är lagren: Model (datamodell och data), View (gränssnitt) och Controller (inputlogik).

Läs gärna Wikipedia-posten om MVC!

Angular.js och MVC

Vyer

I Angular.js skapas vyer när HTML-templates (ibland även kallade partials) populeras med data. Viss inputlogik och programlogik bor även i templates i form av s.k. direktiv.

Modell

Data från en datamodell (en JavaScript-datastruktur, ofta skapad från JSON hämtad från backend/en databas) delas ut till vyerna via det ”magiska” $scope-objektet. (I Angular.js finns flera $scope som kan ärva av varandra eller vara isolerade.)

Controller

Angular.js kallar inte sig själv för ett MVC-ramverk utan ett MVW-ramverk (Model, View, Whatever). Detta då inte bara controllers kan dela ut, hämta in och begränsa vilken data som flödar mellan modell och vyer. Även direktiv kan göra detta.

Viktigt att förstå med Angular.js är JavaScript-kod delar ut data till vyer via $scope, att vyer lägger till/ändrar data i $scope via direktivet ng-model (och även ng-init).

Och en annan sak: Dependency injection

Angular.js är uppbyggt så att man skickar funktioner man vill ska köras i olika lägen till olika Angular-metoder. (T.ex. en funktion som ska köras då appen konfigureras med routes eller en funktion/controller som ska köras när en vy laddas etc.).

Olika funktioner kan ha olika beroenden av ”resurser”, som kan vara delmängder av Angular, services du själv har skrivit etc.

Dessa beroenden anges i en array, med funktionen som ska köras som sista argument. Angular skickar sedan resurserna som inargument till din funktion. Detta kallas dependency injection.

// Exempel på dependency injection
app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
   // This function sets up routes and now has access too $routeProivder and $locationProvider
   ...code...
}]);

// Ett annat exempel på dependency injection - skapa en controller med namnet home
app.controller("home", ["$scope", function($scope) {
  // This function that "is" my controller now has access to $scope
  ...code..
}]);
0 votes