Has
anyone told you “AngularJS is difficult!”? Well my friend I’m going to show you
why they are wrong.
1. A computer! LOL!
2. Any text editor of your choice.
3. Internet to access/download angularJS .
4. <1 MB of free hard disk space.
5. A quite room.
6. and 10 fingers.
Grab some
buds and let’s get started.
STEP 1:
Create a
folder (I’ve named mine ‘AngularKickStart’) under any desired location and
under it create files/folders as shown below.
STEP 2 :
Open
index.html and add the below code.
<! DOCTYPE
html>
<html ng -app="kickstartapp ">
<head >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<title >AngularKickStart</title>
</head >
<body ng -controller="myController ">
<div >
<input type="text" ng -model="user. name">
<button ng -click="sayHello ( )">Say
hello</button>
</div >
<div >
<p
ng-bind="user.greeting"></p>
</div >
</body >
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript"
src="js /kickstart . js "></script>
</html >
The
latest version of angularJS can be found at angularjs.org.
STEP 3 :
Open kickstart . js and
add the following code.
$scope.user = {
};
$scope. sayHello = function( ) {
$scope.user.greeting = "Hello " +
$scope.user.name;
}
}]);
Double
click on index.html and you should see the below. That’s it! It’s that simple.
What is ng -app?!
What is ng -controller?! What is ng -model?! What is ng -bind ?!
What is angular. module( ). controller( )?!
Wow! I
knew you would ask that. Scroll down…. Read..… Thou shall answer all your
questions.
NOTE : FYI ng -app, ng -controller, ng -model, ng -bind
and ng -click are called directives.
1 - ng -app=“kickstartapp ”
This tells angularjs “Hey sexy! check me
out.” in tech term the word is “bootstrap”. Hence, angularjs will
know that this html is angular compliant. Remember there can be only
one ng -app per html document (per page). You must be wondering there is
only one body per html doc. Can i add this attribute to body tag?
YES! you can. See you already know angular.
2 - ng -controller=“myController "
This tells that the body scope is under the controller ‘myController ’.
In other words ‘myController ’ can access any element under the body tag
including body. But unlike ng -app, ng -controller can be more than
one.
For example, you can have 3 controllers with
different scopes
<div ng -controller=“oneController ”>
…
</div >
<div ng -controller=“twoController ”>
…
</div >
<div ng -controller=“threeController ”>
…
</div >
<div ng -controller=“oneController ”>
…
<div ng -controller=“childOneController ”>
…
</div >
…
<div ng -controller=“childTwoController ”>
…
</div >
</div >
<div ng -controller=“parentController ”>
…
<div ng -controller=“childController ”>
…
<div ng -controller=“grandChildController ”>
…
</div >
</div >
</div >
3 - ng -model=“user. name"
This means the value of user. name which is
under the scope of ‘myController ’ is set to the input box. We call this data
binding. If you enter a new name in the input box (like in our example) the
value of $scope.user.name will be updated automatically by angular. Cool
huh !
4 - ng -bind=“user. greeting"
Like input box the paragraph tag also can be bind to
data. For example, user. greeting in our example.
Can I use ng -model
to bind the data to p tag? Can I use ng -bind to input tag? No
you can’t. The easiest way to remember which directive to use is if the field
is editable then use ng -model else use ng -bind. (There is also ng -bind-html.
Curious? Google it!)
5 - ng -click=“sayHello ( )"
It’s self explanatory. When clicked call sayHello ( ).
Duh!
6 -
angular. module( 'kickstartapp ', [])
This means you are creating a module for your
application. The syntax is
The
-modulename - is what goes in your ng -app directive. We don’t have
dependencies with external modules hence a blank array ([]).
7 -
angular. controller( “myController ”, [“$scope”, function( $scope) { } ])
Like the module we create our controller using
this syntax.
This line
of code attaches the controller to the body (like in our example) and
the controller now can access the body and it’s child elements, any
changes to the data is propagated or notified to the controller through the
$scope object.
Now you
should be able to figure out how everything comes together. If you have just
read this post I suggest you get your hands dirty. But to know the true power
of angularJS we should take a deep dive into angular. Which I will
surely post in the near future.
Please drop a note if you find this article useful.
Till then
take care! Cheers!
Posts
