AngularJS Tutorial for Beginners

In this Angular tutorial you will learn Angular JS from very beginning so that you can understand why and when to use AngularJs Framework , all step by step installation, MVC architecture, expressions, controllers, directives then a sample application with use of HTML DOM and more.

Difference between angular and jquery!

Before we start with Angular JS tutorial, you may have a question why AngularJs? How Angular Framework is that different than JQuery ? This will help you to decide which one to use in your application.

Angular JS JQuery
Angular is a JavaScript framework designed to SPA (Single Page Application) for web development JQuery is a JavaScript library built for mainly DOM Manipulation
AngularJS provides mechanism for data binding as per MVC principal and a lot of interactivity In JQuery there almost no structured framework for data interactivity

Learn Angular JS in 10 Days

Angular JS is a JavaSript framework, the best for Single Page Application(SPA), in this tutorial first you will learn the AngularJS basic like modules, controllers, directives, expressions, filters

Then we look at Static Template, AngularJS Templates, AngularJS's dependency injection (DI) , AngularJS module called ngRoute

Using AngularJS you can extends HTML DOM with additional attributes and can make it more responsive user request. AngularJS is open source and completely free

Prerequisites

It would be nice if you have some knowledge of JavaScript , CSS and TypeScript

Learn angular application development step by step

let’s understand basic Angular implementation with examples: Here is a quick example of how you can start working with angular.js reference in your web application.

Step 1:
Add reference of angular js in your webpage, like <script src="angular.min.js"> </script>

Step 2:
Create text box control and understand how to use ng-app and ng-model with html form.

Note: We can have only one ng-app directive in a single html page

<script src="angular.min.js"> </script>
<div ng-app=""> <p>Type your Nationality </p>
<p> <input type="text" ng-model="nationality" placeholder="Enter your nationality"> </p>
<p style="font-size:28px;">I am {{nationality}} </p>
</div>

Type your Nationality

I am {{nationality}}

But there is another way to add angular reference to your web project if you can use NuGet utility
Right click on Project => Manage NuGet Packages => search Angular => Install

If you create a Angularjs project in Asp.net core framework, there you get multiple modules for Angular.js

 "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",

All above modules reside in a folder called "node_modules" in same level of "wwwroot".
If you open a module folder you may see there are multiple folders and files like js and metadata json files

Here are the list of items we will be learning about Angular.Js

If you want to build high performance single page web application, then Angular JS Framework is one of the best frameworks for client side application development.

 
AngularJS Online Tutorial

Othe JavaScript Framework
Angular JS Examples | Join Asp.Net MVC Course