Getting started with AngularJS.

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.