Suggested Tutorials
SQL Server Tutorial
ASP.NET Tutorial
jQuery Tutorial
In this video we will discuss
What is AngularJS
AngularJS is a JavaScript framework that helps build applications that run in a web browser.
Who developed AngularJS
Google is the company that developed AngularJS. AngularJS is an open source project, which means it can be be freely used, changed, and shared by anyone.
AngularJS is an excellent framework for building both Single Page Applications (SPA) and Line of Business Applications. Many companies are using Angular today, and there are many public facing web sites that are built with angular.
There is a website, https://www.madewithangular.com, that has the list of web sites that are built using AngularJS. Within this list you can find many popular websites.
What are the benefits of using AngularJS
1. Dependency Injection : Dependency Injection is something AngularJS does quite well. If you are new to Dependency Injection, don't worry, we will discuss it in detail with examples in a later video.
2. Two Way Data-Binding : One of the most useful feature in AngularJS is the Two Way Data-Binding. The Two Way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.
3. Testing : Testing is an area where Angular really shines. Angular is designed with testing in mind right from the start. Angular makes it very easy to test any of it's components through both unit testing and end to end testing. So there's really no excuse for not testing any of your angular application code.
4. Model View Controller : With angular it is very easy to develop applications in a clean MVC way. All you have to do is split your application code into MVC components. The rest, that is managing those components and connecting them together is done by angular.
5. Many more benefits like controlling the behaviour of DOM elements using directives and the flexibility that angular filters provide.
We will discuss directives, filters, Modules, Routes etc with examples in our upcoming videos in this series.
To build angular applications you only need one script file and that is angular.js.
To get the script file visit https://angularjs.org. From here
1. You can download the angular script file
2. CDN link - We discussed the benefits of using CDN in Part 3 of jQuery tutorial.
3. Various resources to learn angular - Here you will find videos, Free courses, Tutorials and Case Studies. You will also find API reference which is extremeley useful.
To get started with angular
1. Add a reference to the angular script
2. Include ng-app attribute
What is ng-app
In angular, ng-app is called a directive. There are many directives in angular. You can find the complete list of directives on https://angularjs.org. The ng prefix in the directive stands for angular. The ng-app directive is a starting point of AngularJS Application. Angular framework will first check for ng-app directive in an HTML page after the entire page is loaded. If ng-app directive is found, angular bootstraps itself and starts to manage the section of the page that has the ng-app directive.
So the obvious next question is, where to place the ng-app directive on the page
It should be placed at the root of the HTML document, that is at the <html> tag level or at the <body> tag level, so that angular can control the entire page.
However, there is nothing stopping you from placing it on any other HTML element with in the page. When you do this only that element and it's children are managed by angular.
Double curly braces are called binding expressions in angular.
Example : In the example below, the ng-app directive is placed at the <html> tag level. So the binding expressions in both the div elements are evaluated and displayed as expected.
Example : In the example below, the ng-app directive is placed on one of the <div> element. So the binding expressions in the <div> element that has the ng-app directive is evaluated but not the binding expression in the other <div> element.
All the following are valid expressions in angular
{{ 1 == 1 }} - Evaluates to true
{{ { name: 'David', age : '30' }.name }} - Returns the name property value
{{ ['Mark', 'David', 'Sara'][2] }} - Returns the 2nd element from the array
SQL Server Tutorial
ASP.NET Tutorial
jQuery Tutorial
In this video we will discuss
- What is AngularJS
- Benefits of AngularJS
- A simple AngularJS example
What is AngularJS
AngularJS is a JavaScript framework that helps build applications that run in a web browser.
Who developed AngularJS
Google is the company that developed AngularJS. AngularJS is an open source project, which means it can be be freely used, changed, and shared by anyone.
AngularJS is an excellent framework for building both Single Page Applications (SPA) and Line of Business Applications. Many companies are using Angular today, and there are many public facing web sites that are built with angular.
There is a website, https://www.madewithangular.com, that has the list of web sites that are built using AngularJS. Within this list you can find many popular websites.
What are the benefits of using AngularJS
1. Dependency Injection : Dependency Injection is something AngularJS does quite well. If you are new to Dependency Injection, don't worry, we will discuss it in detail with examples in a later video.
2. Two Way Data-Binding : One of the most useful feature in AngularJS is the Two Way Data-Binding. The Two Way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.
3. Testing : Testing is an area where Angular really shines. Angular is designed with testing in mind right from the start. Angular makes it very easy to test any of it's components through both unit testing and end to end testing. So there's really no excuse for not testing any of your angular application code.
4. Model View Controller : With angular it is very easy to develop applications in a clean MVC way. All you have to do is split your application code into MVC components. The rest, that is managing those components and connecting them together is done by angular.
5. Many more benefits like controlling the behaviour of DOM elements using directives and the flexibility that angular filters provide.
We will discuss directives, filters, Modules, Routes etc with examples in our upcoming videos in this series.
To build angular applications you only need one script file and that is angular.js.
To get the script file visit https://angularjs.org. From here
1. You can download the angular script file
2. CDN link - We discussed the benefits of using CDN in Part 3 of jQuery tutorial.
3. Various resources to learn angular - Here you will find videos, Free courses, Tutorials and Case Studies. You will also find API reference which is extremeley useful.
To get started with angular
1. Add a reference to the angular script
2. Include ng-app attribute
What is ng-app
In angular, ng-app is called a directive. There are many directives in angular. You can find the complete list of directives on https://angularjs.org. The ng prefix in the directive stands for angular. The ng-app directive is a starting point of AngularJS Application. Angular framework will first check for ng-app directive in an HTML page after the entire page is loaded. If ng-app directive is found, angular bootstraps itself and starts to manage the section of the page that has the ng-app directive.
So the obvious next question is, where to place the ng-app directive on the page
It should be placed at the root of the HTML document, that is at the <html> tag level or at the <body> tag level, so that angular can control the entire page.
However, there is nothing stopping you from placing it on any other HTML element with in the page. When you do this only that element and it's children are managed by angular.
Double curly braces are called binding expressions in angular.
Example : In the example below, the ng-app directive is placed at the <html> tag level. So the binding expressions in both the div elements are evaluated and displayed as expected.
Example : In the example below, the ng-app directive is placed on one of the <div> element. So the binding expressions in the <div> element that has the ng-app directive is evaluated but not the binding expression in the other <div> element.
All the following are valid expressions in angular
{{ 1 == 1 }} - Evaluates to true
{{ { name: 'David', age : '30' }.name }} - Returns the name property value
{{ ['Mark', 'David', 'Sara'][2] }} - Returns the 2nd element from the array
wait this last long time, please side by side also start ASP.NET WEB API tooo please please please thanks
ReplyDeleteThanku so much sir,
ReplyDeleteu are really doing great job for us.
good bless you sir
I waited for this for so long...thank you so much
ReplyDeleteI waited for this for so long...thank you so much
ReplyDeletethank you very much. most of people waiting for this angular js series.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteWhat do you mean?
Deletei really appreciate you . thank you so much
ReplyDeletewas Waiting for Angular JS Videos..finally..Thank you sir..You are doing fabulous job..
ReplyDeleteWaiting for long time... thq sir...
ReplyDeleteWhat version of AngularJS tutorial is this? 1.x or 2.x?
ReplyDelete1.2.0.x
DeleteHi Venkat, I'm really appreciate you.
ReplyDeleteCan you please let me know
if i give the expression first dev element like {{ 1=1 }}, remaining other dev element result showing wrong. what to do in this case
Thank you very much sir for this wonderful Angular JS tutorial...Please post a tutorial for Angular JS and MySQL CRUD operation...
ReplyDeleteHi Venkat,
ReplyDeleteI'm new to Angular JS.
Currently working on MVC Application. Now want to develop same appl.
in Angular JS.
Appl. front end is developed in DOT MVC & Admin site in Zoomla CMS.
or we can say "this is joomla cms driven front end website.
Can we developed joomla CMS driven web appli into Angular JS?
Hi Venkat,
ReplyDeleteWe are eagerly waiting for Angular 2 tutorial play list please make & share it ASAP. We'll be obliged of your...
Hi Venkat , I really appreciate your efforts. Thanks alot.
ReplyDeleteWhich version of angular we are using here?
Hi Venkat Sir, Please Explain the role of $ in angularjs
ReplyDeletePlease Thanks
you should use ng-app for those div elements
ReplyDeleteThanks in advance