AngularJS, Basic to Expert: Day One
AngularJS, Basic to Expert: Day One
In Part 1 on of this series, we look at some common, and easy to use, directives that AngularJS developers use to get their apps up and running.
Join the DZone community and get the full member experience.
Join For FreeIntroduction
I am going to write this article series to help you to learn AngularJS 1.x.x as quickly and as simple as possible, from a basic to expert level.
We will see what AngularJS is, and will learn the basics of AngularJS, modules, controllers, directives, expressions, filters, data binding, Scopes, Validations, Routing, Service, DI, and more.
And we will create one SPA using AngularJS with MVC for a practical implementation; we will continue this application form first post to last, from small application to big enterprise application.
After this AngularJS 1 series, I will write on Angular 2 and Angular 4.
This article covers:
- Introduction to AngularJS.
- What is AngularJS?
- Why AngularJS is a good fit for web applications.
- How to use AngularJS in our applications.
- First AngularJS application.
Introduction to AngularJS
AngularJS is a lightweight, client-side JavaScript framework to create dynamic web applications, it's developed and maintained by Google. AngularJS can be added to an HTML page by adding a reference with a tag.
Why AngularJS Is a Good Fit for Web Applications:
Everybody wants to create an application which works fast and smoothly. There are many client-side frameworks which help to create dynamic and faster web pages, and AngularJS is a popular one. It provides minimum to no configuration, is easy to learn, and is supported by all modern browsers.
AngularJS supports the MVC (Model View Controller) style of application design.
Model – contains the data for the application.
Views – it displays the data with HTML for the user interface.
Controller – Controller manages the relationship between the model and the view, it is the interface between view and model.
How to Use AngularJS
AngularJS extends HTML tags with ng directives.
The ng-app directive is the first thing to do for any AngularJS application, as it defines the AngularJS application.
To use an AngularJS library, go to the AngularJS official site and download it: https://angularjs.org/
And add a reference to the AngularJS file or directly add a reference to the AngularJS CDN like below:
<!DOCTYPE html>
<html>
<body ng-app=””>
{{5+5}}
</body>
</html>For the above HTML code, the result will display 10 in the browser.
In the above sample, the <body> tag has an ng-app attribute that is the first and most important directive that tells us that AngularJS is going to control this and all its child elements.
The ng-app attribute can be applied to <html>, <body>, </div> or any other valid HTML element.
The tag simply refers the AngularJS library from Google CDN. We can also add a downloaded AngularJS 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, {{ }}.
<body ng-app=”” ng-init=”Firstapp=’Hello first AngularJS application'”>
<span > {{ Firstapp }} </span>
<p>First Name: <input type=”text” ng-model=”firstName”></p>
<p>Last Name: <input type=”text” ng-model=”lastName”></p>
<span >full Name: {{ firstName + ” ” + lastName }} </span>
</body>
</html>In the above example, ng-app defines the 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.
By placing ng-init in the body tag, we have used ng-init to initialize some values for our application.
The <span > {{ Firstapp }} </span> expression displays the value of what we have set in ng-init in the body tag.
There are two textboxes for first and last name, and an AngularJS expression for Full Name, when I type in first name textbox, simultaneously it displays in full name and when I type in last name, the AngularJS full name expression concatenates first name and last name and displays the full name.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}