INTRODUKTION TILL ANGULAR JS

Relevanta dokument
<script src= "

Webbutveckling med AngularJS

Appar med ryggrad. Introduktion till JavaScriptramverket Backbone

ASP.NET Web Forms. Copyright Mahmud Al Hakim Vad är Web Forms?

JavaScript. DOM Scripting

Hybridappar. Utveckla mobilappar i HTML, Javascript och CSS

JAVASCRIPT. Beteende

Labora&on 7 Syfte med laborationen:

ASP.NET MVC. Copyright Mahmud Al Hakim Innehåll

Modern webbutveckling. av Robert Welin-Berger

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

MVC med Javascript och Ajax. Filip Ekberg

Ajax TruClient. Erfarenheter, tips och trix från Swedbank IT. Christian Gerdes Performance Engineer, LIGHTS IN LINE AB

Räkna med ASP.NET MVC 3

Fortsättningskurs Webbklientprogrammering

Labora&on 1 Variabler och beräkningar övningar/uppgi9er

JS & beteende. TNMK30 - Elektronisk publicering

Exemple på Tentauppgifter Webbprogrammering

Objektbaserad programmering

Övningar i JavaScript del 4

E13 "Behind the Wild"

Prototyping och utveckling med AngularJS

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

Föreläsning 4 Serverskript PHP Validering av data med serverskript Formulär

Att bygga enkel webbapplikation i Docker

Karlstads Universitet, Datavetenskap 1

Introducerande övningar i HTML

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

Introduktion till PHP

Användarhandledning Version 1.2

Objektorienterad programmering Föreläsning 2

E02 "The Review" Föreläsning 2, HT2013 Grunderna, repetition. Johan Leitet. Kurs: 1dv403 Webbteknik I

! HTML Formulär! JavaScript! Syntax! Events! DOM. ! URL variabler i en query string (get) ! HTTP post request (post)

Laboration 1 Introduktion till Visual Basic 6.0

Kursplanering Utveckling av webbapplikationer

Android översikt. TDDD80 Mobila och sociala applikationer

jquery Grundkurs 1 Copyright Mahmud Al Hakim

Programutveckling med Java Development Kit. (JDK 1.1.x) och Programmers File Editor (PFE 7.02)

JAVAUTVECKLING LEKTION 8

Arbetsuppgift 1: På virtuell maskin med Ubuntuserver, skapa katalog och skapa Dockerfile. Skapa ny katalog i din hemmakatalog, med namnet webbserver.

TDP013 Node.js, JSCoverage, Mocha. Marcus Bendtsen Institutionen för Datavetenskap

Räkna med ASP.NET Web Forms

Guide Ett FitNesse-test

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.

Webbsidor och webbservrar

Du skall naturligtvis visa körexempel med output där det behövs i din rapport!

Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 4. Peter Dalenius Institutionen för datavetenskap

ASP.NET Thomas Mejtoft

Introduktion till programmering

Programmering I Tobias Wrigstad fredag, 2009 augusti 28

Python. Vi har ofta behov av att behandla datastrukturer på ett enhetligt sätt så att vi kan göra samma sak i flera olika program.

E11 "Protection" Föreläsning 11, HT2014 Säkerhet, tillgänglighet. Johan Leitet. Kurs: 1dv403 Webbteknik I

Objekt-orienterad programmering och design. DIT953 Niklas Broberg, 2018

E13 Behind the Wild. Dagens agenda. Cookies Context/ändra context Augmentation (förstärkning) Klassiskt arv Att låna metoder Namespaces Postludium

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

JavaScript in SharePoint and not just for Apps. Wictor Wilén

En snabb titt på XML LEKTION 6

TDP013. Node.js, Mocha, Istanbul. Anders Fröberg Institutionen för Datavetenskap

Övningar i JavaScript del 5

En grundkurs i hemsidor och hur de är uppbyggda

Lektion 2, Grundläggande funktioner i ASP.NET

Introduk+on +ll programmering i JavaScript

Testautomatisering. HTML, Dev Tools, Watir

Arbeta med databas. Översikt. Lektion 1: Arbeta med Entity Data Models. Arbeta med Entity Data Models. LINQ (Language Integrated Query).

E12 "Evil is going on"

Lektion 3 HTML, CSS och JavaScript

Att förstå hur man konstruerar modulära program Att kunna skapa nya funktioner Att förstå hur data skickas mellan funktioner

Övning MS SQL och MVC del 2

JavaScript. En Introduktion

Läsöversikt. Föreläsningar 2-6. Genomförande av laborationer

E07 "Greased Lightning"

Python. Python är, som Scheme, ett interpreterat språk men det finns kompilatorer för Python.

ASP.NET Web Pages. Copyright Mahmud Al Hakim Först lite Classic ASP :-)

Python. Python är, som Scheme, ett interpreterat språk men det finns kompilatorer för Python.

Laboration 6 Formulär och stränghantering övningar/uppgifter

Mobila applikationer och trådlösa nät

Konstruktion av datorspråk

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

