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

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

By Rares Golea

Made with Slides.com

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

Vom vedea in punctul acesta cum se foloseste un filtru si cum se creeaza acesta. Vom da format datelor si vom folosi cautari locale. Vom defini ce este one-way data binding si two-way data binding si vom analiza cand si cum se foloseste fiecare. Vom analiza problema unei aplicatii descarcata pe latura clientului si vom incerca sa definim ce inseamna optimizarea aplicatiei. Continuam si cu folosirea $scope-ului si diferentele de folosire ale sintaxei ControllerAs. Unele lucruri s-au vazut deja dar comparativ destul de putine.

  • 516

More from Rares Golea