angularjs del 2 - dynamicos · angular services en angular-service är en funktion eller objekt som...
TRANSCRIPT
![Page 1: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/1.jpg)
INTRODUKTION TILL ANGULAR JSDEL 2
© Mahmud Al Hakim
www.alhakim.se
![Page 2: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/2.jpg)
ROOT SCOPE
![Page 3: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/3.jpg)
$ROOTSCOPE VS $SCOPE
![Page 4: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/4.jpg)
FORMULÄRVALIDERING – INTRODUKTION
<form ng-app name="myForm">
<input name="name" ng-model="name" required >
</form>
<h1> $valid: {{myForm.name.$valid}}</h1>
<h1> $invalid: {{myForm.name.$invalid}}</h1>
<h1> $error: {{myForm.name.$error}}</h1>
<h1> $pristine:{{myForm.name.$pristine}}</h1>
<h1> $dirty: {{myForm.name.$dirty}}</h1>
https://docs.angularjs.org/api/ng/type/form.FormController
![Page 5: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/5.jpg)
FORMULÄRVALIDERING – EXEMPEL 2<form ng-app name="myForm">
Email:<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
![Page 6: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/6.jpg)
FORMULÄRVALIDERING OCH CSS<style>
input.ng-invalid-email {background-color: #fbae8d; }
input.ng-valid-email {background-color: #d7edd7; }
input.ng-empty {background-color: #f1f1b7; }
</style>
</head>
<body>
<form ng-app name="myForm">
Email: <input type="email" name="myAddress" ng-model="text" required >
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form> Tips https://docs.angularjs.org/api/ng/directive/form
http://www.w3schools.com/angular/angular_validation.asp
![Page 7: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/7.jpg)
ANGULAR SERVICES
En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer.
Angular har flera inbyggda tjänster t.ex.
$location
$interval
$http
Hela listan finns här
https://docs.angularjs.org/api/ng/service
![Page 8: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/8.jpg)
ANGULAR SERVICES – $LOCATION
<div ng-app="myApp" ng-controller="myCtrl">
<h3>{{myUrl}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
Läs mer: https//docs.angularjs.org/api/ng/service/$location
![Page 9: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/9.jpg)
ANGULAR SERVICES – $INTERVAL
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{theTime}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();}, 1000);
});
</script>
![Page 10: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/10.jpg)
ANGULAR SERVICES – $HTTP (LÄS FRÅN EN JSON-FIL)<div ng-app="myApp" ng-controller="customersCtrl">
<ul><li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li></ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.json").then(function (response) {
$scope.myData = response.data.customers;
});
});
</script>
{
"customers": [
{
"Name": "Mahmud Al Hakim",
"City": "Stockholm",
"Country": "Sweden"
},
{
"Name": "Kalle Anka",
"City": "Disney",
"Country": "USA"
}
]
}
OBS! Funkar inte i
Chrome om du kör lokalt
![Page 11: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/11.jpg)
VISA EN DROPDOWN-LISTA
![Page 12: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/12.jpg)
SKAPA DROPDOWN MED NG-OPTIONSOBS! VIKTIGT OM DU VILL ARBETA MED OBJEKT
Tips! Vill du inte visa en tom rad högst upp i listan?
Lägg till denna sats i din kontroller
$scope.selectedCustomer = $scope.myData[0];
![Page 14: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/14.jpg)
HTTP://OPENWEATHERMAP.ORG/API
1. Skaffa ett konto och skapa en egen API-Keyhttps://home.openweathermap.org/api_keys
2. Skapa en API-Callhttp://openweathermap.org/current
Exempel
http://api.openweathermap.org/data/2.5/forecast/city?q=Stockholm,SE&APPID=xxxxxxxxxxxxxx
![Page 15: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/15.jpg)
HÄMTA TEMPERATUR VIA OPENWEATHERMAP.ORG
![Page 16: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/16.jpg)
SKAPA EN MYSQL-DATABAS VIA HOSTINGER
![Page 17: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/17.jpg)
ARBETA MED DATABASEN VIA PHPMYADMIN
![Page 18: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/18.jpg)
SKAPA EN TABELL
![Page 19: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/19.jpg)
LÄGG TILL DATA
![Page 20: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/20.jpg)
SKAPA PHP-SKRIPT SOM HÄMTAR DATA FRÅN DATABASEN OCH SKAPAR EN JSON-LISTA
<?php
$conn = new mysqli("localhost", "Användare", "lösenord", "Databas");
$result = $conn->query("SELECT * FROM produkter");
while($row = mysqli_fetch_assoc($result))
$rows[] = $row;
echo json_encode($rows);
$conn->close();
?>
Tips
http://php.net/manual/en/mysqli-result.fetch-assoc.php
http://www.kodingmadesimple.com/2015/01/convert-mysql-to-json-using-php.html?m=1
![Page 21: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/21.jpg)
VISA DATA MED ANGULAR
![Page 22: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/22.jpg)
ÖVNINGSKAPA EN ENKEL INKÖPSLISTA
![Page 23: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/23.jpg)
LÖSNINGSFÖRSLAG FINNS HÄR
VG-Övning
Spara dina listor i en databas
http://www.w3schools.com/angular/angular_application.asp
![Page 24: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/24.jpg)
TIPS! BRA TUTORIAL I PDF-FORMATHTTP://WWW.TUTORIALSPOINT.COM/ANGULARJS/ANGULARJS_TUTORIAL.PDF
![Page 25: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/25.jpg)
TIPS! BRA VIDEO ATT TITTA PÅLEARN AND UNDERSTAND ANGULARJSTONY ALICEA https://goo.gl/qZMQGn
![Page 26: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/26.jpg)
TIPS! VILL DU LÄSA MER?NG-BOOK – THE COMPLETE BOOK ON ANGULARJS
Ladda ner boken här! https://goo.gl/8U9tLr
https://www.ng-book.com/
![Page 27: AngularJS del 2 - DynamicOS · ANGULAR SERVICES En Angular-service är en funktion eller objekt som vi kan använda i våra applikationer. Angular har flera inbyggda tjänster t.ex](https://reader033.vdocuments.mx/reader033/viewer/2022043017/5f39b01d2f99176354514f01/html5/thumbnails/27.jpg)
TIPS! GRATIS KURS FRÅN HTTP://CODESCHOOL.COM
https://www.codeschool.com/courses/shaping-up-with-angular-js
Rekommenderas
varmt