Getting started with AngularJS.

By // 4 comments:

Getting started with AngularJS.

In this article I am going to demonstrate about how to create basic AngularJS application.
In this demo application our main concern will be on creating first AngularJS application using module, Directives, Expressions.

  • What is Angular JS?

A client-side JavaScript Framework for adding interactivity to HTML.

If you’re using JavaScript to create a dynamic website,
Angular is a good choice.
•Angular helps you organize your JavaScript
•Angular helps create responsive (as in fast) websites.
•Angular plays well with jQuery
•Angular is easy to test

  • Directives

A Directive is a marker on a HTML tag that tells Angular to run or reference some JavaScript code.

  • Modules

•Where we write pieces of our Angular application.
•Makes our code more maintainable, testable, and readable.
•Where we define dependencies for our app.

var app = angular.module('company', []);

In above line angular is ref of AngularJS.
"company" is application name.
[] show dependencies of application.

  • Controllers

Controllers are where we define our app’s behaviour by defining functions and values.

app.controller('EmployeeController', function () {
    this.employee = gem
});

var gem = {
    name:           "Rohit Mane",
    salary:         20000.95,
    address:        "Pune"   }
           
In above case "EmployeeController" is controller name.
employee is one object we assigning some vales to that object.


Access that values in index.html using ng-app and ng-controller:

<div ng-app="company">
    <p>
        {{"hello" + " you"}}
    </p>
    <div ng-controller="EmployeeController as emp">
        <h1>
            {{emp.employee.name}}
        </h1>
        <h2>
            ${{emp.employee.salary}}
        </h2>
        <p>
            {{emp.employee.address}}
        </p>
    </div>
</div>

Step-wise procedure to create First AngularJS application: Using Visual Studio
Step 1 : I am using VS2015 to create application.






Step 2 : Click on File > New Project > ASP.Net Web Application



Step 3 : Select MVC Template and click OK.




Step 4 : After creating project its showing this hierarchy.


Step 5 : Open Index.html in Home folder comment that code excluding first 3 lines.



Step 6 : Add angular.min.js and app.js files in script folder


Step 7 : Add references of that files in Layout.html file in View>Shared path.

    <script type="text/javascript" src="~/Scripts/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
Step 8 : Add following code in app.js file.
var app = angular.module('company', []);
app.controller('EmployeeController', function () {
    this.employee = gem
});

var gem = {
    name:           "Rohit Mane",
    salary:         20000.95,
    address:        "Pune"
} 

Step 9: Add following code in Index.html file.
<div ng-app="company">
    <p>
        {{"hello" + " you"}}
    </p>
    <div ng-controller="EmployeeController as emp">
        <h1>
            {{emp.employee.name}}
        </h1>
        <h2>
            ${{emp.employee.salary}}
        </h2>
        <p>
            {{emp.employee.address}}
        </p>
    </div>
</div>
To test the process you can build and run an application.
Execute it using Ctrl + Shift + W or right click on application and click view in browser. I hope it works fine. 

Output :

Thanks for reading this article. If you have any queries and suggestion please feel free to ask me and also your valuable comments are important for me which motivates me for writing articles.


Compare Data Tables Using LINQ Union, Except and Intersect

By // No comments:
In this post i am going to explain about how to compare two datatables using  Union, Except and Intersect LinQ operators.
Compare Data Tables Using LINQ Union, Except and Intersect

Asp.Net - How to Create Dynamic Pages & Url With C#.Net,VB.Net

By // No comments:
In this tutorial i am going to explain how to create dynamic pages with unique urls for each page. Before proceeding to explain the process of creating dynamic page i would like to explain what is mean by dynamic page so that you will understand better.

Asp.Net Serialization & Deserialization with C#.Net and VB.Net

By // No comments:
While sending data (objects) over the network the need for serialization arises. The reason is our network infrastructure and hardware understands bits and bytes but not the objects. In this tutorial i am going to explain how to serialize and deserialize data without using any third party libraries i.e. using Serialize() method in the JavaScriptSerializer() static class in System.Web.Script.Serialization namespace provided by the .Net Framework itself.

How To Use HTML5 DataList Control

By // No comments:
As a develop we are very familiar with the html controls. Now in html 5 many new controls has been added to the existing collection. HTML5 DataList is one of the type in the new collection. I am going to explain about what is datalist control and how to use datalist control in our projects.

Asp.Net DataTable Manipulation - Add, Update,Delete & Sort DataTable in C#.Net & VB.Net

By // No comments:
In the asp.net developer's life it is very common to come across the datatable manipulation. So here i have decided to explain the datatable manipulation like adding records to datatable, editing and updating datatable records,deleting records from datatable based on the condition and finally sorting datatable based on columns.

Increse Decrease Font Size | Zoom In Zoom Out Text Size Using jQuery

By // No comments:
Overview:
In this tutorial i am going to explain about how to increase and decrease font size or how to zoom in and zoom out text using jQuery and javascript. WE can increase and decrease font size or zoom in and zoom out text for the entire page as well as for a particular part of the page.

jQuery Code/Script To Make The First Word Bold

By // No comments:
Overview:

In this tutorial i am going to explain about how to make the first word bold using jQuery script. For this using regular expression i am finding the first word from the target element and then adding the <strong> tag to that word then replacing it in the target.

Binding One DropDownList Based On Another DropDown List | Cascading dropdownlist in ASP.Net C#.Net

By // 2 comments:
In this tutorial I am going to explain about how to load the one drop down list using another or cascading drop down list in ASP.Net  and C#.Net. It is achieved by passing the selected value of the one dropdown list as parameter to another drop down list.

Regular Expression To Strip/Remove Html Tags From String in ASP.Net C#.Net VB.Net

By // No comments:
In this tutorial i am going to explain about how to strip/remove html tags from the string using regular expression in asp.net and C#.Net or It is achieved by using the System.Text.RegularExpressions namespace.

Online Casino