Post
Ask Question

Angular From Basic To Expert - Day One

I am going to write this article series to help you learn AngularJS 1.x.x very quickly and in a simple way from basic to expert level.

We will see what is AngularJS and we will learn the basics of AngularJS - Modules, Controllers, Directives, Expressions, Filters, Databinding, Scopes, Validations, Routing, Service, DI, and more. And, we will create one SPA in AngularJS with MVC for practical implementation. We will continue this application from the first post to last, from small applications to big enterprise applications.

After this AngularJS 1 series, I will write on AngularJS 2 and AngularJS 4.

This article covers,

  • Introduction to AngularJS
  • What AngularJS is
  • Why angularJS is a good fit for web applications.
  • How to use AangularJS in our applications.
  • First AngularJS application.

Introduction to AngularJS

AngularJS is client side JavaScript light-weight framework to create dynamic web applications. It's developed and maintaining by Google. AngularJS can be added to an HTML page by adding reference with a <script> tag.

  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  

Why AngularJS is a good fit for web applications

Nowadays, everybody wants to create an application which should work faster and smoother. There are many client-side frameworks to help create dynamic and faster web pages, and AngularJS is becoming a popular one for this. It provides minimal or no configuration and is easy to learn and supported by all modern browsers.

AngularJS supports MVC (Model View Controller) style for application design.

  •  Model – contains the data for the application.
  • Views – it displays the data with HTML for User Interface.
  • Controller – Controller manages the relationship between the Model and the View. It is like interface between View and Model.

How to use

AngularJS extends HTML tags with ng directives. The ng-app directive is the start and first thing for the AngularJS application, it defines an AngularJS application.

To use AngularJS library, go to AngularJS official site, i.e., "https://angularjs.org/ " and download the package. Add reference of the Angular.js file or we can directly add reference of the AngularJS CDN like below:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  4.   
  5. <body ng-app=""> {{5+5}} </body>  
  6.   
  7. </html>  

For the above HTML code, the result will be 10 in the browser.

In the above sample, the <body> tag has ng-app attribute that is the first and most important directive that tells that AngularJS is going to control this and all its children elements.

The ng-app attribute can be applied to <html>, <body>, </div> or any other valid HTML element.

The <script> tag simply refers the AngularJS library from Google CDN. We can also add downloaded ajgularJS library file.

The {{ 5 + 5 }} is an expression that will be evaluated by AngularJS. This is one way binding and it is done by wrapping the code in double braces {{ }}.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  4.   
  5. <body ng-app="" ng-init="Firstapp='Hello fisrt angularjs application'"> <span> {{ Firstapp }} </span>  
  6.     <p>First Name: <input type="text" ng-model="firstName"></p>  
  7.     <p>Last Name: <input type="text" ng-model="lastName"></p> <span>full Name: {{ firstName + " " + lastName }} </span> </body>  
  8.   
  9. </html>  

In the above example, ng-app defines AngularJS application. We have added ng-app in the body tag which means we can use AngularJS functionality inside the body tag in any child elements.

In the body tag we have used ng-init to initialize some values for our application,

<span > {{ Firstapp }} </span> expression displays the value we have set in the ng-init in body tag.

There are two textboxes - first name and last name, and an AngularJS expression for Full Name, when I type in the first name textbox, it displays in full name simultaneously and when I type in the last name, the AngularJS full name expression concatenates the first name and last name.

Output

In my next article, we will cover,
  • AngularJS Expressions.
  • DataBinding in AngularJS
  • Directives in AngularJS
  • Module in AngularJS
  • Model in AngularJS
  • Controller in AngularJS
  • Scopes in AngularJS


Similar Articles