Submit Search
Angular js warsztaty stopień 1
0 likes
•
1,615 views
Marcin Wosinek
1 of 38
Download now
Downloaded 10 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
More Related Content
PDF
Angular js warsztaty stopień 2
Marcin Wosinek
PPTX
AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"
Dariusz Kalbarczyk
PDF
Automation in angular js
Marcin Wosinek
PPTX
CDBG CN 2016 Conference SlidesFINAL
Kimberly Johnson
DOCX
Caracteristicas del ser vivo
Universidad de Guadalajara
PPTX
AngularJS Beginners Workshop
Sathish VJ
PDF
Podstawy AngularJS
Sages
PDF
HYC - Angular stań się kanciastym
Dariusz Jagieło
Angular js warsztaty stopień 2
Marcin Wosinek
AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"
Dariusz Kalbarczyk
Automation in angular js
Marcin Wosinek
CDBG CN 2016 Conference SlidesFINAL
Kimberly Johnson
Caracteristicas del ser vivo
Universidad de Guadalajara
AngularJS Beginners Workshop
Sathish VJ
Podstawy AngularJS
Sages
HYC - Angular stań się kanciastym
Dariusz Jagieło
More from Marcin Wosinek
(6)
PDF
Automatyzacja w ng świecie - ng-poznań 11 września 2014
Marcin Wosinek
PDF
AngularJs in Las Palmas de GC
Marcin Wosinek
PDF
The angular way 19 october 2013 Gdańsk
Marcin Wosinek
PDF
Angular js 24 april 2013 amsterdamjs
Marcin Wosinek
PDF
Backbone js in drupal core
Marcin Wosinek
PDF
Angular js - 4developers 12 kwietnia 2013
Marcin Wosinek
Automatyzacja w ng świecie - ng-poznań 11 września 2014
Marcin Wosinek
AngularJs in Las Palmas de GC
Marcin Wosinek
The angular way 19 october 2013 Gdańsk
Marcin Wosinek
Angular js 24 april 2013 amsterdamjs
Marcin Wosinek
Backbone js in drupal core
Marcin Wosinek
Angular js - 4developers 12 kwietnia 2013
Marcin Wosinek
Ad
Angular js warsztaty stopień 1
1.
AngularJs Warsztaty - stopień
1
2.
AngularJs "Hello world" ●
git checkout slide-1
3.
ng-include ● git checkout
slide-2
4.
Kontroler
5.
$scope
6.
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
7.
Zadanie 1 ● git
checkout todo-1 ● dodanie kontrolera zawierajacego menu ● dodanie i wyświetlenie menu w index.html
8.
Rozwiązanie 1 ● git
add . ● git commit -m '(commit message)' ● git checkout done-1
9.
$routeProvider ● git checkout
slide-4
10.
ng-repeat <ul> <li ng-repeat="project in
projects"> <a href=""></a>: </li> </ul>
11.
Zadanie 2 ● git
checkout todo-2 ● zbudować menu zawierające linki do wszystkich ścieżek var object = {}; var array = []; var arrayOfObjects = [ { lorem: 1, ipsum: 2 },{ test: 4 } ]
12.
Rozwiązanie 2 ● git
add . ● git commit -m '(commit message)' ● git checkout done-2
13.
Zadanie 3 ● git
checkout todo-3 ● zbudować własną podstronę, z wyświetlaniem listy danych podanych w kontrolerze
14.
Rozwiązanie 3 ● git
add . ● git commit -m '(commit message)' ● git checkout done-3
15.
OrderBy ● git checkout
slide-5 <ul> <li ng-repeat="product in products | orderBy:'price'"> </ul>
16.
Zadanie 4 ● git
checkout todo-4 ● wymień hardkodowany parametr na pochodzący ze zmiennej ustawianej w formularzu
17.
Rozwiązanie 4 ● git
add . ● git commit -m '(commit message)' ● git checkout done-4
18.
filter ● git checkout
slide-6 ● składnia filter: {experesion} <tr ng-repeat="person in list | orderBy:orderKey | filter:'oo'">
19.
filter - argumenty ●
'Lorem ipsum' ● {key: 'value'} ● {$: 'value'}
20.
Zadanie 5 ● git
checkout todo-5 ● zmienić filter na wyszukiwarkę z 3 polami: szukanie po firstName, lastName lub wszędzie
21.
Rozwiązanie 5 ● git
add . ● git commit -m '(commit message)' ● git checkout done-5
22.
Funkcje w modelu <p>{{displayValueReturnedByFunction()}}</p> <input
ng-change="fireFunctionWhenChangeHappen()">
23.
Validowanie formularza ● git
checkout slide-8
24.
Zadanie 6 ● git
checkout todo-6 ● newPerson form ● ng-click ○ nazwaListy.push(nowyElement) ○ podstawić {}
25.
Rozwiązanie 6 ● git
add . ● git commit -m '(commit message)' ● git checkout done-6
26.
Trzymanie danych w
controlerze ● git checkout slide-9 ● #/main
27.
Services ● git checkout
slide-10 ● #/main
28.
Zadanie 7 ● git
checkout todo-7 ● dodanie własnego serwisu, People do użytku przez ListCtrl
29.
Rozwiązanie 7 ● git
add . ● git commit -m '(commit message)' ● git checkout done-7
30.
Json - obiekt { "about":
"I'm an object", "structure": { "key": "value" }, "arrays": [ "I", "can", "keep", "them", "too" ] }
31.
Json - tablica [ { "objectId":
1 }, { "objectId": 2 } ]
32.
Rest ● http://example.com/products ● http://example.com/products/1
33.
$resource ● query() ● get() var
userResource = $resource('/user/:userId', {}); userResource.get({userId: 1});
34.
Dane do json ●
git checkout slide-11
35.
Podsumowanie
36.
Materiały ● http://docs.angularjs.org/tutorial/ ● http://egghead.io/
37.
Co dalej? ● webstorage
etc. ● backend ● dev env ● unit tests
38.
Stay tuned ● http://akai.org.pl/ ●
http://poznan.gtug.pl/ ● http://www.meetup.com/Hacking-Poznan/
Download