Angular js warsztaty stopień 1

AngularJsWarsztaty - stopień 1

AngularJs "Hello world"

● git checkout slide-1

ng-include

● git checkout slide-2

Kontroler

$scope

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

Podsumowanie

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/