angularJs Workshop

© Copyright SELA Software & Education Labs, Ltd. | 14-18 Baruch Hirsch St., Bnei Brak, 51202 Israel | www.selagroup.com SELA DEVELOPER PRACTICE May 31st – June 4th, 2015 Ran Wahle AngularJS – from 0 to 60

Agenda Introduction Modules and dependency injection Data binding, controllers and scopes Services Filters Directives Form validation Routing

The Modern Web From web pages to web applications More and more logic is pushed to the client

The Problem As we add more and more JavaScript, our application is getting:

What Is AngularJS? An MV* framework for developing CRUD style web applications Developed by Google Works on all modern web browsers Open source (MIT license) No external dependencies

Demo The Simplest Angular Application

Angular Building Blocks Module Module Module Scope Controller ServiceTemplate Filter Directive Two-Way Binding Dependency Injection Routing

<!doctype html> <html data-ng-app> <head> </head> <body> <input type="text" data-ng-model="name" /> {{name}} </body> </html> Your first AngularJS page

Module Divide application into small pieces Can contain controllers, services, directives, etc. Can depend on other modules Other modules can depend on it

//Creating a module angular.module('yourModuleName', [ /*…dependencies…*/ ]); //Accessing a module angular.module('yourModuleName'); //Note: no dependencies array Creating a module

Dependency Injection Each angular application has an $injector service Components are injected by the $injector There are several options for using dependency injection

One option removes the responsibility of locating the dependency from the component. The dependency is simply handed to the component. In Angular each application has an injector that is responsible for construction and lookup of dependencies function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.doSomething = function(name) { this.greeter.greet(name); } Dependency Injection cont.

