Superheroic JavaScript MVW Framework
Riešenia (otvoriť len ak sa stratíte, niečo nepôjde! :P )
Úvod
- od Googlu
- single page (neposielame to isté dookola, rýchle prehliadače)
- MVC (MVW)
Link na stránku Angularu
Na stiahnutie súbor angular.js
Úlohy
Model
- dáta
- two-way data binding
Úloha 1
Začneme jednoduchým Hello "world", chceme aby sa text z inputu hneď vypisoval riadok nižšie, aktuálny po každom zadanom písmene.
Súbor angular.js, ktorý sme si stiahli pridáme do priečinka k tomuto súboru (kde je uložený).
<!DOCTYPE html> <html>
<script src="angular.js"></script>
<body>
Write some text in textbox:
<input type="text" " />
<div>Hello </div>
</body>
</html>
Úloha 2
Pridajme jednoduchú funkcionalitu - nech sa "Hello ..." ukáže až keď je koho pozdraviť (input nie je prázdny).
Úloha 3
Filtre. Pridajme ďalšie dva "Hello ..." výpisy, aby sme v jednom vypísali všetko veľkým písmom (uppercase Bajty :P ) a v druhom malým.
Úloha 4
Skúsme vypísať formátovaný dátum.
Úloha 5
Vypíšme číslo do určitého počtu desatinných miest.
Controller
- JavaScriptovské funkcie (viazané k Scope)
- pridáva logiku do view (HTML stránka)
Scope
- objekt, ktorý spája view a controllera
- doručuje im tiež dáta modelu
Úloha 6
Doplňme tento kód tak, aby sme mohli cez input pridávať kontakty.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div >
Email:<input type="text" />
<button >Add</button>
<h2>Contacts</h2>
<ul>
<li> {{ contact }} </li>
</ul>
</div>
<script type="text/javascript">
function ContactController() {
...\\ }
</script>
</body>
</html>
Úloha 7
Budeme mať položky meno, email a telefón, s tým, že záznamy budú v tabuľke a budeme ich vedieť aj editovať a mazať.
demoDva.html
<!DOCTYPE html>
<html>
<head>
<title>Contacts app, AngularJS</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7\\/angular.min.js"></script>
<script type="text/javascript" src="logic.js"></script>
</head>
<body>
<div ng-app="" ng-controller="ContactController">
<form class="well">
<label>Name</label>
<input type="text" name="name" ng-model="newcontact.name"/>
<label>Email</label>
<input type="text" name="email" />
<label>Phone</label>
<input type="text" name="phone" />
<br/>
<input type="hidden" />
<input type="button" value="Save" class="btn btn-primary"/>
</form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr >
<td>{{ contact.name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone }}</td>
<td>
<a href="#" ng-click="">edit</a> |
<a href="#" ng-click="">delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
logic.js
var uid = 1;
function ContactController($scope) {
$scope.contacts = [
{ id:0, 'name': 'Viral',
'email':'hello@gmail.com',
'phone': '123-2343-44'
}
];
$scope.saveContact = function() {
if($scope.newcontact.id == null) {
//if this is new contact, add it in contacts array
} else {
//for existing contact, find this contact using id
//and update it.
\\
}
//clear the add contact form
}
$scope.delete = function(id) {
//search contact with given id and delete it
}
$scope.edit = function(id) {
//search contact with given id and update it (send it to form)
//we use angular.copy() method to create
//copy of original object
angular.copy($scope.contacts[i]);
}
}
Service
- singletonovský objekt/funkcia s business logikou
- controller teda neobsahuje priamo logiku, ale "prepája" dáta modelu a view pomocou $scope
- interné: $http, $route, $window, $location... a vlastné, nami vytvorené
Úloha 8
Našu úlohu teda rozšírime o service. Tu už nebudeme dopĺňať.
http://jsfiddle.net/viralpatel/72vT5/light/
Routing
- $routeProvider - provider pre $rootService - prepájanie controllerov, rôzne view a aktuálne URL (história v prehliadači)
Úloha 9
Dokončme aplikáciu, konkrétne routing, aby vypísalo po kliknutí na odkazy vetu s textom, v ktorom view sa nachádzame.
http://plnkr.co/edit/TW7MH0YhXDfVKOJ5g0Us?p=info
Uloha 10, 11 - BONUS
Pozrime sa na ďalšie
Posielanie parametrov.
http://plnkr.co/edit/MxJkCpJDKXDNyYc1web8?p=preview
Lokálne view (zo scriptu).
http://plnkr.co/edit/nYsORXGahmGOVyNmYWaF?p=preview
Použité zdroje:
- http://viralpatel.net/blogs/angularjs-introduction-hello-world-tutorial/
- a nasledujúce tutoriály