.png)
Angular Basics, create Hello World
- Context: Angular JS Tutorials
- Level: Beginner
- Difficulty Scale: 1/10
What is AngularJS?
AngularJS is the versatile JavaScript MVC framework for creating Web Application. It gives you the flexibility to change the view, write the controller and interact with data model on the go.Many developer prefer calling it a "two-way data binding", which however is true because it binds the model with the view and augment the DOM hierarchy using the "scope" within the controller.
You will learn more about each of the fundamental aspects of Angular such as Model, View, Controller, Scope, root Scope etc.
For now, fire up your favourite code editor and throw in the AngularJS file and bootstrap's CSS file to help you build the application further.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World using Angular JS: Consolidatedjs.com</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
</head>
<body>
<!-- Our Code goes here -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
</body>
</html>
index.html, we are good to go. Now, insert the following code.
<div class="container">
<div data-ng-app>
<input type="text" data-ng-model="name">
<h2>Hello {{name}}</h2>
</div>
</div>
Full Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World using Angular JS: Consolidatedjs.com</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div data-ng-app>
<input type="text" data-ng-model="name">
<h2>Hello {{name}}</h2>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
</body>
</html>
Well, what does it do?
Hmmm, thanks for the patience! Here's what we have done so far.- We created a
divwith the class "container", which is bootstrap class for wrapper - Then we created a
divwith attributedata-ng-app, which however is angular JS directive which tells AngularJS's HTML compiler that this is the beginning of our Angular App and it creates scope object to hold the context of our application. - Once we made a context for rest of the app using
data-ng-app, we then created a simple HTMLinputtag to hold the model usingdata-ng-model - Now, we bind the expression name using curly braces. Expression in Angular is similar to JavaScript expression which binds with the context, in our case the context is Application using the scope object. Don't worry, you learn more about this in later sessions.
index.html in your web browser and Hurray! We built our first AngularJS Application.Type in your name in the text box and surprise, the expression below will evaluate your name in real time. This is what we call two-way data binding.
You can see, that we didn't included any JavaScript and yet we have accomplished something which we would have written lines of code in jQuery, dojo or any other JavaScript Library. This is power of the directives in AngularJS.
0 comments: