IT Fashion: May 2017

Thursday, May 25, 2017

Alternate requirejs define & require: define(function(require) { … })

The usual define "syntax":

define(['module/first'], function (firstModule) {
   //Module code with a dependency on module/first goes here.
});

The alternate define "syntax":

<script data-main="app/config" src="assets/js/libs/require.js"></script>

file: config.js:

require.config({
   paths: {
      jquery:      '../assets/js/libs/jquery'
   }
});
require(['app']);

file: app.js:

define(function(require) {
     var FirstModule = require('modules/first');
     //Module code with a dependency on module/first goes here.

@reference_1_stackoverflow
Why use alternate requirejs define: define(function(require) { … }

@reference_2_stackoverflow
RequireJS: require a module return a function instead of a object

@reference_3_requirejs.org
Define a Module as a Function

Tuesday, May 23, 2017

Create a global filter injecting '$sce.trustAsHtml' to bind unsafe HTML

var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function ($scope) {
    $scope.appTitle = "<b>[Packt] Parking</b>";
});

parking.filter('safeHtml', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
});

<html ng-app="parking">
<head>
<title>[Packt] Parking</title>
<script src="https://....../angular.js/1.6.1/angular.js"></script>
<script src="//.....org/1.2.20/angular-sanitize.min.js"></script>
</head>
<body ng-controller="parkingCtrl">
<h3 ng-bind-html="appTitle | safeHtml"></h3>
</body>
</html>

@reference_1_stackoverflow
@reference_2_docs.angularjs

Monday, May 22, 2017

strip HTML tags from string

var html = "<p>Some HTML</p>";
var div = document.createElement("div");
div.innerHTML = html;
var text = div.textContent || div.innerText || "";

cleanText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");

@reference_1_stackoverflow

Sunday, May 21, 2017

AngularJS: Insert HTML from a string || render HTML within double curly brace notation

Do you want to show the HTML (like <b>Hello</b>) or render the HTML (like Hello) ?

If you want to show it, the curly bracket is enough. However if the html you have has html entities (like <stuff) you need to manually unescape it, see this SO question.
If you want to render it, you need to use the ng-bind-html directive instead of curcly bracket (which, FYI, is a shortcut to the ng-bind directive). You need to tell Angular that the content injected into that directive is safe, using $sce.trustAsHtml.

See example of both cases below:

angular.module('test', []).controller('ctrl', function($scope, $sce) {
  $scope.HTML = '<b>Hello</b>';
  
  $scope.trust = $sce.trustAsHtml;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="ctrl">
  <div>Show: {{HTML}}</div>
  <div>Render: <span ng-bind-html="trust(HTML)"></span></div>
</div>

@reference_1_stackoverflow

HTML < ol > type Attribute

Syntax

Attribute Values

Value	Description
1	Default. Decimal numbers (1, 2, 3, 4)
a	Alphabetically ordered list, lowercase (a, b, c, d)
A	Alphabetically ordered list, uppercase (A, B, C, D)
i	Roman numbers, lowercase (i, ii, iii, iv)
I	Roman numbers, uppercase (I, II, III, IV)

@reference_1_w3schools

Saturday, May 20, 2017

Dependency Injection & Create custom service in AngularJS

angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);

@reference_1_angularjs.org

app.factory('<service>', ['$http', function(http) {
  var shinyNewServiceInstance;
  return shinyNewServiceInstance;
}]);

@reference_2_stackoverflow

Create custom service in AngularJS

@reference_3_youtube

send POST in angularjs with multiple params

@reference_1_stackoverflow
@reference_2_angularjs.org
@reference_3_stackoverflow

Wednesday, May 17, 2017

Cross-Site HTTP Requests

Requests for data from a different server (than the requesting page), are called cross-site HTTP requests.
Cross-site requests are common on the web. Many pages load CSS, images, and scripts from different servers.
In modern browsers, cross-site HTTP requests from scripts are restricted to same site for security reasons.
The following line, in our PHP examples, has been added to allow cross-site access.

header("Access-Control-Allow-Origin: *");

@reference_1_w3schools

Include Cross Domains

By default, the ng-include directive does not allow you to include files from other domains.
To include files from another domain, you can add a whitelist of legal files and/or domains in the config function of your application:

var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'https://tryit.w3schools.com/**'
    ]);
});

