AngularJsWarsztaty - stopień 1
AngularJs "Hello world"
● git checkout slide-1
ng-include
● git checkout slide-2
ng-controller
● git checkout slide-3● podpięcie kontrolera do częsci widoku● $scope działa tylko wewnątrz tagu na którym
jest kontroler
Zadanie 1
● git checkout todo-1● dodanie kontrolera zawierajacego menu● dodanie i wyświetlenie menu w index.html
Rozwiązanie 1
● git add .● git commit -m '(commit message)'● git checkout done-1
$routeProvider
● git checkout slide-4
ng-repeat<ul>
<li ng-repeat="project in projects">
<a href=""></a>:
</li>
</ul>
Zadanie 2
● git checkout todo-2● zbudować menu zawierające linki do
wszystkich ścieżekvar object = {};
var array = [];
var arrayOfObjects = [
{
lorem: 1,
ipsum: 2
},{
test: 4
} ]
Rozwiązanie 2
● git add .● git commit -m '(commit message)'● git checkout done-2
Zadanie 3
● git checkout todo-3● zbudować własną podstronę, z
wyświetlaniem listy danych podanych w kontrolerze
Rozwiązanie 3
● git add .● git commit -m '(commit message)'● git checkout done-3
OrderBy
● git checkout slide-5<ul>
<li ng-repeat="product in products | orderBy:'price'">
</ul>
Zadanie 4
● git checkout todo-4● wymień hardkodowany parametr na
pochodzący ze zmiennej ustawianej w formularzu
Rozwiązanie 4
● git add .● git commit -m '(commit message)'● git checkout done-4
filter
● git checkout slide-6● składnia filter: {experesion}<tr ng-repeat="person in list | orderBy:orderKey |
filter:'oo'">
filter - argumenty
● 'Lorem ipsum'● {key: 'value'} ● {$: 'value'}
Zadanie 5
● git checkout todo-5● zmienić filter na wyszukiwarkę z 3 polami:
szukanie po firstName, lastName lub wszędzie
Rozwiązanie 5
● git add .● git commit -m '(commit message)'● git checkout done-5
Funkcje w modelu<p>{{displayValueReturnedByFunction()}}</p>
<input ng-change="fireFunctionWhenChangeHappen()">
Validowanie formularza
● git checkout slide-8
Zadanie 6
● git checkout todo-6● newPerson form● ng-click
○ nazwaListy.push(nowyElement) ○ podstawić {}
Rozwiązanie 6
● git add .● git commit -m '(commit message)'● git checkout done-6
Trzymanie danych w controlerze
● git checkout slide-9● #/main
Services
● git checkout slide-10● #/main
Zadanie 7
● git checkout todo-7● dodanie własnego serwisu, People do
użytku przez ListCtrl
Rozwiązanie 7
● git add .● git commit -m '(commit message)'● git checkout done-7
Json - obiekt{
"about": "I'm an object",
"structure": {
"key": "value"
},
"arrays": [ "I", "can", "keep",
"them", "too" ]
}
Json - tablica[
{
"objectId": 1
},
{
"objectId": 2
}
]
Rest
● http://example.com/products● http://example.com/products/1
$resource
● query()● get()
var userResource = $resource('/user/:userId', {});
userResource.get({userId: 1});
Dane do json
● git checkout slide-11
Materiały
● http://docs.angularjs.org/tutorial/● http://egghead.io/
Co dalej?
● webstorage etc.● backend● dev env● unit tests
Stay tuned
● http://akai.org.pl/● http://poznan.gtug.pl/● http://www.meetup.com/Hacking-Poznan/