Easy Code Stuff: November 2015

How To Use AngularJS Expression And Variables

In AngularJS, Expressions Use To Bind Data Just Like "ng-bind". Its Simply Written Inside The Double Braces. These Expressions Are Same As JavaScript Expressions. You Can Use Variables, Operators And Literals.

Lets Write Simple Expression To Output The Value Of "4 + 5".

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    <p>
        4 + 5 = {{ 4 + 5 }}
    </p>
</body>
</html>

If You See This In Browser You Will Get The Following Output.

4 + 5 = 9

Lets See How We Can Use Variables In Expressions. In Order To Do That Lets Use "ng-init" To Initialize Few Variables. Normally You Don't Need To Do This. Because You Will Get Variables And Objects Through Controllers. These Variables Are Just Like JavaScript Variables. Now Lets See How We Can Create Variables.

This Is How We Create Numbers In AngularJS.

1	ng-init="Quantity=2;Price=100"

And This Is How We Create Strings In AngularJS.

1	ng-init="firstName='Nifal';lastName='Nizar'"

So Lets Use These In Our Expressions.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="FirstName='Nifal';LastName='Nizar';Quantity=2;Price=100">
        <span>Customer Name: {{ FirstName+ " " + LastName}}</span>
        <br />
        <span>Invoice Total: {{ Quantity * Price}}</span>
    </div>
</body>
</html>

If you view this in a browser you will get the below output.

Customer Name: Nifal Nizar
Invoice Total: 200

Hope You Had Good Knowledge About AngularJS Expressions And Variables.

Check My Next Article About AngularJS Repeat And Filters.

Writing XML With The XmlWriter In C#

In This Article Ill Explain About The XML Writer In C#. Lets See First How Our Xml Going To Be.

<?xml version="1.0" encoding="utf-8"?>
<Students>
   <Student>
      <FirstName>Nifal</FirstName>
      <LastName>Nizar</LastName>
      <Age>25</Age> 
   </Student>
   <Student>
      <FirstName>Dinesh</FirstName>
      <LastName>Selvachandra</LastName>
      <Age>24</Age>
   </Student>
</Students>

I Have Created A Simple Console Application.

using System;

namespace XML_Writer
{
    class Program
    {
        static void Main(string[] args)
        {
            
        }
    }
}

In Order To Use "XmlWriter" We Need To Import The "System.Xml".
Lets Import And Start Using It.

Now Create An Object Of "XmlWriter" Class With The File Location As You Wish To Keep The Xml File. Its Better To Keep The Keep The File Path In A Variable. Normally In Large Systems It Comes From "Web.Config" File.

1 2	string xmlPath = "D:\\Students.xml"; using (XmlWriter xmlWriter = XmlWriter.Create(xmlPath))

Now Lets Start The Code To Write. First You Should Call The "WriteStartDocument()" Method To Start Writing.

1	xmlWriter.WriteStartDocument();

According To Our Above Xml We Have Parent Node Call "Students". Then In Side That We Have Two Student Nodes.

To Create A Element Use The "WriteStartElement()" Method And Pass The String Parameter Into Which You Want To Be Your Element.

1	xmlWriter.WriteStartElement("Students");

To Create A Element String Use The "WriteElementString()" Method And Pass Two String Parameters Which Are Going To Be Your Element And Element Value.

1	xmlWriter.WriteElementString("FirstName", "Nifal");

When Your Writing Always Make Sure Your In The Correct Node Element And To Close All The Element Nodes. In Order To Close The Element Node Use The "WriteEndElement()" Method.

1	xmlWriter.WriteEndElement();

Finally Close The Document.

1	xmlWriter.WriteEndDocument();

Lets Have A Look On Full Code Now.

using System;
using System.Xml;

namespace XML_Writer
{
  class Program
    {
      static void Main(string[] args)
      {
        string xmlPath = "D:\\Students.xml";
        using (XmlWriter xmlWriter = XmlWriter.Create(xmlPath))
        {
           xmlWriter.WriteStartDocument();

           xmlWriter.WriteStartElement("Students");

           xmlWriter.WriteStartElement("Student");
           xmlWriter.WriteElementString("FirstName", "Nifal");
           xmlWriter.WriteElementString("LastName", "Nizar");
           xmlWriter.WriteElementString("Age", "25");
           xmlWriter.WriteEndElement();

           xmlWriter.WriteStartElement("Student");
           xmlWriter.WriteElementString("FirstName", "Dinesh");
           xmlWriter.WriteElementString("LastName", "Selvachandra");
           xmlWriter.WriteElementString("Age", "24");
           xmlWriter.WriteEndElement();

           xmlWriter.WriteEndElement();

           xmlWriter.WriteEndDocument();
        }
      }
   }
}

Hope You Enjoyed It.

My First AngularJS Application

AngularJS is a JavaScript Library which helps us to create a single page application very easily using data binding technology. To start learning Angular, you should have good knowledge about JavaScript and JQuery. One thing you need to understand is this is not an alternative for JQuery or anything. It is another data binding framework such as KnockoutJS.

First of all to start download the AngularJS Library from their website or else you can reference to the online library which is shown below. But make sure you always reference to a latest stable version of it.

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Initially to start first take a simple idea about following AngularJS directives.

ng-app : This defines the AngularJS application.
ng-model : This binds the value of HTML control to the AngularJS application data.
ng-bind : This binds the AngularJS application data to the HTML controls.

Lets Start Developing Our Simple AngularJS Application. In This Application Ill Have A Text Field To Enter The Name. The Text Which I Enters Will Come With "Hello ".

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    Name: <input type="text">
    <br/>
  </body>
</html>

Now I Should Tell Angular To Treat This Page As An Angular Application. In-order To That Use The "ng-app" Directive. As We Are In The Begining Of The Application I Will Define It In My <Body> Tag.

If You Want Give An Application Name To It. But It's Not Important Right Now. Because We Wont Be Doing All Controllers And Stuff In This Article. If You Want Make It Like HTML5 Attribute.

Use Any Of The Following Ways To Define You Application.

1	<body ng-app>

1	<body ng-app="">

1	<body data-ng-app="">

Now Lets Define A Model For The Name.

1	Name: <input type="text" ng-model="name">

You Can Use Any Name For The Model. But In The Application You Have To Use The Same Model Name. So Give A Meaningful Name.Lets Bind The Data To A Tag.

1	<span ng-bind="name"></span>

Lets See The Full Code Now.

Name:

Now Run And Happy.

Hope You Had Good Start With AngularJS.

Check My Next Article Regarding AngularJS Expressions And Variables.

Easy Code Stuff

Nov 28, 2015

How To Use AngularJS Expression And Variables

Writing XML With The XmlWriter In C#

My First AngularJS Application

JWT Token Decode Using Jquery