IT Fashion: javascript

Showing posts with label javascript. Show all posts

Monday, July 17, 2017

Circular Reference in Javascript & Java

@reference_1_stackoverflow
Example of a circular reference in Javascript?

@reference_2_stackoverflow
How does Java Garbage Collection work with Circular References?
@reference_3_stackoverflow
Circular References in Java

Wednesday, July 5, 2017

setTimeout(..., 0)

Question: What does the following code print?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

@reference_1_github

A:
one
three
two

add - Currying

Question: How would you make this work?

add(2, 5); // 7
add(2)(5); // 7

@reference_1_github.com

function add_(a){
    return function(b){
        return a + b;
    };
}
function add(a){
   var acc = 0;
   var sub = function(b){
       if(b === undefined)
         return acc;
       else if(!isNaN(b))
         acc += b;
       return sub;
   };
   return sub(a);
}

@reference_2_codeburst.io

Monday, June 5, 2017

How to connect one model variable to mutiple html elements using angularjs data binding?

@reference_1_stackoverflow
How to connect one model variable to mutiple html elements using angularjs data binding?

@reference_1_toptal
Top 18 Most Common Mistakes that AngularJS Developers Make

Common Mistake #2: Not Having a Dot In There

You probably have read that if you were not having a dot in your ng-model, you were doing it wrong. When it regards inheritance, that statement is often true. Scopes have a prototypal model of inheritance, typical to JavaScript, and nested scopes are common to AngularJS. Many directives create child scopes such as ngRepeat, ngIf, and ngController. When resolving a model, the lookup starts on the current scope and goes through every parent scope, all the way to $rootScope.
But, when setting a new value, what happens depends on what kind of model (variable) we want to change. If the model is a primitive, the child scope will just create a new model. But if the change is to a property of a model object, the lookup on parent scopes will find the referenced object and change its actual property. A new model would not be set on the current scope, so no masking would occur:

function MainController($scope) {
  $scope.foo = 1;
  $scope.bar = {innerProperty: 2};
}

angular.module(‘myApp’, [])
.controller('MainController', MainController);

<div ng-controller=“MainController">
  <p>OUTER SCOPE:</p>
  <p>{{ foo }}</p>
  <p>{{ bar.innerProperty }}</p>
  <div ng-if=“foo”> <!— ng-if creates a new scope —>
    <p>INNER SCOPE</p>
    <p>{{ foo }}</p>
    <p>{{ bar.innerProperty }}</p>
    <button ng-click="foo = 2”>Set primitive</button>
    <button ng-click=“bar.innerProperty = 3”>Mutate object</button>
  </div>
</div>

Clicking the button labelled “Set primitive” will set foo in the inner scope to 2, but will not change foo in the outer scope.
Clicking the button labelled “Change object” will change the bar property from the parent scope. Since there is no variable on the inner scope, no shadowing will happen, and the visible value for bar will be 3 in both scopes.
Another way to do this is to leverage the fact that the parent scopes and the root Scope are referenced from every scope. The $parent and $root objects can be used to access the parent scope and $rootScope, respectively, directly from the view. It may be a powerful way, but I am not a fan of it due to the problem with targeting a particular scope up the stream. There is another way to set and access properties specific to a scope - using the controllerAs syntax.

@reference_3_itfashion4u
AnularJS 'limitTo' filter inside/outside div element with 'ng-if' attribute

AnularJS 'limitTo' filter inside/outside div element with 'ng-if' attribute

The 'ng-repeat' limitTo filter won't work unless you remove the ng-if='true' attribute or put the <ul> list inside div element.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="namesCtrl">

<div ng-if='true'>

<p>Type a letter in the input field:</p>

<p><input type="number" ng-model="test"></p>
</div>
<ul>
<li ng-repeat="x in names | limitTo:test">
    {{ x }}
</li>
</ul>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

<p>The list will only consists of names matching the filter.</p>
</body>
</html>

@reference_1_w3schools
@reference_2_youtube

@reference_3_itfashion4u
How to connect one model variable to mutiple html elements using angularjs data binding?

Sunday, June 4, 2017

< input type=“number” > not working in IE10

IE doesn't have support for input type="number" but you can use a polyfill to make it work.

Here is the solution : http://html5please.com/#number

@reference_1_stackoverflow
<input type=“number”> not working in IE10

Showing Spinner GIF during $http request in angular

@reference_1_stackoverflow
Showing Spinner GIF during $http request in angular

@reference_2_stackoverflow
Delay loading data in Angular JS

Use this 'ng-cloak' to avoid the undesirable flicker effect caused by the html template display

What you are looking for is ng-cloak.
You have to add it like this:

<body class="{{ bodyClass }}" ng-cloak>

Edit:
It is also advisable to put the snippet below into your CSS file, according to docs.

"For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application."

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

@reference_1_stackoverflow
AngularJS strategy to prevent flash-of-unstyled-content for a class

@reference_2_angularjs.org
ngCloak - directive in module ng

* @reference_3_stackoverflow

AngularJS: How to prevent “code flash” in page while loading

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

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