AngularJs: Warsztaty - stopień 1

Start

treść slajdów: http://bit.ly/angular-workshop-1
git clone https://github.com/marcin-wosinek/workshop-1.git
chrome:
linux: chromium-browser –disable-web-security
windows - skopiować link do chroma i edytować: “(originalny link) –disable-web-security”
git config --global alias.tree "log --oneline --graph --decorate --all"

AngularJs “Hello world”

git checkout slide-1
dwustronne bindowanie
działający, nie trywialny kod oparty o sam widok
pliki: index.html +8 ```html

Hello !

## ng-include
* git checkout slide-2
* dynamiczne wczytywanie części widoku
* pliki: views/main.html & index.html +7
```html
<!-- index.html -->
<div ng-include src="'views/main.html'">
</div>

<!-- views/main.html -->
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello !</h1>

Kontroler

wiąże ‘swój’ widok z resztą aplikacji
zawiera prostą logikę, związaną z samym wyświetlaniem

$scope

obiekt wiążący kontroler z widokiem
$scope.title będzie dostępny jako w widoku
ng-model - wiąże elementy formularza z modelem
ng-repeat - pozwala iterować po tablicach zdefiniowanych na $scope

ng-controller

git checkout slide-3
podpięcie kontrolera do części widoku
$scope działa tylko wewnątrz tagu, na którym jest kontroler
pliki: views/hello.html & script/script.js

<br>
<div ng-controller="InputCtrl">
  <input ng-model="sharedData.value" />
  <p></p>
</div>

workshop.controller("HelloCtrl", function($scope) {
  $scope.helloMessage = "Hello world";
});

Zadanie 1

git checkout todo-1
dodanie kontrolera zawierającego menu
dodanie i wyświetlenie menu w index.html
implementacja: index.html & script/script.js

Rozwiązanie 1

git add .
git commit -m '(commit message)'
git checkout done-1

<div ng-controller="MenuCtrl">
  <a ng-href=""></a>
</div>

workshop.controller("MenuCtrl", function($scope) {
  $scope.href = "http://google.pl";
  $scope.text = "go to google";
});

$routeProvider

git checkout slide-4
definiuję ścieżki w aplikacji
pliki: scripts/script.js

$routeProvider
  .when("/hello", {
    templateUrl: "views/hello.html",
    controller: "HelloCtrl"
  })
  .otherwise({
    redirectTo: '/main'
  });

ng-repeat

directive pętla

<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
implementacja: index.html & script/script.js

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

<li ng-repeat="link in links">
  <a ng-href=""></a>
</li>

$scope.links = [
  {
    url: '#/main',
    text: 'Main'
  }]

Zadanie 3

git checkout todo-3
zbudować własną podstronę, z wyświetlaniem listy danych podanych w kontrolerze
implementacja: script/script.js & nowy plik widoku

Rozwiązanie 3

git add .
git commit -m '(commit message)'
git checkout done-3

