Free Web Development Online Tutorials, Learn to Code
Learn Angular framework, angularjs tutorial, angular js directive, angularjs application, angularjs api

Angular 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.

Before we start with Angular 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 angularjs online step by step

AngularJS is a JavaScript Framework
Here is quick example of how you can start working with angular.js reference in your web application.
Add reference of angular js, notice the use of ng-app and ng-model

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

Comment
Name
Email
Website
Subscribe
 
AngularJS Online Tutorial