Styrsystem. Quantum, M340 o Momentum. Kom-igång med konvertera Concept till Unity Rev

<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

Guide: Programmera Ryze Tello

En bortsprungen katt

Innehåll. JavaScript - Grundkurs. Vad är JavaScript? Vad är JavaScript? Vad behövs? Lite historia

Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er

Materialspecifikationer

Självständigt arbete på grundnivå

Att bygga enkla webbsidor

WEBBUTVECKLING Kursplanering

Labora&on 2 HTML och validering övningar/uppgi:er

Objekt-orienterad Programmering och Design. TDA551 Alex Gerdes, HT-2016

Användarbeskrivning för Anvisningstjänsten

Installationsanvisningar VisiWeb. Ansvarig: Visi Closetalk AB Version: 2.3 Datum: Mottagare: Visi Web kund

Övningar i JavaScript del 2

JavaScript En Introduktion

Redigera din personliga sida

Nätet. Uppgiften. Nivå

WinStudio - Uppstart. Drifttagning av operato rspanel med IndraWorks och WinStudio. IndraWorks 14. Version

Instruktioner för analys- appen

HTML. Introduktion till HyperText Markup Language

Transkript:

INTRODUKTION TILL ANGULAR JS DEL 1 Mahmud Al Hakim www.alhakim.se mahmud@alhakim.se

VAD ÄR ANGULAR? Angular är ett JavaScript ramverk. Angular används för utveckling av frontendwebbapplikationer. Angular används främst för att utveckla Single Page Applications s.k. SPA Angular är Open-Source och utvecklas av Google.

https://www.madewithangular.com

Bildkälla: http://angularjstutorials.net/angularjs_mvc.html

PLUNKER HTTPS://PLNKR.CO/EDIT

ANGULAR DIRECTIVES Angular lägger till nya attribut på HTML-element genom olika direktiv. Det finns ett antal inbyggda direktiv i Angular. Vi kan även skapa våra egna direktiv. Exempel: ng-app Initierar en Angular applikation. ng-model Definierar den modell vi vill binda till ett HTML-element. ng-init Initierar en variabel eller ett objekt.

HELLO ANGULAR

HELLO MAHMUD!

LADDA NER ANGULAR FRÅN HTTPS://ANGULARJS.ORG

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angular - Grundmall</title> <script src="angular.min.js"></script> </head> <body ng-app> <div> <p>namn : <input type="text" ng-model="name"></p> <h1>hej {{name}}</h1> </div> </body> </html>

ANGULAR EXPRESSIONS <body ng-app> <div ng-init="mycolor='#fff'"> <input style="background-color:{{mycolor}}" ng-model="mycolor" value="{{mycolor}}"> </div> </body>

ANGULAR EXPRESSIONS EXEMPEL 2 <body ng-app> <div ng-init="moms=0.25"> <p>pris exkl. moms:100</p> <p>pris inkl. moms: {{ 100 * (1 + moms) }}</p> </div> </body>

ANGULAR EXPRESSIONS EXEMPEL 3 <div ng-init="person={firstname:'john',lastname:'doe'}"> <h1>{{person.firstname}}</h1> <h2 ng-bind="person.lastname"></h2> <p>obs! ng-bind binder data till ett element. ng-bind används istället för dubbla klamrar. </p> </div>

ANGULAR MODULES En Angular-modul är en behållare (container) för de olika delarna i en applikation. Vi kan definiera kontroller (controllers) och tjänster (services) i en Angular-modul. En Angular-modul skapas med funktionen angular.module <script> var app = angular.module("myapp", []); </script>

ANGULAR CONTROLLERS Angular applikationer kontrolleras med hjälp av Controllers. En Controller är ansvarig för att vara logiken mellan View (DOM) och Modell. En Controller måste skapas inuti en modul. <script> var app = angular.module("myapp", []); app.controller("myctrl", function($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; }); </script>

ANGULAR CONTROLLERS EXEMPEL 1 <body ng-app="myapp"> <script> var app = angular.module("myapp", []); app.controller("myctrl", function() { this.firstname = "John"; this.lastname = "Doe"; }); </script> <h1 ng-controller="myctrl as c"> {{ c.firstname + " " + c.lastname }} </h1>

ANGULAR CONTROLLERS $SCOPE <script> var app = angular.module("myapp", []); app.controller("myctrl", function ($scope) { }); </script> $scope.firstname = "John"; $scope.lastname = "Doe"; <h1 ng-controller="myctrl"> </h1> {{ firstname + " " + lastname }} Scope is the glue between application controller and the view * * https://docs.angularjs.org/guide/scope

Bildkälla: http://devgirl.org/2013/03/21/fun-with-angularjs/

ANGULAR CONTROLLERS EXEMPEL 2 <div ng-controller="personctrl"> </div> First Name: <input type="text" ng-model="firstname"><br> Last Name: <input type="text" ng-model="lastname"> <br> Full Name: {{ fullname() }} <script> var app = angular.module('myapp', []); </script> app.controller('personctrl', function($scope) { }); $scope.firstname = ""; $scope.lastname =""; $scope.fullname = function() { }; return $scope.firstname + " " + $scope.lastname; Flytta till en extern fil

