Updates from March, 2018 Toggle Comment Threads | Keyboard Shortcuts

  • shashankgee 7:05 am on 21 Mar 2018 Permalink | Reply  

    animate.css 

    Here you can have Animation classes you can use once import the animate.css file into your application

     

    https://daneden.github.io/animate.css/

    Advertisements
     
  • shashankgee 9:42 am on 8 Mar 2018 Permalink | Reply  

    angular crud application 

    1. https://marinantonio.github.io/angular-mat-table-crud/
    2. https://github.com/marinantonio/marinantonio
     
  • shashankgee 8:17 am on 5 Mar 2018 Permalink | Reply  

    How To Handle XSS or CSRF Attacks in Angular 4 ? 

    https://www.code-sample.com/2017/09/angular-4-handle-xss-csrf-attacks.html

     
  • shashankgee 6:21 am on 21 Feb 2018 Permalink | Reply  

    How browser works 

    please refer the below link. it will give you most of the information.

     

    https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

     
  • shashankgee 1:35 pm on 22 Dec 2017 Permalink | Reply  

    ng-strict-di 

    Sanity checking with ng-strict-di

    The ng-strict-di directive is new and extremely simple to understand. When declaring the parent DOM node for your application, if ng-strict-di is included in that element, functions without the minification-safe dependency injection syntax will fail to execute.

    How to do it…

    Using the ng-strict-di directive is as simple as adding an extra attribute to your ng-app node, as follows:

    (app.js)
    
    angular.module('myApp',[])
    .controller('Ctrl', function($scope) {});
    
    (index.html)
    
    <div ng-app="myApp" ng-strict-di>
      <div ng-controller="Ctrl"></div>
    </div>

    If you try to load the page in your browser, you will be greeted with the following error:

    Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked
     
  • shashankgee 12:26 pm on 30 Nov 2017 Permalink | Reply  

    Must see Examples 

     

    W3 schools provide most important web based functionalities please see the below link

    https://www.w3schools.com/howto

     
  • shashankgee 10:18 am on 22 Nov 2017 Permalink | Reply  

    Custom Directive Example 

     

    Please Refer

    https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

    
    var myModule=angular.module('myModule',[]);
    
    myModule.controller('myController',['$scope',function($scope){
    
    &amp;nbsp;
    
    $scope.name1="Shashank";
    $scope.country="India";
    $scope.email="shahsank.gee@gmail.com"
    
    $scope.count=1;
    
    $scope.directiveArry=[];
    $scope.directiveArry.length=$scope.count;
    
    &amp;nbsp;
    
    $scope.get=function fun(){
    $scope.directiveArry=[];
    $scope.directiveArry.length=$scope.count;
    
    console.log("Function from the controller");
    }
    
    &amp;nbsp;
    
    }]);
    
    myModule.directive('myDirective',function(){
    
    return {
    restrict : 'EA',
    scope:{
    myname: '@myName',
    mycountry: '@countryName', //one way data binding
    twoWay: '=twoWay',
    funBinding:'&amp;amp;'
    
    },
    template: '&amp;lt;div &amp;gt;&amp;lt;h3&amp;gt;From Directive : &amp;lt;/h3&amp;gt; Name: &amp;lt;input type="text" ng-model="myname" /&amp;gt; &amp;lt;br /&amp;gt;' +
    'Country: {{mycountry}} '+
    '&amp;lt;h3&amp;gt;Two way Data - Binding &amp;lt;/h3&amp;gt;'+
    'email: &amp;lt;input type="text" ng-model="twoWay"&amp;gt;'+
    'call the function from the Parent controller: &amp;lt;button ng-click="funBinding()"&amp;gt;get from Parent&amp;lt;/button&amp;gt;&amp;lt;/div&amp;gt;',
    link:function($scope,element,attribute){
    
    $scope.name="Form Directive ";
    element.bind('mouseenter',function(){
    element.css('background-color', 'yellow');
    });
    element.bind('mouseleave',function(){
    element.css('background-color', 'white');
    });
    
    }
    }
    
    })
    
    

     

    
    &amp;lt;!DOCTYPE html&amp;gt;
    &amp;lt;html&amp;gt;
    &amp;lt;head&amp;gt;
    &amp;lt;title&amp;gt;Directive Example&amp;lt;/title&amp;gt;
    &amp;lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script src="test.js" &amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;link href="style.css" rel="stylesheet"&amp;gt;&amp;lt;/link&amp;gt;
    &amp;lt;/head&amp;gt;
    &amp;lt;body ng-app="myModule"&amp;gt;
    
    &amp;lt;div ng-controller="myController"&amp;gt;
    
    From The controller: &amp;lt;input type="text" ng-model="name1"/&amp;gt; &amp;lt;br /&amp;gt;
    email: &amp;lt;input type="text" ng-model="email"/&amp;gt; &amp;lt;br /&amp;gt;
    How many Directives : &amp;lt;input type="number" ng-model="count" ng-change="get()" min=1 /&amp;gt;
    {{count}}
    
    &amp;lt;div ng-repeat="c in directiveArry track by $index"&amp;gt;
    &amp;lt;div class="dir" my-directive
    my-name="{{name1}}"
    country-name="{{country}}"
    two-way="email"
    fun-binding="get()"&amp;gt;
    &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
    
    &amp;nbsp;
    
    &amp;lt;/div&amp;gt;
    
    &amp;nbsp;
    
    &amp;lt;/body&amp;gt;
    &amp;lt;/html&amp;gt;
    
    
     
  • shashankgee 12:17 pm on 16 Nov 2017 Permalink | Reply  

    Angular JS All Examples 

    Please refer to this site:

     

    http://www.angularjshub.com/examples/modules/dependency/

     
  • shashankgee 9:49 am on 16 Nov 2017 Permalink | Reply  

    what are providers in AngularJs 

    https://www.codeproject.com/Tips/1161598/Providers-in-AngularJS-Simply-Explained

    An angular application uses services ($http$location, etc.).

    It’s sometimes necessary to configure these services before using them. For example, the $location service has two modes of execution: the “normal” mode, and the “html5” mode. $httpmight need some headers configured before even sending its very first HTTP request.

    To configure these services, Angular uses providers. Providers are objects whose role is to accept configuration options during the configuration phase, and then, once everything is set up, to create the unique instance of a service.

    So, to configure the $location service, you use its $locationProvider during the configuration phase. Once that phase is done, Angular, during the run phase, will call the provider’s $get()method, which will create and return the $location service (hence the name “provider”).

     

    Ex

    
    // Definition of a PersonManager object
    var PersonManager = function ()
    {
    var fullNameSeparator = " ";
    
    return {
    setFullNameSeparator: function (separator)
    {
    fullNameSeparator = separator;
    },
    $get: function (person)
    {
    return {
    getPersonFirstName: function ()
    {
    return person.firstName;
    },
    getPersonLastName: function ()
    {
    return person.lastName;
    },
    getPersonFullName: function ()
    {
    return person.firstName + fullNameSeparator + person.lastName;
    }
    };
    }
    };
    };
    
    // Initialization of the "mainModule"
    angular.module("mainModule", [])
    // Register an object instance as a value and name it "person"
    .value("person", {
    firstName: "",
    lastName: ""
    })
    // Register a provider with person management functions and name it "personManager".
    // This provider requires the "person" object instance registered as a value in the
    // "mainModule" and that instance is passed to the constructor through Dependency Injection
    // simply writing "person" (the name of the registered value) as parameter name.
    .provider("personManager", PersonManager)
    // Initial configuration of "mainModule". To get an instance of the "personManager" provider
    // we simply add a parameter to the configuration function with the "Provider" suffix after
    // the name of the registered provider (for the registered "personManager" provider instance
    // we must write "personManagerProvider").
    .config(function (personManagerProvider)
    {
    personManagerProvider.setFullNameSeparator("*");
    })
    // The run phase of the "mainModule" could be useful for any initialization procedure.
    // We get a reference to the "person" object simply specifying it as a parameter in the
    // "run" function.
    .run(function (person)
    {
    person.firstName = "John";
    person.lastName = "Doe";
    })
    // Get the "person" registered object instance and the "personManager" service
    // instance (created by the "PersonManager" provider) through Dependency Injection.
    .controller("mainController", function ($scope, person, personManager)
    {
    // Set variables on the scope to reference the "person" object instance
    // and the "personManager" service from the HTML template.
    $scope.personInstance = person;
    $scope.personManagerInstance = personManager;
    });
    
    
     
  • shashankgee 4:22 pm on 6 Nov 2017 Permalink | Reply  

    Angular Js Interview Questions 

    1 )What is Angular Js?

    executes the JavaScript page which can change the DOM dynamically. Rendering engine will render modified DOMand they have single execution thread per Tab.

    2)  why AngularJs?  

    To avoid the tight colupling of HTML and javaScript.

    3)  what is the difference between $apply and $digest?  

    • when we use normal Js functions or Jquery functions we need to call $apply or $digest manually based on the  positions of the scope or rootScope variables.
    • $apply is on Module level
    •  $digest is on Controller level
    • $apply and $digest calls $watch internally

    Reference: https://www.youtube.com/watch?v=i2XqAzEMO4I

    4) what is $watch?

    •  $apply and $digest calls $watch internally
    • The object of the $watch(watches the scope variables or rootScope variables)  is Two-way data binding.
    •  $watch watches the scope variables or rootScope variables if any updates on scope variables whether it’s on Model or view it will update the variable in both model and view.
    $watch(function(){ 
    }, function(newValue,oldValue){ 
    
    });   //to watch service variables this is the format
    II) $scope.myVar="blahblah";   
    $watch(myvar,function(newValue,oldValue){
    });  
    //to watch directly scope variable.    
    
    

    5) can we put ng-model directive for all elements?

    •  only for input types and textArea and select boxes.(Generally, all elements which accept input from the user)

    we cant put ng-model for this type of divs. <div contentEditable=true> attribute.

    /(contentEditable=true means div with editing options)

    6)  what are directives? 

    directives are some sort of sticky attachments to the HTML elements or DOM elements

    7)  What is normalization in AngularJs?

    AngularJS normalizes an element’s tag and attributes name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
    The normalization process is as follows:
    Strip x- and data- from the front of the element/attributes.Convert the:, -, or _-delimited name to camelCase.For example, the following forms are all equivalent and match the ngBind directive.

     ng-model
       ng-bind
       ng:bind
       ng_bind
       data-ng-bind
      x-ng-bind

    These all are technically same. But for valid HTML5 attribute its better to write data-ng-bind. (data- in front of the attribute)

    8) whats the difference between 

    var app=angular.module('app',[]);
    i)  app.controller('myCtrl',function($scope)){};

    if u don’t want to compress your code above code will be used.

    AND

    ii) app.controller('myCtrl',['$scope',function($scope){ }]);

    if u want to compress your code its better to write like above. so that AngularJs knows first parameter is $scope. we must pass $scope as first parameter to controller function. (compress tools available in onlines so they replace $scope variable)
    9) what is $location?
    $location is to riderect to some other page (changes the URL )

    window.location.hash="#/dashboard"  or we can use 
    
    $location.path('/dashboard')   
    // This does n't require any hash # angular directly knows.

    10) what are services in angularjs?
    Services are singleton in angularJs. only one instance will be created.

    which means,  from second time onwards instead of running the service again, previous instance referece will be passed.

    ex:
    var app=angular.module("mainApp",[]); 
    app.service('random ',function(){ 
    var num=Math.floor(Math.random()*10); 
    this.generate=function(){    
    return num; 
    }
    )};

    11)what are factories in AngularJs? 

    Factories also Singleton in AngularJs Generally in factory instead of using “this”  keyword we will use objects.

    ex:  var app=angular.module("mainApp",[]); 
    app.factory('random ',function(){ 
    var obj={}; 
    var num=Math.floor(Math.random()*10); 
    obj.generate=function(){   
     return num; 
    } 
    return obj; 
    });  
    
    

    12) what are providers?  

    https://www.codeproject.com/Tips/1161598/Providers-in-AngularJS-Simply-Explained

    Providers are basically used to alter some portion of your object before making it application wide available. And you can do that from the .config().

    In a provider, whatever property you assign with ‘this’ keyword, or is contained  in the return block, would be available for the config to manually ‘override’ (edit) you can say.    providers are head of the services and factories.

    “this” keyword also can be used in the Providers.services and factories come under providers but providers are little more control than services and factories.

    var app=angular.module("mainApp",[]); 
    app.provider('date',function(){ 
    return {   
    $get: function(){       
    return {     
    showDate: function(){      
    return new Date().getHours(); }   
    }      }  }}          
    (or)    
    
    app.provider('randomProvider',function(){   
    this.m1="From providers";   
    this.$get: function(){      
     return {        
    message: this.m1;}
    }  }}

    13) what is app.config();  ?
    In config, we can’t access directives, services , factories but providers. (we can only access providers)
    Provider suffix should be passed to config function.     ex:randomProviderProvider

    ex:  app.config(function(dateProvider){
    };

     14) what is event.target ?   

    event.target is on whick element you are doing events .      for ex:

            $scope.f1=function(){
    console.log(event.target);  //which will show entire p element.
    }

    15)  what is localStorage?

    localStorage is basically a storage area in browser and later we can retrieve the data.    and in localStorage we can store the data in the format of String so that we have to convert our   data.      var arr=[1,2,3]    like JSON.Stringify(arr);

    var fromLStorage=localStorage[‘arr’];

    and while retrieving JSON.Parse(fromLStorage);

    16)  what are custom directives?

    app.directive(‘myFirstDirective’,function(){       return{     template:     link: linkFunction restrict: ‘EA’ scope: true|false  }    })

    17)  what is the difference between the ngRoute and uiRoute?  

    https://www.youtube.com/watch?v=lGhc8E-L2G0   

    1)  ngRouter uses $routeProvider       uiRouter uses $statePovider

    2) ngRouter no support for multiple views    uiRouter uses multiple views (nested view) and we can also have nested states. and availablity of controllers and scopes between nested states

    ex: var app=angular.module("app",[ui.router]); 
     app.config('$statePovider', function($stateProvider){
     $statePovider.state('firstMsg',
    { url: '/first', 
    templateUrl:'first.html',
    controller: 'firstController'      
    });
    });

    (More …)

     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel