Getting Started With AngularJS

In this demo application our main concern will be on AngularJS, creating first Angular module, Directives, Expressions.

What is AngularJS?

It is 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 an 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 apps behavior 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 assign some values to that object.

Access that value 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 VS 2015 to create application.



Step 2 : Click on File, New Project, then ASP.NET Web Application,



Step 3 : Select MVC Template and click OK.



Step 4 : After creating project it is showing this hierarchy.



Step 5 : Open Index.html in Home folder. Comment that code excluding the first three lines.



Step 6 : Add angular.min.js and app.js files in Scripts 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 the 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 the 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>

Now we have implemented and successfully completed all the steps.

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 :



That it your application is ready.

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

Read more articles on AngularJS: 

• Lazy Loading AngularJS Controller Files Using RequireJS
• AngularJS Overview Series - Three