Introduction to AngularJS

What is AngularJS ?

AngularJS is a JavaScript framework for web pages. This is perfect for single-page applications. It works with HTML by extending the attributes with directives and using expressions.
AngularJS is developed by Google, and this framework is available as a set of Google APIs. The prerequisites of using AngularJS is to add a script reference in HTML page to this JavaScript file.
A few important keywords to learn about AngularJS, are provided below.

• Basic- Directives, Expressions, Filters, Modules, and Controllers
• Advance- Events, DOM, Forms, Input, Validation, Http, and more.

Before you start learning AngularJS, it is important that you have the knowledge of following.

1. HTML
2. CSS
3. JAVASCRIPT

There are three important parts in AngularJS:

1. ng-aap
2. ng-model
3. ng-bind

ng-app: It is the first point of AngularJS to the page. It is defined to link an AngularJS Application to HTML.

Syntax:

<div ng-app="modulename">  
here right code..  
  
</div>

ng-model: It works to bind the values of HTML controls to the Application data.

Syntax:

<element ng-model="name"></element>  

ng-bind: It is used to bind AngularJS Application data to HTML tags.

Syntax:

<element ng-bind="expression"></element>  

Setup AngularJS in MVC application in Visual Studio 2015:

Start Visual Studio, Click New Project:

Right button click on solution, and click Manage NuGet Packages for solution:

Manage NuGet Packages window appear. Search AngularJS and click Install to install it.

These are AngularJS files:

Then, let's create ScriptsNg folder in solution, then add 4 folders in it:

1. Controller
2. Directive
3. Module
4. Service

Controller: Angular JS Controller Control Data between model and view in application, keep all Controller Script files within Controller folder.

Directive: Angular JS Directive Extend html with new attribute, keep all Directive files within Directive Folder.

Module: Modules are used to separate logics say services, controllers, application etc. and keep the code clean, keep all module files in module folder.

Service: service is function, keep all customize service files within Service Folder

Create Script file named “app.js” in module folder by right-click on module folder then choose add --> JavaScript File. And add this code:

var app;  
(function () {  
'use strict';  
app = angular.module('myapp', []);  
})();

Create Controller named “DashboardCtrl” in Controller folder:

app.controller('dashboardCtrl', ['$scope',  
function ($scope) {  
$scope.Message = 'Hello World';  
}]);

Create DashboardController class in mvc Controller folder:

public class DashboardController : Controller  
{    
    public ActionResult Index()  
    {  
        return View();  
    }  
}  

Then Create a View:

<div ng-app="myapp">  
<div ng-controller="dashboardCtrl">  
{{Message}}  
</div>  
</div>  
<script src="~/Scripts/angular.min.js"></script>  
<script src="~/ScriptsNg/Module/app.js"></script>  
<script src="~/ScriptsNg/Controller/DashboardCtrl.js"></script>

This is the output:

Reference:

Setup Angularjs in MVC application