2. Filters. One/Two-way data-binding. Abuz de $scope

2.1. SPA

SPA

Single Page Application

A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

2.2 Expressions, Filters

(function(){
  "use strict";
  angular.module('app', [])
    .controller('AppController', AppController);

  AppController.$inject = ["$scope"];

  function AppController($scope){
    $scope.message = "Hello Team!";
  }
})();
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>SPA</title>
</head>
<body ng-controller="AppController">
  <input type="text" ng-model="message" />
  {{message}}
</body>
</html>
(function(){
  "use strict";
  angular.module('app', [])
    .controller('AppController', AppController);

  AppController.$inject = ["$scope"];

  function AppController($scope){
    $scope.opts = {
        message: "Hello Team!",
        number: 12345.67890,
        date: Date.now(),
        list: [
            {id: 1, name: 'foo'}, 
            {id: 3, name: 'baz'},
            {id: 2, name: 'bar'}
        ]
    };
  }
})();
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>SPA</title>
</head>
<body ng-controller="AppController">
 <input type="text" ng-model="opts.search" />
 <!-- String filters -->
  {{opts.message | uppercase}}
  {{opts.message | lowercase}}
 <!-- Number filters -->
  {{opts.number | number:2}}
  {{opts.number | currency:'€':2}}
 <!-- Date filters -->
  {{opts.date | date: 'dd/MM/yyyy'}}
 <!-- List filters -->
 <p ng-repeat="item in opts.list | limitTo: 2">{{item.name}}</p>
 <p ng-repeat="item in opts.list | orderBy:'id':true">{{item.name}}</p>
 <p ng-repeat="item in opts.list | filter: opts.search"> {{item.name}} </p>
 <!-- JSON Filter -->
 <p>{{opts | json}}</p>
</body>
</html>

https://docs.angularjs.org/api/ng/filter

2.3. One/Two way data-binding


<p>Hello {{name}}! - Time: {{time | date: 'mediumTime'}}</p>
<p>Hello {{::name}}! - Time: {{::time | date: 'mediumTime'}}</p>

One time expressions will stop recalculating once they are stable, which happens after the first digest

AngularJS does not use any kind of polling mechanism to periodically check for model changes... [The $digest cycle is a] code that runs at an interval...

 

(function(){
    "use strict";

    angular.module('app', [])
        .controller('AppController', AppController);

    AppController.$inject = ["$scope"];

    function AppController($scope){
        $scope.name = "John Doe";
        $scope.time = Date.now();

        setInterval(function(){
            $scope.time = Date.now();
        }, 1000);
    }
})();

2.4. Abuz $scope

(function(){
  "use strict";

  angular.module('app', [])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)
    .controller('GrandsonController', GrandsonController);

  ParentController.$inject = ["$scope"];

  function ParentController($scope){
    $scope.name = "AppController";
  }

  ChildController.$inject = ["$scope"];

  function ChildController($scope){
    $scope.name = "ChildController";
  }

  GrandsonController.$inject = ["$scope"];
  
  function GrandsonController($scope){
    $scope.name = "GrandsonController";
  };
})();
<div ng-app="app">
    <div ng-controller="ParentController">
        From ParentController: {{::name}}
        <div ng-controller="ChildController">
            From ChildController: {{::name}}
            From ParentController: {{::$parent.name}}
            <div ng-controller="GrandsonController">
                From GrandsonController: {{::name}}
                From ChildController: {{::$parent.name}}
                From ParentController: {{::$parent.$parent.name}}
                <!--{{::$parent.$parent.$parent.$parent.$parent...}}-->
            </div>
        </div>
    </div>
</div>
(function(){
  "use strict";

  angular.module('app', [])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)
    .controller('GrandsonController', GrandsonController);

  ParentController.$inject = ["$scope"];

  function ParentController($scope){
    //$scope.name = "AppController";
    $scope.$watch('name', function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('ParentController', newVal);
    });
  }

  ChildController.$inject = ["$scope"];

  function ChildController($scope){
    //$scope.name = "ChildController";
    $scope.$watch('name', function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('ChildController', newVal);
    });
  }

  GrandsonController.$inject = ["$scope"];
  
  function GrandsonController($scope){
    //$scope.name = "GrandsonController";
    $scope.$watch('name', function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('GrandsonController', newVal);
    });
  };
})();
<div ng-app="app">
    <div ng-controller="ParentController">
        <input type="text" ng-model="name" placeholder="ParentController"> {{name}}
        <div ng-controller="ChildController">
            <input type="text" ng-model="name" placeholder="ChildController"> {{name}}
            <div ng-controller="GrandsonController">
                <input type="text" ng-model="name" placeholder="GrandsonController"> {{name}}
            </div>
        </div>
    </div>
