WebTrainingRoom Online Courses
Learn AngularJS, angularjs tutorial, angularjs directive, angularjs application, angularjs api

AngularJS Tutorial for Beginners

In this AngularJS tutorial you will learn AngularJS 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 AngularJs is that different than JQuery ? This will help you to decide which one to use in your application.

AngularJS JQuery
AngularJS 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 AngularJS in 7 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



Consulting