SlideShare a Scribd company logo
AngularJs
Warsztaty - 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żek
var 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/

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