Angular js getting started

AngularJS-Getting Started
AngularJS is an open source web application framework maintained by Google and the
community to assist the single page application. Angular team calls it as the “Structural
Framework for dynamic web application”. It is a client-side technology completely written in
JavaScript. Its goal is to expand the web applications with Model-View-Controller (MVC)
capability and make development and testing easier.
AngularJS Features:
1. Two way data binding
2. Routing
3. MVC
4. Templates
5. Directives
6. History
7. Dependency injection
8. Testing
Because of these features AngularJS makes client side development easier.
AngularJS architecture
Now, Let’s have look at some of the architectural considerations of AngularJS
1. Two way data binding: AngularJS supports two way data binding. This means user inputs
in form field is automatically updated into angular models. So, that you don’t need to
watch specific events and respond to those events also don’t need to update the HTML
manually instead angular will handle it.

2. Dirty checking: AngularJS implies the concept of dirty checking. You don’t need to put the
data into specialstructures and callthe getter and setter methods. Just put your data into
simple plane old JavaScript objects and angular will respond whenever data changes and
update the view automatically.
3. Dependencyinjection:AngularJScomes with inbuilt dependency injection. You can divide
your application into different components which AngularJS can inject into each other.
Simply, it encapsulates the different pieces of application and improves the testability.
AngularJS components
Let’s have look at some of the important components of AngularJS.
1. Controllers:
a. Are the central component of any angular application
b. Controllers coordinate view and model
c. Handle the view interaction
2. Views:
a. Used for presenting data.
b. Composed of HTML templates, data binding expressions, directives and filters
3. Services:
a. Handles the non-view logic(business logic)
b. Communicate with the server
c. Hold data and state
4. Directives:
a. Way to teach HTML new tricks
b. Used to create custom HTML elements
c. Used for DOM manipulation
Getting started
To get started with the angular application just add the reference to AngularJS library. To
add the reference goto https://angularjs.org.
Once you have added the AngularJS script into page you are ready to start using it.

Now, just add a text box which allow you to type your name.
When you run above code nothing much will happen. You will just see a text box and as you type
nothing will happen.
Let’s say you want to see the value what you type in text box.
First thing add ng-app directive into html tag also ng-model.
ng-app: once you add the ng-app directive and run the application, first the angular script loads
and ng-app will initialize the application.
ng-model: what ng-model will do is ,it will add property up in the memory called “name” into
what is called as “scope”. Behind the scenes it will make an empty ViewModel and then filling it
with a “name” property.
Now, if you want to write out the value you type into the text box created earlier, then just add
a data binding expression. In angularjs “{{ }}” are used to bind the data.

Now, let’s go ahead and run, this how output looks
Find the below plunker link to test the code.
http://plnkr.co/edit/KESbO7xT4F7zZOPxFOJR?p=preview
This is a very simple example of angularjs just to get started and get feel of angular.
In the next part we will see some core concepts like controllers, modules, factories etc.
Stay tuned for more on AngularJS.

Angular js getting started

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Angular js getting started (20)

Recently uploaded (20)

Angular js getting started