Workshop 12: AngularJS Parte I

  • Published on

  • View

  • Download

Embed Size (px)


  • AngularJS - Part I

    Cristina HernndezRoger Vil

  • Index

    What is AngularJS? Why Angular JS? History of AngularJS Angular JS Patterns Introduce to AngularJS Code Invoking Angular JS DataBinding in AngularJS

    Expressions Directives Filters Modules Controllers Services Forms

    Application example

  • Angularjs is what HTML would have been if it had been designed for building web applications

  • What is Angular JS?

    AngularJS is an open-source web application framework for client-side MVC and MVVM architectures.

    Why Angular JS?

    HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. Angular JS lets you extend HTML vocabulary for your application

  • History of Angular JS

    AngularJS was originally developed in

    2009 by Misko Hevery at Brach Tech LLC.

    Created at Google as internal project.

    AngularJS version 1.0 was released in 2012.

    Currently working on 1.4.9

    Angular JS 2 (Beta)

  • MVC - Model View Controller



    - Renders the Model data- Sends user actions/events

    to controller- UI

    - Defines application behaviour

    - Maps user actions to Model

    - Selects view for response

    - Business Logic- Notifies view changes- Data in general

    User Action or View Load

    Maps to particular Model after fetching the data

    Implements the Business Logic on response data and binds it to View

  • MVVM - Model View View Model

  • Model

    Entire model contained in a single javascript data structure.

    var obj = { employeeName: "Mattias", company: "Net Insight AB" }

  • Controller

    Javascript code that populates the view and reacts to changes in it.

    function myCtrl( $scope ) { $scope = { employeeName: "Mattias", company: "Net Insight AB" };

    $scope.save_info = function() { console.log( $scope.employeeName ); };}

  • View

    "Extended" html. Dynamic and syncronized

    {{company}}Employee name:


  • Invoking Angular

    Any application must do two things to start Angular:

    1) Load the angular.js library

    2) Tell Angular which part of the DOM it should manage with the ng-app directive



  • Client-Side templatescontrollers.js:

    function HelloController($scope) {$scope.greeting = { text: 'Hello' };



    {{greeting.text}}, World


    Hello, World

  • Data Binding


    One-way binding:

    Binding from scope to HTML. Mustache syntax


    Two-way binding:

    Binding from scopel to HTML, and binding from HTML to scope

  • Two-Way Data Bindinghello.html

    {{greeting.text}}, World


    function HelloController($scope) {$scope.greeting = { text: 'Hello' };



    Hello, World

  • Expressions

    Allow you to insert dynamic values into your HTML

    AngularJS expressions can be written inside double braces: {{expression}}

    Angular JS expressions can be written inside a directive: ng-bind=expression

    1) Numerical Operations

    {{ 4 + 6}} 10

    2) String Operations

    {{hello + you}} hello you

  • DirectivesDirectives are ways to expand our html. They allow you to add from small pieces of code or full functionality

    Angular comes with a set of these directives built in, like:

    ng-app ng-controller ng-model ng-bind ng-repeat ng-init ng-show/ng-hide ng-class ng-click ng-form ng-submit ng-if ng-href ng-src custom directives (Next workshop)

  • ng-modelWith the ng-model directive you can bind the value of an input field to a variable created in AngularJS


    var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {

    $ = "John Doe";});

  • ng-repeatFIFA Golden Ball:

    {{name}}: {{num}}

    function MyCtrl($scope) { $scope.players = [

    { name: Roger

    num: 6},{

    name: Messinum: 5


    name: Cristiano Ronaldonum: 3



  • ng-show / ng-hideThe ng-show / hide directive shows or hides the given html based on the expression provided in the ng show/hide attribute

    Click me:


    I show up when your checkbox is checked.


    I hide when your checkbox is checked.

  • Filters Angular filters format data for display to the user.

    {{ expression [| filter_name[:parameter_value]...] }}

    {{ totalCost | currency }}

    Filters can be chained and can take optional arguments.

    {{ totalCost | currency | filter2 | filter3 }}

    {{ totalCost | currency:USD$ }}

  • Built-in Filters

    filter currency number date json lowercase uppercase limitTo orderBy

  • Filters





  • Filters in Javascript

    $filter(number)(15,5) {{ 15 | number:5 }}

  • Modules

    - Where we write pieces of our Angular application.- Makes our code more maintainable, testable and

    readable.- Where we define dependencies for our app

  • Modules

    var app = angular.module(moduleName, [] );



    Including the module:



  • Modulesvar app = angular.module(moduleName, [] ).config(function () { ... }).run(function () { ... });




  • Controllers

    Controllers are where we define our apps behavior by defining functions and values.

    app.controller('ViewCtrl', ['$scope', '$location', 'recipe',

    function($scope, $location, recipe) {

    $scope.recipe = recipe;

    $scope.edit = function() {

    $location.path('/edit/' +;




  • $scope

    Scope is an object that refers to the application model.


    function SimpleController($scope) {

    $ = Leo;}

  • Services

    Services are singletons objects that are instantiated only once per app.

    Services are used to organize and share code across your app.

    Controllers are view-specific, services are app-specific.

  • Built-in Services

    $http $q $window $location ...

  • Built-in Services - $httpvar xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {

    var response = xmlhttp.responseText;

    } else if (xmlhttp.status == 400) { // Handle error gracefully}


    // Setup connection, http://myserver/api, true);

    // Make the request


    $http.get('api/user', {params: {id: '5'}

    }).success(function(data, status, headers, config) {

    // Do something successful.

    }).error(function(data, status, headers, config) {

    // Handle the error


  • Forms

    Forms and controls provide validation services, so that the user can be notified of invalid input.

    This provides a better user experience.


  • Debugging

    Batarang Google Chrome Extension