AngularJS ()=> hasta la victoria siempre;

Saturday, March 4, 2017

AngularJS is the leading Open Source JavaScript Application Framework backed by Google. The newest version Angular 2 && 4 or Just Angular is faster and production, cloud ready now.

Open Source Rules!

My selection of awesome future Open Source technologies (are you ready to party? harder, better, faster, stronger):




attitude, facts and mission ...

we are fearless, ruthless and honest, the goal is progress. we are constantly focused on our goal, produce quality working software as fast as possible. we are open source. we are the angular open source crisis team.

joy




update template when input text changes

<!DOCTYPE html> <html> <head> <title>angularjs samples</title> </head> <body ng-app> Name: <input type="text" ng-model="name"> Hi {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> </body> </html>


data binding with many text inputs

<!DOCTYPE html> <html> <head> <title>angularjs samples</title> </head> <body ng-app> Name: <input type="text" ng-model="name"> <br> Name: <input type="text" ng-model="name"> <br> Name: <input type="text" ng-model="name"> <br> Hi {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> </body> </html>


first name and last name

<!DOCTYPE html> <html> <head> <title>angularjs samples</title> </head> <body ng-app> First Name: <input type="text" ng-model="firstName"> <br> Last Name: <input type="text" ng-model="lastName"> <br> Hi {{firstName}} {{lastName}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> </body> </html>


initializing model using controller defined within module

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="NameCtrl"> First Name: <input type="text" ng-model="firstName"> <br> Last Name: <input type="text" ng-model="lastName"> <br> Hi {{firstName}} {{lastName}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('NameCtrl', ['$scope', function NameCtrl($scope) { $scope.firstName = 'Zorin'; $scope.lastName = 'OS'; }]); </script> </body> </html>


changing scope values asynchronously updates don't propagate without .apply()

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="NameCtrl"> First Name: <input type="text" ng-model="firstName"> <br> Last Name: <input type="text" ng-model="lastName"> <br> Hi {{firstName}} {{lastName}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('NameCtrl', ['$scope', function NameCtrl($scope) { $scope.firstName = 'Zorin'; $scope.$watch('lastName', function(newValue, oldValue) { console.log('new value is ' + newValue); }); setTimeout(function() { $scope.lastName = 'OS'; }, 1000); }]); </script> </body> </html>


looping over lists in templates using ng-repeat

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="NameCtrl"> <ul> <li ng-repeat="name in names">{{name}}</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('NameCtrl', ['$scope', function NameCtrl($scope) { $scope.names = ['Igor', 'Misko', 'Hans', 'Nils']; }]); </script> </body> </html>


adding entries to a list using forms and ng-submit

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="NameCtrl"> <ul> <li ng-repeat="name in names">{{name}}</li> </ul> <form ng-submit="addName()"> <input type="text" ng-model="enteredName"> <input type="submit" value="add"> </form> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('NameCtrl', ['$scope', function NameCtrl($scope) { $scope.names = ['Igor', 'Misko', 'Hans', 'Nils']; $scope.addName = function() { $scope.names.push($scope.enteredName); }; }]); </script> </body> </html>


clearing the entered name on submit using data binding

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="NameCtrl"> <ul> <li ng-repeat="name in names">{{name}}</li> </ul> <form ng-submit="addName()"> <input type="text" ng-model="enteredName"> <input type="submit" value="add"> </form> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('NameCtrl', ['$scope', function NameCtrl($scope) { $scope.names = ['Igor', 'Misko', 'Hans', 'Nils']; $scope.addName = function() { $scope.names.push($scope.enteredName); $scope.enteredName = ''; }; }]); </script> </body> </html>


removing names from the list using ng-click

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="NameCtrl"> <ul> <li ng-repeat="name in names">{{name}} <a href ng-click="removeName(name)">x</a> </li> </ul> <form ng-submit="addName()"> <input type="text" ng-model="enteredName"> <input type="submit" value="add"> </form> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('NameCtrl', ['$scope', function NameCtrl($scope) { $scope.names = ['Igor', 'Misko', 'Hans', 'Nils']; $scope.addName = function() { $scope.names.push($scope.enteredName); $scope.enteredName = ''; }; $scope.removeName = function(name){ var idx = $scope.names.indexOf(name); $scope.names.splice(idx, 1); }; }]); </script> </body> </html>


enumerating objects - countries and populations

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <ul> <li ng-repeat="country in countries"> {{country.name}} - population {{country.population}} </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', function NameCtrl($scope) { $scope.countries = [ {'name': 'Germany', 'population': 82175700}, {'name': 'Russia', 'population': 146500000}, {'name': 'USA', 'population': 324420000} ]; }]); </script> </body> </html>


building a table

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <table> <tr> <th>Country</th> <th>Population</th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', function NameCtrl($scope) { $scope.countries = [ {'name': 'Germany', 'population': 82175700}, {'name': 'Russia', 'population': 146500000}, {'name': 'USA', 'population': 324420000} ]; }]); </script> </body> </html>


fetching JSON with $http

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <table> <tr> <th>Country</th> <th>Population</th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


adding search using angular filters

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> Search: <input type="text" ng-model="query"> <table> <tr> <th>Country</th> <th>Population</th> </tr> <tr ng-repeat="country in countries | filter:query"> <td>{{country.name}}</td> <td>{{country.population}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


sorting in ng-repeat using orderby

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> Search: <input type="text" ng-model="query"> <table> <tr> <th>Country</th> <th>Population</th> </tr> <tr ng-repeat="country in countries | filter:query | orderBy:'population'"> <td>{{country.name}}</td> <td>{{country.population}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


sorting in descending order -

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> Search: <input type="text" ng-model="query"> <table> <tr> <th>Country</th> <th>Population</th> </tr> <tr ng-repeat="country in countries | filter:query | orderBy:'-population'"> <td>{{country.name}}</td> <td>{{country.population}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


sorting table columns interactively

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> Search: <input type="text" ng-model="query"> <table> <tr> <th><a href ng-click="sortField = 'name'">Country</a></th> <th><a href ng-click="sortField = 'population'">Population</a></th> </tr> <tr ng-repeat="country in countries | filter:query | orderBy:sortField"> <td>{{country.name}}</td> <td>{{country.population}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); $scope.sortField = 'population'; }]); </script> </body> </html>


ABC.XYZ interactively reversing sort order

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> Search: <input type="text" ng-model="query"> <table> <tr> <th><a href ng-click="sortField = 'name'; reverse = !reverse">Country</a></th> <th><a href ng-click="sortField = 'population'; reverse = !reverse">Population</a></th> </tr> <tr ng-repeat="country in countries | filter:query | orderBy:sortField:reverse"> <td>{{country.name}}</td> <td>{{country.population}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); $scope.sortField = 'population'; $scope.reverse = true; }]); </script> </body> </html>


adding country flag images

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <table> <tr> <th>Country</th> <th>Population</th> <th>Flag</th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> <td><img src="{{country.flagURL}}" width="100"></td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


using ng-src

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <table> <tr> <th>Country</th> <th>Population</th> <th>Flag</th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> <td><img ng-src="{{country.flagURL}}" width="100"></td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


adding capital data

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <table> <tr> <th>Country</th> <th>Population</th> <th>Flag</th> <th>Capital</th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> <td><img ng-src="{{country.flagURL}}" width="100"></td> <td>{{country.capital}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


adding gdp data

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <table> <tr> <th>Country</th> <th>Population</th> <th>Flag</th> <th>Capital</th> <th><a href="http://en.wikipedia.org/wiki/List_of_countries_by_GDP_(PPP)">GDP (PPP)</a></th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> <td><img ng-src="{{country.flagURL}}" width="100"></td> <td>{{country.capital}}</td> <td>{{country.gdp}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


formatting currency using filters in templates

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <table> <tr> <th>Country</th> <th>Population</th> <th>Flag</th> <th>Capital</th> <th><a href="http://en.wikipedia.org/wiki/List_of_countries_by_GDP_(PPP)">GDP (PPP)</a></th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> <td><img ng-src="{{country.flagURL}}" width="100"></td> <td>{{country.capital}}</td> <td>{{country.gdp | currency}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


formatting population using filters in templates

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body ng-controller="CountryCtrl"> <table> <tr> <th>Country</th> <th>Population</th> <th>Flag</th> <th>Capital</th> <th><a href="http://en.wikipedia.org/wiki/List_of_countries_by_GDP_(PPP)">GDP (PPP)</a></th> </tr> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population | number}}</td> <td><img ng-src="{{country.flagURL}}" width="100"></td> <td>{{country.capital}}</td> <td>{{country.gdp | currency}}</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script> angular.module('myApp', []).controller('CountryCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]); </script> </body> </html>


getting started with routing using ng-route, add script tag for angular-route which defines ngroute module, add ngroute module as dependency to main bootstrap app module, config() call sets up the routes using inline strings as templates, create placeholder for countrydetailctrl, add div with ng-view directive to body, this is where route provider injects content rendered from template asscoiated with current route

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body> <div ng-view></div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script> <script> angular.module('myApp', ['ngRoute']).config(function($routeProvider) { $routeProvider. when('/', { template: '<ul><li ng-repeat="country in countries">{{country.name}}</li></ul>', controller: 'CountryListCtrl' }). when('/:countryName', { template: '<h1>TODO create country detail view, routeParams : {{routeParams}}</h1>', controller: 'CountryDetailCtrl' }). otherwise({ redirectTo: '/' }); }) .controller('CountryListCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]) .controller('CountryDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) { $scope.routeParams = $routeParams; }]); </script> </body> </html>


moving templates for routes into separate files

angular.module('myApp', ['ngRoute']).config(function($routeProvider) { $routeProvider. when('/', { templateUrl: 'country-list.html', controller: 'CountryListCtrl' }). when('/:countryName', { templateUrl: 'country-detail.html', controller: 'CountryDetailCtrl' }). otherwise({ redirectTo: '/' }); }); country-list.html <ul><li ng-repeat="country in countries">{{country.name}}</li></ul> country-detail.html <h1>TODO create country detail view, routeParams : {{routeParams}}</h1>


extracting and using parameters from routes

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body> <div ng-view></div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script> <script> angular.module('myApp', ['ngRoute']).config(function($routeProvider) { $routeProvider. when('/', { templateUrl: 'country-list.html', controller: 'CountryListCtrl' }). when('/:countryName', { templateUrl: 'country-detail.html', controller: 'CountryDetailCtrl' }). otherwise({ redirectTo: '/' }); }) .controller('CountryListCtrl', ['$scope', '$http', function NameCtrl($scope, $http) { $http.get('countries.json').then((response) => { $scope.countries = response.data; }); }]) .controller('CountryDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) { $scope.name = $routeParams.countryName; }]); </script> </body> </html>


using links in routes for navigation between views

<ul> <li ng-repeat="country in countries"> <a href="#!/{{country.name}}">{{country.name}}</a> </li> </ul>


looking up details for a single country

.controller('CountryDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) { $scope.name = $routeParams.countryName; $http.get('countries.json').then((response) => { let country = response.data.filter((entry) => { return entry.name === $scope.name; })[0]; console.log(country); }); }]);


surfacing data on country details page

.controller('CountryDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) { $scope.name = $routeParams.countryName; $http.get('countries.json').then((response) => { $scope.country = response.data.filter((entry) => { return entry.name === $scope.name; })[0]; }); }]); country-detail.html <h1>{{country.name}}</h1> <ul> <li>Flag: <img src="{{country.flagURL}}" width="100"></li> <li>Population: {{country.population | number}}</li> <li>Capital: {{country.capital}}</li> <li>GDP: {{country.gdp | currency}}</li> </ul>


creating a service for loading the list of countries

.controller('CountryListCtrl', ['$scope', 'countries', function NameCtrl($scope, countries) { countries.list((response) => { $scope.countries = response.data; }); }]) .controller('CountryDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) { $scope.name = $routeParams.countryName; $http.get('countries.json').then((response) => { $scope.country = response.data.filter((entry) => { return entry.name === $scope.name; })[0]; }); }]) .factory('countries', ['$http', function($http) { return { list: function(callback) { $http.get('countries.json').then(callback); } }; }]);


extracting country details query into the service

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>angularjs samples</title> </head> <body> <div ng-view></div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script> <script> angular.module('myApp', ['ngRoute']).config(function($routeProvider) { $routeProvider. when('/', { templateUrl: 'country-list.html', controller: 'CountryListCtrl' }). when('/:countryName', { templateUrl: 'country-detail.html', controller: 'CountryDetailCtrl' }). otherwise({ redirectTo: '/' }); }) .controller('CountryListCtrl', ['$scope', 'countries', function NameCtrl($scope, countries) { countries.list((response) => { $scope.countries = response.data; }); }]) .controller('CountryDetailCtrl', ['$scope', '$routeParams', 'countries', function($scope, $routeParams, countries) { countries.find($routeParams.countryName, (country) => { $scope.country = country; }); }]) .factory('countries', ['$http', function($http) { return { list: function(callback) { $http.get('countries.json').then(callback); }, find: function(name, callback) { $http.get('countries.json').then((response) => { let country = response.data.filter((entry) => { return entry.name === name; })[0]; callback(country); }); } }; }]); </script> </body> </html>


caching JSON data in the service

.factory('countries', ['$http', function($http) { let cachedData; function getData(callback) { if (cachedData) { callback(cachedData); } else { $http.get('countries.json').then((response) => { cachedData = response; callback(response); }); } } return { list: getData, find: function(name, callback) { getData((response) => { let country = response.data.filter((entry) => { return entry.name === name; })[0]; callback(country); }); } }; }]);


caching JSON using cache option

.factory('countries', ['$http', function($http) { function getData(callback) { $http({ method: 'GET', url: 'countries.json', cache: true }).then(callback); } return { list: getData, find: function(name, callback) { getData((response) => { let country = response.data.filter((entry) => { return entry.name === name; })[0]; callback(country); }); } }; }]);


creating custom filter to encode URI's

.filter('encodeURI', function() { return window.encodeURI; }); country-list.html <ul> <li ng-repeat="country in countries"> <a href="#!/{{country.name | encodeURI}}">{{country.name}}</a> </li> </ul>


Default Success Warning Important Info Inverse
B S W I ? O