AngularJS filter to Translate input and replace variable separately afterwards into the translated input

Translate input and replace the variable afterwards on the string with variable placeholder ie. [variable].

First create AngularJs filter fiel called translate-input-var-and-replace.js and save with below content:

/* Translate input and replace the variable afterwards on the string with variable placeholder ie. [variable]. */
myapp.filter('translateInputWithVarReplace', ['$filter', function($filter) {
    return function(input, replaceVariable) {
        input = $filter('translate')(input);
        return input.replace(RegExp(/\[(.*?)\]/g), replaceVariable);
    };
}]);

Usage:

// The 'translated_string' should have the value containing the [variable] in the string. 
// translated_string = 'There will be [variable] people watching this movie.';

 var output = $filter('translateInputWithVarReplace')('translated_string', '545');

Expected Output:

There will be 545 people watching this movie.

Merging two or more JavaScript Objects using AngularJS

Please use below steps to merge two or more JavaScript Objects using AngularJS

// Object one
var jsObjectA = {title:'Buddha is born in Nepal', famous:'Gautum Buddha', country:'Nepal', district:'Bhirawa'};

// Object two
var jsObjectB = {religion:'Buddhism', zone:'Lumbini', district:'Kapilvastu'};

// Merging above two objects
var mergeObject = angular.extend({}, jsObjectA, jsObjectB); 

Expected Output:

{title:'Buddha is born in Nepal', famous:'Gautum Buddha', country:'Nepal', religion:'Buddhism', zone:'Lumbini', district:'Kapilvastu'};

AngularJS String Replace filter in the Template File

Please find follow the below steps to replace the string on the Template file using AngularJS filter:

1. Create the filter file called string-replace.js and add the following code.

myapp.filter('stringReplace', [ function() {
    return function(input, search, replace) {
        input = input.split(search);
        
        var x;
        var result = '';
        var prefix = '';
        for (x in input ) {
            result += prefix + input[x];
            prefix = replace;
        }

        return result;
        //return input.replace(search, replace);
    };
}]);

2. Then, in html template file, adopt the below example to use the filer.

{{your_string_variable_here | stringReplace:'searchParameterHere':'replaceParameterHere'}}

Example:

{{"GLOBAL_WARMING_NEEDS_TO_CONTROL_BY_EVERYONE" | stringReplace:'_':'-'}}

Output: GLOBAL-WARMING-NEEDS-TO-CONTROL-BY-EVERYONE

Resolving the issue with Gulp "Warning: gulp version mismatch:"

If you are getting the following types error:

[14:32:54] Warning: gulp version mismatch:
[14:32:54] Global gulp is 3.9.1
[14:32:54] Local gulp is 3.9.0
[14:32:56] Using gulpfile C:\xampp\htdocs\myproject\gulpfile.js
[14:32:56] Starting 'default'...
[14:32:56] Starting 'scripts'...

To resolve the issue,
First, go to your project root folder then run below two commands

npm update gulp -g 
npm update gulp

List of Laravel Artisan Shortcuts (Alias) for Windows and MacOS

I would like to share the list of command alias I have created on my local to minimise the keystrokes with the Team.

Please go to the project root location via command line and just copy the below line (one line string) and run it:

alias cda="composer dump-autoload"; alias ci="composer install"; alias cu="composer update"; alias bi="bower install"; alias bu="bower update"; alias gi="gulp install"; alias ni="npm install"; alias pa="php artisan"; alias pam="php artisan migrate"; alias pamr="php artisan migrate:rollback"; alias pads="php artisan db:seed"; alias pades="php artisan db-exporter:seed"; alias pamm="php artisan make:migration"; alias pamc="php artisan make:controller"; alias pammd="php artisan make:model"; alias t="phpunit"; alias dat="php artisan app:droptables"; alias ga="git add"; alias gaa="git add ."; alias gc="git commit -m"; alias gp="git push"; alias gs="git status"; alias gl="git log"

The detail of the above string shortcut is below (if you want other way, feel free to change it with your comfort):

#Composer
alias cda="composer dump-autoload"
alias ci="composer install"
alias cu="composer update"

# Bower
alias bi="bower install"
alias bu="bower update"

# Gulp
alias gi="gulp install"

alias ggw="gulp && gulp watch"
# NPM
alias ni="npm install"

# Laravel
alias pa="php artisan"
alias pam="php artisan migrate"
alias pamr="php artisan migrate:rollback"
alias pads="php artisan db:seed"
alias pades="php artisan db-exporter:seed"

alias pamm="php artisan make:migration"
alias pamc="php artisan make:controller"
alias pammd="php artisan make:model"

alias t="phpunit"

# Laravel Custom
alias dat="php artisan app:droptables"

# Git
alias ga="git add"
alias gaa="git add ."
alias gc="git commit -m"
alias gp="git push"
alias gs="git status"
alias gl="git log"

Declare or concatenate two variables as a single variable in view (HTML) file using AngularJS

To Concatenate the two variable value using delimiter/underscore(_) in HTML using AngularJS

To print the same variable inline

{{new_variable}}

To Sum up and print the same variable inline, however for this, both variable_1 and variable_2 must have numerical values

{{new_variable}}

AngularJS DataTable Plugin Rending the HTML with Angular Event Tigger such as ng-click

To make the Angular action trigger from the DataTable plugin, you just need add the below code within the loadDataTable Function.

// Define this function first.
function createdRow(row, data, dataIndex) 
{
 // Recompiling so we can bind Angular directive to the DT
 $compile(angular.element(row).contents())(scope);
}

// Then, add the below line with the "DTOptionsBuilder.newOptions()"
.withOption('createdRow', createdRow);

Please find the sample complete function with above added code.