Skip to main content

Posts

Showing posts from March, 2015

Angular 2 Compiler | What is Traceur compiler in Angular 2 ?

The Traceur is a JavaScript compiler. The Traceur compiler used to allow us to use the features from the future. The Traceur compiler is fully supported to ECMAScript (ES6) and ES.vNext also. The main goal of Traceur compiler is to inform the designs of new JavaScript features and also allow us to write the code in better manners and it also prefer, tell us to use design patterns. Now the days Traceur compiler are broadly used in Angularv2.0 because Angular v2.0 are fully used to ES5  and ES6. The output as given below link http://www.javascriptoo.com/traceur https://code.google.com/p/traceur-compiler/wiki/GettingStarted Thank you!

What is ECMAScript (ES6) in Angular 2?

The ECMAScript is known as now ES6. The ES6 is version 6. The ES6 is a scripting language and it developed by Ecma International org. The JavaScript is an implementation of ES6. The ES6 features are fully supported to latest browsers(chrome, Firefox etc.) Go to in detail  http://en.wikipedia.org/wiki/ECMAScript A basic simple example with live demo of Add two numbers using ES6 as given below.   let AddTwoNum = (num1,num2) => num1+num2;   console.log(AddTwoNum(4,3)); For the output go to link  http://www.es6fiddle.com/i8fi4ths/

data-ng-init angular

The " data-ng-init " are used to initialize the application data and it's also called to ng-init  and  does not create a new scope and it's used to evaluate an expressions in the current scope. The example angular array code as given below. [{name:'Anil Singh',city:'Noida, India'}, {name:'Sunil ',city:'UP India'}, {name:'code-sample.com',city:'www'}] The example HTML code as given below. < div data-ng-init ="details=[{name:'Anil Singh',city:'Noida, India'},{name:'Sunil ',city:'UP'},{name:'code-sample.com',city:'www'}]">         < ul >             < li data-ng-repeat ="detail in details">                {{ detail.name }} : {{ detail.city }}             </ li >         </ ul >     </ div > The full live code as given below. < !DOCTYPE html > < html > < head

HTML6 without Javascript

The HTML6  concept is going for Responsive single page apps without loading the JavaScript. for more detail go to below links. https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Mar/0071.html http://jaxenter.com/html6-proposal-for-single-page-apps-without-javascript-causes-scandal-115919.html The HTML6  code-sample look like 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 //Example HTML6 without JavaScript < DOCTYPE html> < HTML LANG=“en”> < HEAD > < FIXTURES lang=“xml”>      < model class=“MyCSSCalss”>          < resp stat=“satatusOK">              < article label=“lblOne” id=“1lb1">                  < headline >This is the Big News</ headline >                  < body > This is body area</ body >              </ article >          </ resp >      </

how to execute angular a multiple ng-app in sequence?

The AngularJs code-sample  Click for live demo result 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 //The angularjs code-sample.     var app1 = angular .module( 'myApp1' , []);      app1.controller( "app1Controller" , function ($scope) {        $scope.empApp1 = {          empName: 'Anil Singh'        };      });      var app2 = angular.module( 'myApp2' , []);      app2.controller( "app2Controller" , function ($scope) {        $scope.empApp2 = {          empDept: 'IT'        };      });      angular.element(document).ready( function () {        angular.bootstrap(document.getElementById( "idsapp2" ), [ 'myApp2' ]);      }); //The angularjs code-sample. var app1 = angular.module('myApp1', []); app1.controller("app1Controller", function($scope) { $scope.empApp1 = { empName: 'Anil Singh

foreach in angularjs 2

AngularJs 2.0 is an explicit templates binding. The example as given below. 1 2 3 4 5 < ul >    < template foreach #user [in]="users">    < li >{{user.name}}</ li >    </ template > </ ul > <ul> <template foreach #user [in]="users"> <li>{{user.name}}</li> </template> </ul> OR 1 2 3 4 5 < ul >    < li template = "foreach; #user; in=" users">    < h1 >{{user.name}}</ h1 >    </ li > </ ul > <ul> <li template="foreach; #user; in="users"> <h1>{{user.name}}</h1> </li> </ul> OR 1 2 3 4 5 < ul >    < li template = "foreach #user in users" >        {{user.name}}    </ li > </ ul > <ul> <li template="foreach #user in users">

Why Angular v2.0? Why not Angular 1.x+?

Every AngularJs developer little bit confused and ask to angular and other community why angularjs 2.0 ? why not angular 1.x+?  First app with Angular 2 and ES6 Integration of Angular 1 and Angular 2 What are major changes in Angular 2? New Features of Angular 2 What is ECMAScript ES6? What is Traceur compiler? Today's I attend ngConf/ng-conf meeting I asked same question and the community speaker explained in detail and finally I got my answer. The Answers are as given below In Angular v2.0, we are using classes more than in Angular v1.x+ and the ES6 has a better classes syntax than ES5. The Goal of Angular v2.0 it should be declarative. The   Syntax of Angular v2.0 are human-readable and human-writable. The Angular v2.0 deals with server data in form of a JSON and its is structural types on the JSON as well as on the Angular API. The Angular v2.0 will be written in ES6 and it compiled into ES5 using " traceur ". The Angular users can write your c

dynamically add treeview nodes in jQuery MVC 5

Hello everyone, I am going to share the code sample for how to dynamically add treeview nodes using jQuery . The code sample as given below. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 ( function () {          $( ".collapsible" ).live( "click" , function (e) {          e.preventDefault();              //This is get curent clicked items.          var self = $( this );                     //Check current data already loaded or not?          var isLoaded = $(self).attr( 'dataLoaded' );                      // If return true, data is already loaded then write below code.           // If return false, data not loaded then write below code.          if (isLoade

angularjs $http synchronous call

Hello everyone, I am going to share the Promise Concept of AngularJs. The Promise Concept provide the synchronous call facility. The demo example as given below. click for plnker demo AngularJs code-sample 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 var app = angular.module( "promisesApp" , []);     app.controller( "promisesCtrl" , function ($scope, $q) {         var promise1 = $q.defer();         var promise2 = $q.defer();         //This is promise1.         promise1.promice.then( function (value) {           // TODO : success code custom login here.         }, function (value) {           // TODO : error code custom login here.         });         //This is promise2.         promise2.promice.then( function (value) {           // TODO : success code custom login here.         }, function (value) {