</script>

</body>

Be sure that the server on the destination allows cross domain file access.

@reference_2_w3schools

Saturday, May 13, 2017

AngularJS Tutorials

@reference_1_youtube
@reference_2_w3schools
@reference_3_youtube
@reference_4_angularjs.org

“shim” for AngularJS (& jQuery ) when using Require.js

The rule is pretty simple: if a library/script/package/plugin is AMD-aware, then you don't need a shim. (Actually, you must not use a shim for it.) If it is not AMD-aware, then you need a shim.
A library/etc is AMD-aware if it detects that an AMD loader is present and calls define to make itself known to the loader.
jQuery from about 1.8 onwards has not needed a shim because it calls define. Angular, on the other hand, does not call define.
To know whether a specific piece of code needs a shim, you can read its documentation or if the documentation is not clear on this, then you can check the source code for a call to define. For instance jQuery 1.11.0 has this code:

// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    });
}

How it looks like will vary from one case to the other but the basic think you want to look for is the check that define exists, is a function, has the amd property set and the call to define.
(Note that jQuery is a special case where they decided to hard code the name of the module in the define call (first parameter: jquery). Generally the name of the module won't be present in the define call but will be left for RequireJS to infer on the basis of the file name.)

@reference_1_stackoverflow

@reference_2_requirejs.org

Friday, May 12, 2017

Number.isNaN() & Polyfill

The Number.isNaN() method determines whether the passed value is NaN and its type is Number. It is a more robust version of the original, global isNaN().

Internet Explorer No support

Polyfill

Number.isNaN = Number.isNaN || function(value) {
    return typeof value === 'number' && isNaN(value);
}

// Or
Number.isNaN = Number.isNaN || function(value) {     
    return value !== value;
}

@reference_1_mozilla

Monday, May 8, 2017

Spread syntax or Spread operator ...

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.

Syntax

For function calls:

myFunction(...iterableObj);

For array literals:

[...iterableObj, 4, 5, 6];

@reference_1_mozilla_Spread_operator

Bonding arrays contained in an array of objects using the spread operator and initialValue

@reference_2_mozilla_Reduce

Rest parameters

@reference_3_mozilla_rest_parameters

Wednesday, May 3, 2017

getter & setter in Javascript

@reference_1_mozilla_getter

@reference_2_mozilla_setter

@reference_3_mozilla_Working_with_Objects

Javascript Videos

@reference_1_developphp

Tuesday, May 2, 2017

JavaScript Scope & 'this' keyword

There are also problems that we run into when dealing with the this value, for instance if I do this, even inside the same function the scope can be changed and the this value can be changed:

var nav = document.querySelector('.nav'); // <nav class="nav">
var toggleNav = function () {
  console.log(this); // <nav> element
  setTimeout(function () {
    console.log(this); // [object Window]
  }, 1000);
};
nav.addEventListener('click', toggleNav, false);

So what’s happened here? We’ve created new scope which is not invoked from our event handler, so it defaults to the window Object as expected.

@reference_1_toddmotto.com

An anonymous function this will refer to the window object on the global scope.

@reference_2_stackoverflow

this
@reference_3_mozilla

Thursday, May 25, 2017

Tuesday, May 23, 2017

Monday, May 22, 2017

Sunday, May 21, 2017

Syntax

Attribute Values

Saturday, May 20, 2017

Wednesday, May 17, 2017

Include Cross Domains

Saturday, May 13, 2017

Friday, May 12, 2017

Polyfill

Monday, May 8, 2017

Syntax

Bonding arrays contained in an array of objects using the spread operator and initialValue

Wednesday, May 3, 2017

Tuesday, May 2, 2017

About Me