AngularJS – Superheroic JavaScript MVW(Model, View, Whatever) Frame work, built for developing SPA(Single Page Applications). AngularJS lets you extend HTML vocabulary for your application (We can write custom HMTL elements or add custom behaviour to the existing elements). The resulting environment is extraordinarily expressive, readable, and quick to develop.
There are many intro videos on AngularJS on youtube among these the famous and best one could be Dan Wahlin’s AngularJS Fundamentals In 60-ish Minutes. Here is the video
(I would recommend to first go though this video intro before continuing through this series):
Link to official documented intro: https://docs.angularjs.org/guide/introduction
From the above video we got to know what going on with Angularjs and why it is so famous. Mainly AngularJS is comprised of these components/concepts:
- Data binding
- Routing
- Directive
- Filter
- Controller
- Factory/Service
- Value/Constant
In this tutorial i will take you through detailed explanation on each of the above components
First will start with:
How to set up AngularJS:
I would recommend to use NetBeans IDE for Development as it provides full support for AngularJS and WEB Dev.
I created a Bean project for AngularJS Please download it from the below link:
http://techiedreams.com/downloads/AngularJSBeanProject.zip
Once you install and set up the IDE, install support for HTML5 development.
Setting up the project:
Unzip the contents of the downloaded zip and keep aside.
Now open the IDE under categories > HMTL5 and under Projects > HTML5 Application with Existing sources. Click next and under site root the browse the path to the downloaded bean project. Give project some name and Click Finish.
OR
optionally you can start with a new project.
Go to the official website and download the AngularJS Library. (angular.js)
Now create a new HTML5 project. Create a folder called ‘js’ and inside that create one more folder called ‘libs’ and place the downloaded angularJS file in the directory.
Now in the index.html include the library.
<script src=”js/libs/angular.js”></script>
1. Data binding:
Now we have setup the base Project will check how the data binding works:
First thing before starting any angular Application we need to mark the root element to kick start AngularJS. we use ‘ngApp’ directive for this.
Typically will place this on the root elements of page ex: <body> or <html> tags.
So our index.html looks like this:
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Bean Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="js/libs/angular.js"></script>
</head>
<body>
<input type="text" ng-model="name"/>
<br />
Hello {{name}}!!
<br />
Hello <span ng-bind="name"></span>!!
</body>
</html>
In the above code we have a html input and we added an attribute called ng-model and passed a value – ‘name’. Actually here in AngularJS anything that starts with ng is an angular directive which has some predefined functionality. AngularJS also provides full freedom of creating custom directives and thus we can extend the default HTML behaviour.
Coming to ‘ng-model’ its a directive that binds the value in the input (or any element) to the value passed(here ‘name’). And the dynamically binded data can be rendered using two different ways:
1. Used mustache where the modal should be inside the doubly curled braces {{name}}.
2. Using ‘ng-bind’ – this is a directive approach, which exactly does the same as mustache.
Only difference is when mustache is used before the angular code is resolved we can see the must ache as it is in the rendered HTML which will make no sense to the end user so to avoid this will go with ‘ng-bind’ directive approach.
In the upcoming tutorials will continue with the other components with example for each one.
NEXT: AngularJS Part 2 – Controllers and Two way binding
Subscribe, like and stay tuned!
You may also like
The post Introduction to AngularJS appeared first on Techie Dreams.