Creating a component angular.module('yourModuleName').service('serviceName', function() { //service’s code }); Creating an Angular component Consuming the component angular.module('yourModuleName') .controller('controllerName', ['serviceName', function(serviceName) { //controller’s code });

AngularJS supports MV *- patterns Views HTML templates Controllers JavaScript functions Data Model $scope

HTML templates An HTML element with Angular-related attributes Declarative Contains Angular-specific elements and attributes Contains expressions evaluated against scope properties

<html> <head> </head> <body data-ng-app="myAppName"> <div data-ng-controller="myController"> <input data-ng-model="name" /> <button data-ng-click="greet()">Greet</button> </div> </body> </html> HTML template

Controller A JavaScript constructor function Contains view related logic Can get and set data on the $scope Shouldn’t have any DOM related functionality Sets up the $scope initial state Associated with a template via the ng-controller directive

angular.module('myAppName') .controller('myController', ['$scope', function($scope) { var greet = function() { alert('Hello ' + $scope.name); }; $scope.greet = greet; }]); Controller

$scope The glue between the HTML template and the controller Hierarchical in the same way as HTML Hierarchy implemented using JavaScript prototypes The root scope is represented by the $rootScope service

Demo Controllers, views and $scope

Services Reusable singleton objects Can be injected into controllers, filters, directives and other services Created only when needed There are many built-in services in AngularJS

angular.module('myApp') .service('myService', [/*…dependencies…*/, function(/*…dependencies…*/) { //service logic here this.someMethod = function() {}; }]); angular.module('myApp') .controller('myController', ['myService', function(myService) { myService.someMetho(); }]); Creating and using a service

Built-in services $rootScope $timeout $location $interval $log $compile $rootElement $parse $window $cacheFactory $animate

Ajax using $http $http service is a built-in service in AngularJS Used for communicating with the server Wraps XMLHttpRequest Automatically serializes/deserializes JSON Supports request and response transformation Supports request and response interception

$http.get('url') .success(function(response) { //handle the server's response }) .error(function(errorResponse) { //handle the server's error response }); $http.post('url', requestBody); $http.put('url', requestBody); $http.delete('url', requestBody); Using $http

$http({ url: 'url', method: 'get', //or 'put', 'post', 'delete' params: {…}, //for get requests data: {…}, //for put or post requests }).success(…).error(…).finally(…); Using $http (Cont)

The $resource Service An abstraction on top of the $http service for interaction with RESTful web services Depends on the ngResource module and requires the inclusion of the angular-resource.js script Receives a parameterized URL, with optional default values Returns an object with convenient methods (get, query, $save, $delete, …) Custom actions can be configured as well

Using the $resource service angular.module('resourceDemo', ['ngResource']) .controller('questionsCtrl', function($scope) { var baseUrl = '/api/v1.0/questions/:id'; var Questions = $resource(baseUrl, {id: '@id'}); $scope.loadQuestions = function() { $scope.questions = Questions.query(); }; $scope.removeQuestion = function(question) { question.$remove(); }; });

Filters Formats the value of an expression for display to the user {{ expression | filter }} {{ 10 | currency }} will display 10$ May have arguments {{ price | number:2 }} Chainable

angular.module('myModule') .filter('digitToText', function() { var digitToText = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' ]; return function(digit) { return digitToText[digit]; }; }); Create a custom filter

The form directive Aggregates the state of all its input elements Sets CSS classes according to the state The default form action is automatically ignored Available to the scope as a property with the name of the form Contained input elements are also available by their names, as sub- properties of the form property

The form directive Creates a formController The formController aggregates the state of all form controls The formController is available to the current scope by its name To submit the form using Ajax, respond to ng-submit or ng-click

Built-in validation directives Angular provides the following validation directives: required – Checks that the field has a value min – Checks that the field value is greater than the given value max – Checks that the field value is lower than the given value minlength – Checks that the field value is longer than the given value maxlength – Checks that the field value is shorter than the given value pattern – Checks that the field value matches the given regular expression All of the above directives set a validation error identified by their name when the condition is not met

The ngModel directive Provides a two way data binding between the input element and the model Provides automatic validation for common HTML5 input types (checkbox, email, number, text, url) Tracks the control’s state Sets CSS classes according to the state

Note the usage of the novalidate attribute to disable the browser’s built-in validation <form name="form" novalidate> <div> <input type="text" name="title" ng-model="question.title" required /> </div> <div> <textarea name="content" ng-model="question.content" required> </textarea> </div> <button ng-click="addQuestion(question)”> Submit </button> </form> Using the form and ngModel directives

Directives Custom HTML elements, attributes, classes and comments that are recognized by Angular Essentially extend the existing HTML vocabulary Creating new elements Adding behavior to existing elements Most of the things we’ve seen so far are built-in directives (ng-app, ng-controller, ng-repeat, ngmodel, required, …)

Creating custom directives Directives are registered on modules, with the module.directive function, which takes the directive name and a factory function The factory function should return a directive definition object (discussed in the following slides) It’s a best practice to prefix custom directives to prevent collision with other 3rd party directives, or a future standard

The following code demonstrates the definition of a new directive, named myDirective Note that this is a only a skeleton with an empty directive definition object. We’ll fill this object with properties in the following slides. myModule.directive('myDirective', function() { return { }; }); Creating a custom directive

Create a custom directive The object retuned can have the following properties: • link: a function that is called during the linking phase • template: an HTML template for the directive • templateUrl: a rooted path to an HTML template file • require: specifies a dependency on another directive • transclude: determines whether child elements should be included in the template • controller: used to share behavior and communicate with other directives

Routing in Single Page Applications Unlike traditional web sites, in SPAs, the responsibility for rendering the view is on the client side We do, however, want to give the user the same features they are used to, such as: The browser’s navigation buttons The address bar for navigation The ability to bookmark specific pages How can we change the address bar without causing the browser to issue a new request?

The $location service An abstraction on top of the window.location object Synchronized with the browser address bar and allows to watch or manipulate the URL Seamless integration with the HTML5 History API. Links are automatically rewritten to reflect the supported mode. <a href="/page1?id=123">link</a> /index.html#/page1?id=123 /page1?id=123

The ui.router module Angular comes with a built-in router named ngRoute But most projects use the 3rd party AngularUI Router The AngularUI Router is packaged in its own module, named ui.router To use the router, perform the following steps: Install and reference the angular-ui-router.js script in the HTML Add the ui.router module as a dependency to your module

Routes are registered in the module’s config function, by calling the $stateProvider.state method with a state name and a route object A default route can be registered with the $routeProvider.otherwise method The contents of the route object are discussed in the following slides myModule.config(function($stateProvider) { $stateProvider("page1", {url: '/page1', …}) .state("page2", {…}) .state("page3", {…}) }); Route registration

The 3rd party uiView directive marks the place in which the new route’s template should be rendered Can be used as an element, or as an attribute on any element <body ng-app="myModule"> <div> <ul> <li><a ui-sref="page1">Page 1</a></li> <li><a ui-sref="page2">Page 2</a></li> </ul> </div> <div ui-view /> </body> The uiView directive

Modules and dependency injection Data binding, controllers and scopes Services Filters Form validation Directives Routing Email: ranw@sela.co.il Summary

angularJs Workshop

More Related Content

What's hot

Similar to angularJs Workshop

More from Ran Wahle

Recently uploaded

angularJs Workshop