2062015 Learrng (Anquan) with Examples-Part | Code Wala
Learning {{AngularJS}}
with Examples—Part 1
Posted on May 28, 2014 by Brij
Client side programming is becoming the one of the main parts of web applications. Now a
days, We are seeing the explosion of JavaScript libraries. And the reason is that some
JavaScript libraries got very popular and developers took them hand to hand because of its
cool features with almost negligible performance cost, Now in our projects, count of JavaScript
files (plugins and custom files) are increasing rapidly which is making it unmanageable and
unmaintainable. AngularJS provides best of the both the worlds and now a days, it is one of the
most talked and used JavaScript framework in web applications. So | have thought to start a
series of post on AngularJS. I'll start from basics and gradually discuss all the features, keeping
in mind the.NET Developers. So let us start learning it. The first questions arises that
What is AngulalJS?
AngularJS is not just another JavaScript library but it provides a framework to write a proper
architectured, maintainable and testable client side code. Some of the key points are
* It follows MVC framework. If you don't have Idea MVC framework, I'll suggest you to get
an Idea of MVC framework and then start learning AngularJS. You can refer
below wiki page on MVC framework.
+ AngularJS is primarily aimed to develop SPAs (Single Page Applications), it means your
single HTML document turns into application. But it is also used a lot in ASP.NET and
other applications
+ Allows you to write Unit and integration tests for JavaScript code. Testability is one of
catatexthiml:charset=ut-8,960Cheader'i2iclas GD Z2erry header kZZZOstleMaD 6 2zborder%e3A%-200pxIBAOIOrfamlysesAKAOHelveCarIC.... 12016/2015 Learning {(AnguiarJS}} with Examples-Part 1 | Code Wala
the main points, which was kept in mind while writing this framework so it has great
support of it
It provides it's own and very rich list of attribute and properties for HTML controls which
increases the usability of it exponentially. is also called directives.
‘Supports two-way binding that means your data model and control's data will be in syne.
Angular supports Dependency injection. Read more about dependency injection on wiki
Angular library is also available on CDN so you just need to the url of the CDN and it
available for use.
It is an Open Source
AngularJS is a open source library and developed and supported by Google. Being an open
source, you can go through the code itself and customize it if required. There is lot of support
from JavaScript community and even you can contribute to it. Currently, more that 100
contributors have contributed and itis increasing day by day.
So let's discuss the main components of AngularJS. These are
Controller — It is main component of AngularJS and contains the state and logic both. It acts as
bridge between services and views
Views/Directives — Here we generate the UI. Directives extends the HTML element and
enables us to generate the complex html easily. Controllers talks to view to both directions.
Services — It contains the core logic and state of the application. In it, we can communicate to
server to get and post the data.
Now let's see all the above components glued with each other.
Services
catatexthiml:charset=ut-8,969Cheader'iZoclass GD Z2erry header kZ2ZOstleMaD 2zbarder%e3A%200px 363 2OIOrtfamilysesAKZOHelvelcar2C.... 26282015 Learing((gdari) with Examples-Pa 1 | Code Wola
Now you have got the basic explanation about the basics of AngularJS. So let's jump to the
coding. We need to learn two things mentioned below before writing the first application
1- {{expression}} — Itis called expressions and JavaScript like code can be written inside. It
should be used for mainly small operations in HTML page.
2- $scope — This is one of very important variable used in AngularJS. It provides and link
between the data and views. It holds all the required data for the views and used with in the
HTML template.
3- ng-— All the elements that are provided by angular starts from ng-. So if you see some
attribute that ng- and angular library is also included in the page, then you can assume that this
should be angular element only
4- ng-app — This directive is used to bootstrap the application. Normally, itis put at in top level
element like htm! or body tag. (That will be discussed in details in coming post).
Now lets write our first Hello World application with AngularJS. In this example, |'ll be using
the basic construct of AngularJS. | have created Empty Project in Visual Studio and added an
HTML page Home.html and written it as
[citar smins="ntt://so 3 o7g/1999/xnta">
menead>
[boat (Espa) style="Font-family:Verdana, Geneva, 'DejaVu Sans", sans-serif">
“