Back home

AngularJs: Warsztaty - stopień 1

Start

AngularJs "Hello world"

ng-include

Kontroler

$scope

ng-controller

Zadanie 1

Rozwiązanie 1

$routeProvider

ng-repeat

<ul>
  <li ng-repeat="project in projects">
    <a href=""></a>: 
  </li>
</ul>

Zadanie 2

var object = {};
var array = [];

var arrayOfObjects = [
  {
    lorem: 1,
    ipsum: 2
  },
  {
    test: 4
  }
]

Rozwiązanie 2

Zadanie 3

Rozwiązanie 3

OrderBy

<ul>
  <li ng-repeat="product in products | orderBy:'price'">
</ul>

Zadanie 4

Rozwiązanie 4

filter

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

filter - argumenty

{expresion} zwraca:

Zadanie 5

Rozwiązanie 5

Funkcje w modelu

<p>{ {displayValueReturnedByFunction()} }</p>

<input ng-change="fireFunctionWhenChangeHappen()">

Validowanie formularza

Zadanie 6

Rozwiązanie 6

Trzymanie danych w controlerze

Services

Zadanie 7

Rozwiązanie 7

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

$resource

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

Dane do json

Podsumowanie

Materiały do nauki

Co dalej?

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

Stay tuned