Friday, August 19, 2016

Difference between ng-bind and expression

ng-bind not evaluate the html till the page is loading. If we use the expression {{expression}} then the html is evaluated and the values are flicked momentarily. Alternate to resolve this situation we can use ng-cloak. And put this css into css file.

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

Thursday, August 11, 2016

Provider in Angular JS

All the web applications that we build uses Object that collaborate to get things done. These objects need to be instantiated.In angular, these objects are instantiated and wired by injector service.

Injector creates two types of objects - services and specialize objects.

Services objects are those API's that are defined by developer.
Specialized objects are defined specifically by Angular API, for e.g. controllers, directives, filters or animations.

Now, we have to specify that how to create these objects. There are five ways to create these objects.
* Value * Factory * Services * Constant and last but not the least Provider.

So, Lets discuss all one by one. I'll start by provider first.

Provider: Provider is the core of all type. All other are just the extension over it.
Provider is the implementation of $get method. This method is same like as we use in Factory.
Provider is used where we set the application-wide configuration that must be instantiated before the application start.

When angular application is going to bootstrap, before creating all the services, angular instantiates all providers.
Provider's are accessible during configuration phase, because services are not accessible at that time.
After completion of configuration phase, interaction with provider is not allowed and service instantiation process gets started.

CRUD operation with XML file

This is the XML document:

<?xml version="1.0" encoding="utf-8"?>
<NewDataSet>
<Table>
    <Username>Ashutosh</Name>
    <EMail>test@xyz.com</Age>
</Table>
</NewDataSet>

To add new node in XML document.  

void AddUser()
    {
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load("User.xml");
            XmlElement subRoot = xmlDoc.CreateElement("Table");
            //UserName
            XmlElement appendedElementUsername = xmlDoc.CreateElement("Name");
            XmlText xmlTextUserName = xmlDoc.CreateTextNode("Ashutosh");
            appendedElementUsername.AppendChild(xmlTextUserName);
            subRoot.AppendChild(appendedElementUsername);
            xmlDoc.DocumentElement.AppendChild(subRoot);
            //Age
            XmlElement appendedElementAge = xmlDoc.CreateElement("Age");
            XmlText xmlTextAge = xmlDoc.CreateTextNode(25);
            appendedElementEmail.AppendChild(xmlTextAge );
            subRoot.AppendChild(appendedElementAge );
            xmlDoc.DocumentElement.AppendChild(subRoot);
            xmlDoc.Save("User.xml");
    }

To Update a particular node in XML document.

void UpdateUser()
    {  
        XDocument XMLDoc = XDocument.Load(XMLfile);

        IEnumerable<XElement> elem_list = from elem in XMLDoc.Descendants("Table")
                                          where elem.Element("Name").Value == "Ashutosh"
                                          select elem;

        XElement[] elem_array = elem_list.ToArray();
        foreach (XElement elem in elem_array)
        {
            elem.Element("Name").Value = "Ashutosh Sharma";
            elem.Element("Age").Value = "26";          
        }
        XMLDoc.Save("User.xml");
    }

To Delete a particular node from XML document:

void DeleteUser()
{
  XDocument xmldoc= XDocument.Load(XMLfile);
    XElement user= xmloc.Descendants("Table").FirstOrDefault(p => p.Element("Name").Value == "Ashutosh");

    if (user!= null)
    {
        user.Remove();
        xmldoc.Save("User.xml");
    }
}


Monday, August 8, 2016

Content Negotiation in ASP.NET Web API

Content negotiation is the process that describe the in which format the response is provide by Web API according to the request.

The HTTP specification (RFC 2616) defines content negotiation as “the process of selecting the best representation for a given response when there are multiple representations available.” The primary mechanism for content negotiation in HTTP are these request headers:
  1. Accept:Which media types are acceptable for the response, such as “application/json,” “application/xml,” or a custom media type such as "application/vnd.example+xml"
  2. Accept-Charset: Which character sets are acceptable, such as UTF-8 or ISO 8859-1.
  3. Accept-Encoding: Which content encodings are acceptable, such as gzip.
  4. Accept-Language: The preferred natural language, such as “en-us”.
The server looks for above HTTP request details. 

Advantage or Benefits of TypeScript


  1. Static type checking
  2. Similar to language like C#, JAVA, Scala
  3. Support ES6
  4. It offers support for the latest ECMAScript for future proposals.
  5. It support almost all the popular Javascript libraries like JQuery, Angular JS, Angular 2 etc.
  6. Typescript is the superset of Javascript.
  7. Its support typings that is highly productive.
  8. With the help of type checking we can static verify our code.
  9. Provide better intellisence
  10. Support class, interface and modules

Can we have more than one ng-app one page of Angular Js?

Yes, we can have more than one ng-app in one angular application. But the thing that we have to remember is, angular js bootstrap the first ng-app by default. if we want to bootstrap the another ng-app then we have to do it  explicitly by adding angular.bootstrap.

Note: You should not use the ng-app directive when manually bootstrapping your app. 


Eg: angular.bootstrap(document.getElementById("div1"),['myApp']);

Saturday, August 6, 2016

Events Propagation in Angular Js

In Angular JS events propagates in two ways, from parent to child or child to parent controller i.e. vise-versa.

To propagate event from parent to child we should use $broadcast.
To propagate event from child to parent we should use $emit.

Here is the plunker example.

https://plnkr.co/edit/?p=preview