SKAPA EN NY DIREKTIV EXEMPEL 1 <script> app.directive("nydirektiv", function () { return { template: "Jag har skapats med en direktiv!" }; }); </script> <body ng-app="myapp"> <h1 ny-direktiv></h1>

SKAPA EN NY DIREKTIV EXEMPEL 2 <script> app.directive("nydirektiv", function () { return { template: "<h1>jag har skapats med en direktiv!</h1>" }; }); </script> <body ng-app="myapp"> <ny-direktiv></ny-direktiv>

SKAPA EN NY DIREKTIV EXEMPEL 3 <script> app.directive("nydirektiv", function () { }); return { }; </script> restrict: "M", replace: true, template: "<h1>jag har skapats med en ny direktiv!</h1>" <body ng-app="myapp"> <!-- directive: ny-direktiv --> restrict: E Element name A Attribute C Class M Comment Default value EA

SKAPA EN NY DIREKTIV EXEMPEL 4 <script> app.directive("sidfot", function () { return { templateurl: "sidfot.html" }; }); </script> <body ng-app="myapp"> <sidfot></sidfot> </body>

LITE-SERVER HTTPS://WWW.NPMJS.COM/PACKAGE/LITE-SERVER

INSTALLERA LITE-SERVER 1. Installera NodeJS 2. Skapa en ny inställningsfil (package.json) { } "scripts": { } "dev": "lite-server" 3. Kär detta kommando i CMD (OBS! Inne i projektmappen) npm install lite-server --save-dev 4. Kör servern med detta kommando npm run dev

TIPS! TESTA LIVE-SERVER

HANTERA FÄLT (ARRAY) MED NG-REPEAT <div ng-init="months=['jan','feb','mar']"> </div> <div ng-repeat="x in months"> </div> {{ x }}

ÖVNINGAR 1. Skapa en kontroller som har en lista (array) över ett antal objekt. Objekten innehåller egenskaperna namn och land 2. Visa namn och land i en HTML-Lista (UL) 3. Visa namn och land i en HTML-tabell

ANGULAR FILTERS Angular har filter som möjliggör formatering av data. Använd pipe-tecknet (vertikalstreck ) för att skicka data till ett filter. <div ng-app="myapp" ng-controller="personctrl"> <p>the name is {{ lastname uppercase }}</p> </div> <script> angular.module('myapp', []).controller('personctrl', function($scope) { $scope.firstname = "John", $scope.lastname = "Doe" }); </script>

ANGULAR FILTERS EXEMPEL 2 <div ng-app="myapp" ng-controller="namesctrl"> </div> <script> <ul><li ng-repeat="x in names filter : 'M'"> </li></ul> {{ x }} angular.module('myapp', []).controller('namesctrl', function($scope) { }); $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', </script> 'Gustav', 'Birgit', 'Mary', 'Kai' ]; Sök efter namn som innehåller M

ANGULAR FILTERS ÖVNINGAR 1. Skapa en kontroller som har en enkel lista (array) över några namn. 2. Visa namnen i en HTML-lista (UL) (eller tabell) 3. Skapa ett textfält ovanför listan 4. Binda textfältet till listan. Filter via input Man ska kunna filtrera listan genom att skriva en eller flera bokstäver i textfältet.

ANGULAR FILTERS EXEMPEL 3 <div ng-app="myapp" ng-controller="namesctrl"> <ul><li ng-repeat="x in names orderby:'country'"> </li></ul> </div> <script> {{ x.name + ', ' + x.country }} angular.module('myapp', []).controller('namesctrl', function($scope) { }); $scope.names = [ {name:'jani',country:'norway'}, </script> {name:'carl',country:'sweden'}, {name:'margareth',country:'england'} ]; Sortera efter länder

ANGULAR EVENTS NG-CLICK <div ng-app="myapp" ng-controller="myctrl"> <button ng-click="count = count + 1">Klicka här!</button> <p>{{ count }}</p> </div> <script> var app = angular.module('myapp', []); app.controller('myctrl', function($scope) { $scope.count = 0; }); </script>

ANGULAR EVENTS NG-SHOW <div ng-app="myapp" ng-controller="myctrl"> <button ng-click="myfunc()">visa/dölj</button> </div> <script> <div ng-show="showme"><h1>mer info...</h1></div> var app = angular.module('myapp', []); app.controller('myctrl', function($scope) { }); $scope.showme = false; $scope.myfunc = function() { } </script> $scope.showme =!$scope.showme;

ÖVNINGAR 1. Skapa en kontroller som har en enkel lista över ett antal produkter 2. Produkterna har egenskaperna: ID, Namn, Pris 3. Visa listan i en HTML-Tabell 4. Lägg till en rad med rubrikerna ID, Namn och Pris (se bilden) 5. Man ska kunna sortera listan genom att klicka på kolumnrubrikerna.

LÄS HTTP://WWW.W3SCHOOLS.COM/ANGULAR