</div>
(function(){
  "use strict";

  angular.module('app', [])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)
    .controller('GrandsonController', GrandsonController);

  ParentController.$inject = [];

  function ParentController(){
    this.name = "AppController";
  }

  ChildController.$inject = [];

  function ChildController(){
    this.name = "ChildController";
  }

  GrandsonController.$inject = [];
  
  function GrandsonController(){
    this.name = "GrandsonController";
  };
})();
<div ng-app="app">
    <div ng-controller="ParentController as parent">
        From ParentController: {{::parent.name}}
        <div ng-controller="ChildController as child">
            From ChildController: {{::child.name}}
            From ParentController: {{::parent.name}}
            <div ng-controller="GrandsonController as grandson">
                From GrandsonController: {{::grandson.name}}
                From ChildController: {{::child.name}}
                From ParentController: {{::parent.name}}
                <!--{{::alias.property}}-->
            </div>
        </div>
    </div>
</div>
(function(){
  "use strict";

  angular.module('app', [])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)
    .controller('GrandsonController', GrandsonController);

  ParentController.$inject = ["$scope"];

  function ParentController($scope){
    //this.name = "AppController";
    var ctrl = this;
    $scope.$watch(function(){
        return ctrl.name;
    }, function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('ParentController', newVal);
    });
  }

  ChildController.$inject = ["$scope"];

  function ChildController($scope){
    //this.name = "ChildController";
    var ctrl = this;
    $scope.$watch(function(){
        return ctrl.name;
    }, function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('ChildController', newVal);
    });
  }

  GrandsonController.$inject = ["$scope"];
  
  function GrandsonController($scope){
    //this.name = "GrandsonController";
    var ctrl = this;
    $scope.$watch(function(){
        return ctrl.name;
    }, function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('GrandsonController', newVal);
    });
  };
})();
<div ng-app="app">
    <div ng-controller="ParentController as parent">
        <input type="text" ng-model="parent.name"> {{parent.name}}
        <div ng-controller="ChildController as child">
            <input type="text" ng-model="child.name"> {{child.name}}
            <div ng-controller="GrandsonController as grandson">
                <input type="text" ng-model="grandson.name"> {{grandson.name}}
            </div>
        </div>
    </div>
</div>

<div ng-app="app">
    <div ng-controller="ParentController as ctrl">
        <input type="text" ng-model="ctrl.name"> {{ctrl.name}}
        <div ng-controller="ChildController as ctrl">
            <input type="text" ng-model="ctrl.name"> {{ctrl.name}}
            <div ng-controller="GrandsonController as ctrl">
                <input type="text" ng-model="ctrl.name"> {{ctrl.name}}
            </div>
        </div>
    </div>
</div>
(function(){
  "use strict";

  angular.module('app', [])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)
    .controller('GrandsonController', GrandsonController);

  ParentController.$inject = ["$scope"];

  function ParentController($scope){
    $scope.$watch(function(){
        return this.name;
    }.bind(this), function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('ParentController', newVal);
    });
  }

  ChildController.$inject = ["$scope"];

  function ChildController($scope){
    $scope.$watch(function(){
        return this.name;
    }.bind(this), function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('ChildController', newVal);
    });
  }

  GrandsonController.$inject = ["$scope"];
  
  function GrandsonController($scope){
    $scope.$watch(function(){
        return this.name;
    }.bind(this), function(newVal, oldVal){
        if(newVal === oldVal) return;
        console.log('GrandsonController', newVal);
    });
  };
})();
<div ng-app="app">
    <div ng-controller="ParentController as parent">
        <input type="text" ng-model="parent.name"> {{parent.name}}
        <div ng-controller="ChildController as child">
            <input type="text" ng-model="child.name"> {{child.name}}
            <div ng-controller="GrandsonController as grandson">
                <input type="text" ng-model="grandson.name"> {{grandson.name}}
            </div>
        </div>
    </div>
</div>

<div ng-app="app">
    <div ng-controller="ParentController as ctrl">
        <input type="text" ng-model="ctrl.name"> {{ctrl.name}}
        <div ng-controller="ChildController as ctrl">
            <input type="text" ng-model="ctrl.name"> {{ctrl.name}}
            <div ng-controller="GrandsonController as ctrl">
                <input type="text" ng-model="ctrl.name"> {{ctrl.name}}
            </div>
        </div>
    </div>
</div>
(function(){
    "use strict";

    function Person(name, lname){
        this.name = name;
        this.lname = lname;
    }

    Person.prototype.greet = function(){
        console.log('Hello, my name is ' + this.name + ' and my last name is ' + this.lname);
    };

    Person.prototype.greetLater = function(){
        setTimeout(function(){
            this.greet();
        }.bind(this), 1000);
    };

    Person.prototype.greetLaterBetter = function(){
        setTimeout(this.greet.bind(this), 1000);
    };

    window.Person = Person;
})();

var person = new Person('John', 'Doe');

console.log(person.name);
console.log(person.lname);
person.greet();
person.greetLater();
person.greetLaterBetter();

+ info

The end

Made with Slides.com