workshop.controller("ListCtrl", function($scope) {
  // checkout http://www.json-generator.com/
  $scope.list = [
    {
      "firstName": "Serenity",
      "lastName": "Oldridge",
      "picture": "http://placehold.it/70x70/632955",

<table>
  <tr><th>Picture</th><th>Firstname</th><th>Lastname</th><th>Age</th><th>Gender</th><tr>
  <tr ng-repeat="person in list">
  <td><img ng-src=''></td>

OrderBy

git checkout slide-5
pliki: views/list.html

<tr ng-repeat="person in list | orderBy:'lastName'">
  <td><img ng-src=''></td>

Zadanie 4

git checkout todo-4
wymień hardkodowany parametr na pochodzący ze zmiennej
użyj ng-model + kilka input type=”radio”
implementacja: views/list.html +4, script.js +28

Rozwiązanie 4

git add .
git commit -m '(commit message)'
git checkout done-4

First name: <input ng-model="orderKey" type='radio' value='firstName'/><br/>
Last name: <input ng-model="orderKey" type='radio' value='lastName'/><br/>

filter

git checkout slide-6
składnia filter: {experesion}
pliki: views/list.html +7

<tr ng-repeat="person in list | orderBy:orderKey | filter:'oo'"

filter - argumenty

{expresion} zwraca:

string ‘Lorem ipsum’ - szukamy stringu w całych obiektach na liście
obiekt {key: ‘value’} - szukamy obiektów, które pod key mają wartość pasującą do value
obiekt {$: ‘value’} - szukamy obiektów, które gdziekolwiek mają wartość pasującą do value

Zadanie 5

git checkout todo-5
zmienić filter na wyszukiwarkę z 3 polami: szukanie po firstName, lastName lub wszędzie
implementacja: views/list.html +5

Rozwiązanie 5

git add .
git commit -m '(commit message)'
git checkout done-5

Everywhere: <input ng-model="search.$" type='text'/><br/>
First name: <input ng-model="search.firstName" type='text'/><br/>
Last name: <input ng-model="search.lastName" type='text'/><br/>

Funkcje w modelu

git checkout slide-7
pliki: views/main.html +7 & script/script.js + 37

  $scope.name = function () {
    return $scope.firstName + " " + $scope.lastName;
  }

  $scope.counter = 0;
  $scope.valueUpdated = function () {
    $scope.counter++;
  };

<h1>Hello !</h1>
<input type="text" ng-change="valueUpdated()" ng-model="value" placeholder="Edit me">

Validowanie formularza

git checkout slide-8
pliki: views/main.html +10

<form name="exampleForm">
  Required field: <input ng-model="required" required/><br>
  Email field: <input ng-model="email" type="email" required/><br>
  <button ng-disabled='!exampleForm.$valid'>Submit</button>
</form>

Zadanie 6

git checkout todo-6
dodać formularz z danym osoby - obiekt newPerson
skorzystać z ng-click do obsługi klikniecia przycisku
- dodać do listy newPerson ( nazwaListy.push(nowyElement) )
- podstawić pusty obiekt za ten podstawiony
implementacja: script/script.js +46 & views/list.html +10

Rozwiązanie 6

git add .
git commit -m '(commit message)'
git checkout done-6

<form>
  Picture: <input ng-model="newPerson.picture" type='text' placeholder="http://"/><br/>
  First name: <input ng-model="newPerson.firstName" type='text'/><br/>
  Last name: <input ng-model="newPerson.lastName" type='text'/><br/>

$scope.add = function () {
  $scope.list.push($scope.newPerson);
  $scope.newPerson = {};
}

Trzymanie danych w kontrolerze

git checkout slide-9
strata danych przy przejściu na inną podstronę
użycie tego samego controlera 2 razy - jak na #/main
pliki: script/script.js +29 & views/main.html +1

$scope.firstName = 'Jan';
$scope.lastName = 'Kowalski';

<input type="text" ng-model="firstName" placeholder="Enter a first name here">
<input type="text" ng-model="lastName" placeholder="Enter a last name here">

Services

git checkout slide-10
nowy serwis - dla kontrolera co 2 razy występuje
stan jest globalny dla aplikacji
pliki: script/script.js +62 & views/hello.html +4 & views/main.html +7

// Create serices
workshop.factory("SharedData", function(){
  return {
    value: "Example value"
  };
});

Zadanie 7

git checkout todo-7
dodanie własnego serwisu, People do użytku przez ListCtrl
implementacja: script/script.js +42

Rozwiązanie 7

git add .
git commit -m '(commit message)'
git checkout done-7

workshop.factory("People", function() {
  return [ {"firstName": "Serenity" /*...*/}];

workshop.controller("ListCtrl", function($scope, People) {
  $scope.list = People;

Json - obiekty

{
  "about": "I'm an object",
  "structure": {
    "key": "value"
  },
  "arrays": [ "I", "can", "keep", "them", "too" ]
}

Json - tablice

[
  {
    "objectId": 1
  },
  {
    "objectId": 2
  },
  {
    "objectId": 3
  }
]

Rest

dane dostępne pod url
ładne url:
http://example.com/products - lista produktów
http://example.com/products/1 - pierwszy produkt
na ogół dane w json

$resource

query - pobieranie tablicy
get - pobieranie obiektu
parametry

var userResource = $resource('/user/:userId', {});
userResource.get({userId: 1});

Dane do json

git checkout slide-11
pliki:
nowa zależność: index.html & script/angular/angular-resource.js
dane: data/people
pobieranie: script/script.js +42

workshop.factory("People", function($resource){
  var peopleResource = $resource('data/people', {});
  return peopleResource.query();
});

Podsumowanie

kontroler?
widok?
router?
service?

Materiały do nauki

Co dalej?

Pierwsze warsztaty będą wprowadzeniem do świata frontendowych aplikacji. Następne spotkania będą poruszać takie tematy, jak:

pisanie własnych filtrów i directives
korzystanie z animacji
ciasteczka
unit testy
angular-ui & angular bootstrap

AngularJs: Warsztaty - stopień 1

Start

AngularJs “Hello world”

Hello !

Kontroler

$scope

ng-controller

Zadanie 1

Rozwiązanie 1

$routeProvider

ng-repeat

Zadanie 2

Rozwiązanie 2

Zadanie 3

Rozwiązanie 3

OrderBy

Zadanie 4

Rozwiązanie 4

filter

filter - argumenty

Zadanie 5

Rozwiązanie 5

Funkcje w modelu

Validowanie formularza

Zadanie 6

Rozwiązanie 6

Trzymanie danych w kontrolerze

Services

Zadanie 7

Rozwiązanie 7

Json - obiekty

Json - tablice

Rest

$resource

Dane do json

Podsumowanie

Materiały do nauki

Co dalej?

Stay tuned