Controllers and Markup Controllers, $scope, Markup, Directives, Expressions, Binding, Filters, Validation SoftUni Team Technical Trainers Software University

Table of Contents 1.Controllers and $scope 2.Directives 3.Expressions 4.Filters 5.Binding 6.Validation 2

Controllers & Scope Controller Scope View

 Controller  Contains the presentation logic (e.g. load data)  Responsible for creating the $scope object  $scope object  Communication between controller and view  Holds the data to be displayed by the view  Binding between controller and view can be one-way or two-way  The scope contains the model Controllers and Scope

5  Controller  View Controllers and Scope var myApp = angular.module('myApp', []); myApp.controller('myController', function myController($scope, /* services */) { function myController($scope, /* services */) { $scope.name = "Vladimir"; $scope.name = "Vladimir"; }); }); Hello, {{name}}! Hello, {{name}}! </div> Module name Module to be used Controller name Controller to be used $scope is injected by Angular Everything in $scope is accessed via directives Hello, Vladimir!

Controllers & Scope Live Demo 6 1.Display basic user info 2.Display collections 3.Handling events

 Values  Constants Constants and Values myApp.constant('appConfig', { 'url': ' 'url': ' 'port': 8888 'port': 8888}) myApp.value('visitors', { count: 4, count: 4, names: ['Nakov', 'Petya', 'Alex', 'Vlado'] names: ['Nakov', 'Petya', 'Alex', 'Vlado']});

Directives DOM Element's Markers

 Angular directives extend the standard HTML functionality  Angular's HTML compiler attaches behaviour to DOM elements  Directives start with ng, e.g. ng-model="article"  Angular directives can be written in several ways:  Like element:  Like attribute:  Like CSS class: What are Directives?

Directives: ng-model & ng-change Live Demo <input type="text" ng-change="handleTextboxChange()" ng-change="handleTextboxChange()" ng-model="textBox" /> ng-model="textBox" />

 Mouse / click events Event Directives ngMousemove ngMouseleave ngMousedown ngClickngDblClick ngMouseenter ngMouseover ngMouseup

Directives for Mouse Events Live Demo

13 Other Directives ngApp ngBind ngBindTemplate ngBindHtml ngBindHtmlUnsafe ngHide ngShow ngCloak ngStyle ngClass ngClassEven ngClassOdd

Bind Directives Live Demo

15 More Directives ngDisabled ngChecked ngMultiple ngReadonly ngSelected ngForm ngSubmit ngHref ngSrc ngNonBindable

Live Demo 16

17  Older Internet Explorers (IE) do not support non-HTML tags  What to do for older IE browsers?  Polyfill JSON.stringify()  No NG tags  use attribute or class directives Directives: Old IE Restrictions

Expressions Using Expressions in the Views

 Angular expressions are JS-like code snippets placed in bindings:  Evaluated against the $scope object  Evaluating undefined properties doesn't throw an exception  No control flow statements (e.g. if / else / for )  Can use filters within the expressions Expressions {{ expression }} 3*12={{ 3*12 }} // 3*12=36 3*12={{ 3*12 }} // 3*12=36 {{ person.contacts. }} {{ person.contacts. }}

Expressions Live Demo

Filters Formatting Data in Expressions

 Angular filters format the value of an expression  Modify the output  Format the output  Sort data  Filter data  Using filters: Filters {{ expression | filter }}

23 Built-In Angular Filters uppercase numbers date orderBy filter lowercase currency json limitTo

24  Custom filters enable custom formatting / output modifications Writing Custom Filters module.filter('filter_name', function() { return function(input, /* filter params */) { return function(input, /* filter params */) { // modify the input // modify the input // return modifiedInput; // return modifiedInput; }});

Filters Live Demo

Two-Way Binding Bind Model Data to the UI Controls

 The ngModel directive binds a UI control to Angular model  It works on form input controls:  input  select  textarea Two-Way Binding UI Control Model

Form Validation Angular Data Validation Directives

 Validation directives  required – makes input field required  ngPattern – validated by regex pattern  Form properties  $valid / $invalid  $dirty / $pristine  CSS classes  You can style ng-classes ( ng-dirty, ng-valid, ng-required ) Form Validation

Live Demo

31  Can modules depend on other modules?  What is the primary responsibility of the controller?  Can the view bind to functions on the scope?  What are the ways directives can be written?  That is the purpose of the ngClock directive?  Which bind directive supports multiple bindings?  Do expressions support all JavaScript syntax?  Can you limit a filter to only search in specific field?  Which HTML elements work with two way binding? Summary

? ? ? ? ? ? ? ? ? Controllers and Markup

License  This course (slides, examples, demos, videos, homework, etc.) is licensed under the "Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International" licenseCreative Commons Attribution- NonCommercial-ShareAlike 4.0 International 33  Attribution: this work may contain portions from  "SPA with AngularJS" course by Telerik Academy under CC-BY-NC-SA licenseSPA with AngularJSCC-BY-NC-SA

Free Software University  Software University Foundation – softuni.orgsoftuni.org  Software University – High-Quality Education, Profession and Job for Software Developers  softuni.bg softuni.bg  Software Facebook  facebook.com/SoftwareUniversity facebook.com/SoftwareUniversity  Software YouTube  youtube.com/SoftwareUniversity youtube.com/SoftwareUniversity  Software University Forums – forum.softuni.bgforum.softuni.bg