AngularJS

46 %
54 %
Information about AngularJS
Technology

Published on February 20, 2014

Author: ream88

Source: slideshare.net

Description

Slides from my AngularJS talk at stahlstadt.js

http://www.meetup.com/stahlstadt-js/events/159159282/

Mario Uher @ream88 / haihappen

@beenetwork • Seit 2008 • Rails • Node.js • iOS

WORKFLOW • möglichst viel am Server machen • JavaScript wenn notwendig • 5 surprisingly painful things about client-side JS

Dependencies Direc Services Constants Scopes Data binding TestingDI endencies $scope Data binding DIData Data bindingConstantsbinding $scope Karma Constants DI $scope Constants Data bin Dependencies ependencies $scope Dependencies DI Testing Karma Dependencies Dependencies Providers Dependencies Dependencies Dependencies Module Karma Directives Services Filters $rootScope Factories $rootScope Directives Services Directives Depend Directives Factories tives Directives Directives $scope Routers Directives Dependenc DI Filters Data binding Expressions Directives Testing Factories Express

???

DIRECTIVES (MVC)

HTML

ML = MARKUP LANGUAGE

MARKUP LANGUAGE ! • HTML 2.0

MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver

MARKUP LANGUAGE ! • HTML 2.0 • FrontPage / Dreamweaver • HTML5

MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap

MARKUP LANGUAGE ! • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap • Web Components

MARKUP LANGUAGE ? • HTML 2.0 • FrontPage / Dreamweaver • HTML5 • Twitter Bootstrap • Web Components

DIRECTIVES (MVC)

ALERT <div class="alert" ng-hide="hidden"> I'm sorry Mario, I'm afraid you can't do that. ! <a href="#" ng-click="hidden = true">&times;</a> </div>

ALERT <div class="alert" ng-hide="hidden"> I'm sorry Mario, I'm afraid you can't do that. ! <a href="#" ng-click="hidden = true">&times;</a> </div>

ALERT <div class="alert" ng-hide="hidden"> I'm sorry Mario, I'm afraid you can't do that. ! <a href="#" ng-click="hidden = true">&times;</a> </div>

ALERT

GRAPH <graph> <axis position="left"></axis> <axis position="bottom"></axis> <line name="typical-week" data="visitors.typicalWeek"></line> <line name="this-week" data="visitors.thisWeek"></line> <line name="last-week" data="visitors.lastWeek"></line> </graph> How Angular Lets Us Iterate Like Crazy

GRAPH <graph> <axis position="left"></axis> <axis position="bottom"></axis> <line name="typical-week" data="visitors.typicalWeek"></line> <line name="this-week" data="visitors.thisWeek"></line> <line name="last-week" data="visitors.lastWeek"></line> </graph> How Angular Lets Us Iterate Like Crazy

WYSIWYG <textarea name="content" wysiwyg> </textarea>

WYSIWYG <textarea name="content" wysiwyg> </textarea>

CONTROLLERS (MVC)

CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>

CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>

CONTROLLER function UserController($scope) { $scope.name = 'Mario'; } ! <div ng-controller="UserController"> My name is {{name}} </div>

CONTROLLER function UserController($scope) { $scope.users = [{ name: 'Mario' }]; } ! <table ng-controller="UserController"> <tr ng-repeat="user in users"> <td>{{user.name}}</td> </tr> </table>

CONTROLLER function UserController($scope) { $scope.users = [{ name: 'Mario' }]; } ! <table ng-controller="UserController"> <tr ng-repeat="user in users"> <td>{{user.name}}</td> </tr> </table>

SERVICES (MVC)

SERVICES • Plain JavaScript Objects • Binden Ressourcen wie Webdienste und Datenbanken ein • Enthalten Geschäftslogik

SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });

SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });

SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });

SERVICES var User = $resource('/user/:userId', { userId:'@id' }); var user = User.get({ userId:1 }, function() { user.name = 'Mario'; user.$save(); });

SERVICES angular.module('App', ['ngResource']).factory('User', function($resource) { return $resource('/user/:userId', { userId:'@id' }); }); ! function UserController($scope, User) { $scope.users = User.query(); ! var user = User.get({ userId: 1 }, function() { user.name = 'Mario'; user.save(); }) }

SERVICES angular.module('App', ['ngResource']).factory('User', function($resource) { return $resource('/user/:userId', { userId:'@id' }); }); ! function UserController($scope, User) { $scope.users = User.query(); ! var user = User.get({ userId: 1 }, function() { user.name = 'Mario'; user.save(); }) }

SERVICES angular.module('App', ['ngResource']).factory('User', function($resource) { return $resource('/user/:userId', { userId:'@id' }); }); ! function UserController($scope, User) { $scope.users = User.query(); ! var user = User.get({ userId: 1 }, function() { user.name = 'Mario'; user.save(); }) }

DEPENDENCY INJECTION function UserController($scope, User) { $scope.users = User.query(); }

DEPENDENCY INJECTION • Jeder Controller definiert seine Abhängigkeiten • Angular kümmert sich um die Auflösung der Abhängigkeiten und meldet Probleme • Macht Testen leicht

ANGULAR ANIMATE

LERNEN • Tutorial und Docs auf http://angularjs.org • Brad Green (@bradlygreen) • Igor Minar (@IgorMinar) • @angularjs • https://egghead.io (@eggheadio)

THX!

Add a comment

Related presentations

Related pages

AngularJS — Superheroic JavaScript MVW Framework

AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC ...
Read more

AngularJS.DE → Das deutsche Portal zu AngularJS

Interesse an Informationen rund um AngularJS auf deutsch? Bei uns findest du: Tutorials · Artikel · News · Workshops · Online-Buch ...
Read more

AngularJS – Wikipedia

Um Elemente auszuwählen, verwendet AngularJS ein integriertes jQuery Lite (jqLite). Dabei handelt es sich um eine reduzierte Version von jQuery, in ...
Read more

AngularJS.DE → AngularJS Online-Buch

Die deutsche Seite zu AngularJS, dem JavaScript-Framework. ☰ AngularJS.DE. Artikel; Tutorials; Buch; Jobs; Entwickler; Veranstaltungen; Slack 19/440. Login;
Read more

AngularJS

AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency ...
Read more

AngularJS Tutorial - W3Schools Online Web Tutorials

AngularJS extends HTML with new attributes. AngularJS is perfect for Single Page Applications (SPAs). AngularJS is easy to learn. Learn AngularJS now!
Read more

AngularJS - Wikipedia, the free encyclopedia

Philosophy. AngularJS is built on the belief that declarative programming should be used to create user interfaces and connect software components, while ...
Read more

AngularJS - YouTube

AngularJS is a client-side JavaScript framework that lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily ...
Read more

AngularJS Schulung Training Seminar - GROSSWEBER

Mit AngularJS fühlen sich Webanwendungen wie native Anwendungen an. Selbt komplexe Single-page-Webanwendungen sind damit einfach.
Read more

Introduction to AngularJS - W3Schools Online Web Tutorials

AngularJS Extends HTML. AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the ...
Read more