Ga naar inhoud
Log in om dit te volgen  
Dylan

[AngularJS] Een To-Do-List maken

Aanbevolen berichten

Hoi,

Vandaag had ik weer eens zin om een tutorial te maken! Deze keer over AngularJS. We gaan een Hello World script maken, namelijk een To do List!

Laten we beginnensmiley

Stap 1:Eerst gaan we beginnen met een standaard HTML5 document:
Codeblok (index.html):
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>Mijn to-do-list</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        
    </body>
</html>

Zo als je op regel 6 ziet, hier downloaden we angular.js zodat we er gebruik van kunnen maken. Zorg ervoor de Angular als eerste word geladen als je er nog andere AngularJS libary`s erbij gaat doen(ja er zijn meer!).

Stap 2: Als eerst gaan we angular vertellen dat we op deze pagina gebruik willen maken van een Angular module, dit doen we door in de <html> tag het volgende attribuut erbij te typen;
Codeblok:
2
ng-app="toDoList"

Zoals je ziet noemen we deze app toDoList. Je kan dus meerde apps maken maar meestal gebruik je er gewoon 1 voor 1 website.

Stap 3: Nu gaan we bezig met de body, omdat Angular een MVC model is moeten we dus een aangeven dat we een controller willen gebruiken. Omdat dit nog de basis is gaan we in de <body> tag aangeven dat we de controller toDoCtrl gaan gebruiken (deze maken we zo). Als je echt met Angular bezig gaat ga je waarschijnlijk gebruik maken van templates. In dat geval geef in de router aan welke controller bij welke template hoort.

Dus voeg in de <body> tag deze attribuut toe:
Codeblok:
8
ng-controller="toDoCtrl"


Stap 4: Nu we hebben aangeven welke controller we willen gebruiken kunnen we beginnen met het formulier, maar om het nog wat duidelijker te maken gaan we onze controller klaar maken. Voeg in de <head> een <script> tag toe.

Codeblok:
7
<script></script>


We gaan nu aangeven welke controller bij welke app hoort. In dit geval hebben we maar 1 controller:

Codeblok:
7
8
9
10
11
12
13
<script>
var toDoList = angular.module(toDoList, []);

toDoList.controller(toDoCtrl, [$scope, function($scope) {
    // code
}]);
</script>


We hebben nu aangeven dat we de app toDoList gebruiken en dat we een controller hebben genaamd toDoCtrl. Maar wat $scope?

$scope is zeg maar de verbinding tussen de controller en het model. Bijvoorbeeld:

Als dit de controller is;
Codeblok (voorbeeld.php):
1
2
3
4
5
6
7
<script>
var toDoList = angular.module(toDoList, []);

toDoList.controller(toDoCtrl, [$scope, function($scope) {
    $scope.hello = World!;
}]);
</script>


en het model is:

Codeblok (voorbeeld.php):
1
{{hello + hello}}


daar komt dus uit: Hello World!

En omdat $scope eerst een string is en daarna in een function komt is omdat wanneer je de code gaat compressen (Dus kleiner maken) worden alle vars hernoemt naar bijvoorbeeld a. Maar Angular moet weten dat je scope wilt gebruiken, en omdat wanneer je compressed strings niet aangepast word weet angular wat wat is. Je kan bijvoorbeeld ook dit gebruiken;
Codeblok (voorbeeld.php):
1
toDoList.controller(toDoCtrl, [$scope, function(a) {


Angular weet nu dat a de $scope is!

Stap 5: Laten we beginnen met de logic in de controller, we willen items opslaan wat we nog willen doen. We moeten wat we moeten doen en of het al klaar is of niet. We maken dus een object aan en omdat we de items willen weergeven moeten we dus gebruik maken van de scope.

Codeblok:
7
8
9
10
11
12
13
<script>
var toDoList = angular.module(toDoList, []);

toDoList.controller(toDoCtrl, [$scope, function($scope) {
    $scope.toDos = [{title:Een to-do-list maken in AngularJS, done:false}];
}]);
</script>


Mooi, maar nu willen we nog een aantal functies, namelijk een functie wat een nieuw item toevoegt en wat alle items weg haalt wat we hebben gedaan, die functies willen we gebruiken in het model, dus gaat het via de scope

Codeblok:
7
8
9
10
11
12
13
14
15
16
<script>
var toDoList = angular.module(toDoList, []);

toDoList.controller(toDoCtrl, [$scope, function($scope) {
    $scope.toDos = [{title:Een to-do-list maken in AngularJS, done:false }];
    $scope.add = function() { $scope.toDos.push({title: $scope.newItem, done:false }) }
    $scope.removeCompleted = function() { $scope.toDos = $scope.toDos.filter(function(item) {
return !item.done}) }
}]);
</script>


Mooi, wat de add() functie doet, is eigenlijks het nieuwe item invoegen, wat wel duidelijk is. De functie removeCompleted is wat anders namelijk filter(). We herschrijven de toDos array, we halen alles eruit en we stoppen de items terug als het item nog niet klaar is (dus false).

Stap 6:We zijn bijna klaar, nu gaan we weer terug naar het formulier.
Laten we maar beginnen met een formulier:
Codeblok:
1
2
3
4
<form ng-submit="add()" name="frm">
<input type="text" ng-model="newItem">
<button>Add!</button>
</form>


Als we nu het formulier submitten word de functie add() uitgevoerd, en in de input zie dat newItem het model is. Als in de functie kijkt zie je dat $scope.newItem toegevoegt word. Dat is dus de value van de input.

We hebben nu ook nog een button nodig die ervoor zorgt dat de functie removeComleted uitgevoerd word als we erop klikken, probeer dit zelf maar eens.
Antwoord:
Klik om de spoiler te openen


Mooi! Het enigste wat we nu nog moeten doen is zorgen dat de items worden weergeven. Dit doen we met ng-repeat.

Codeblok:
1
2
3
<ul>
<li ng-repeat="toDo in toDos">{{toDo.title}}</li>
</ul>


Maar we zijn nog niet klaar, we moeten ook nog items kunnen uitvinken en ook nog laten zien welke we gedaan hebben;

Codeblok:
1
2
3
4
5
6
        <ul>
            <li ng-repeat="toDo in toDos">
                <input type="checkbox" ng-model="toDo.done" />
                {{toDo.title}}
            </li>
        </ul


We hebben nu dus een checkbox met het model toDo.done. Als we nu de checkbox veranderen verandert dus de done state van het item ook! Laten we nog iets maken waardoor we kunnen zien welke items we al gedaan hebben;
Codeblok:
1
2
3
4
5
6
        <ul>
            <li ng-repeat="toDo in toDos">
                <input type="checkbox" ng-model="toDo.done" />
                <span ng-class="{done: toDo.done}">{{toDo.title}}</span>
            </li>
        </ul


Het item krijgt dus een class done ALS toDo.done true is! We moeten dus een class aanmaken in CSS:

Codeblok (voorbeeld.php):
1
<style>.done {text-decoration:line-through; color:#ccc}</style>


Vragen, opmerkingen? Reacties!
Naar: AngularJS : Create a ToDo App

Deel dit bericht


Link naar bericht
Delen op andere sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gast
Reageer op dit topic...

×   Geplakt als RTF formaat tekst.   Plak in plaats daarvan als platte tekst

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

Log in om dit te volgen  

×
×
  • Nieuwe aanmaken...