Back home

AngularJs: Warsztaty - stopień 1

Start

AngularJs "Hello world"

ng-include

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

Kontroler

$scope

ng-controller

<br>
<div ng-controller="InputCtrl">
  <input ng-model="sharedData.value" />
  <p></p>
</div>
workshop.controller("HelloCtrl", function($scope) {
  $scope.helloMessage = "Hello world";
});

Zadanie 1

Rozwiązanie 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

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

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

<li ng-repeat="link in links">
  <a ng-href=""></a>
</li>
$scope.links = [
  {
    url: '#/main',
    text: 'Main'
  }]

Zadanie 3

Rozwiązanie 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

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

Zadanie 4

Rozwiązanie 4

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

filter

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

filter - argumenty

{expresion} zwraca:

Zadanie 5

Rozwiązanie 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

  $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

<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

Rozwiązanie 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

$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

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

Zadanie 7

Rozwiązanie 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

$resource

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

Dane do json

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

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