AngularJS Up and Running Lesson 1: Setup
So i will not bore you by repeating the history of AngularJS and how Google went about creating a MVVC framework to make working and creating Enterprise and Single Page Apps fun, i will jump in to show you how to get this Framework work for you.
Here we will get the Javascript file from the Google CDN (central repository) and start working with AngularJS.
We will create a simple web-page and try to understand the very basic things you need to write to initiate a AngularJS application.
We will create a simple web-page and try to understand the very basic things you need to write to initiate a AngularJS application.
Create a blank html file and write the below code in it, example AngularFirstLesson.html
- <!Doctype html>
- <html ng-app>
- <head>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
- </head>
- <body>
- Enter UserName :<input type="text" ng-model="name" /> {{name}}
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
- </body>
- </html>
Lets dissect the code to understand whats happening here:
- <!Doctype html>
The above code indicates that this is a HTML 5 web page.
- <html ng-app>
From Angular Documentation:Use this directive to auto-bootstrap an AngularJS application. The
ngApp directive designates the root element of the application and is typically placed near the root element of the page – e.g. on the<body>or<html>tags.
Basically all this says to the application is that get ready this is an AngularJS application.
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
Here we are loading up the Javascript File from Google CDN.
- Enter UserName :<input type="text" ng-model="name" /> {{name}}
This is an interesting piece of code and if you come from Server side programming or have worked only on static html or JSP’s, you will even find it magical when executed.
ng-model from documentation : ”
ngModelis responsible for:- Binding the view into the model, which other directives such as
input,textareaorselectrequire. - Providing validation behavior (i.e. required, number, email, url).
- Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
- Setting related css classes on the element (
ng-valid,ng-invalid,ng-dirty,ng-pristine,ng-touched,ng-untouched,ng-empty,ng-not-empty) including animations. - Registering the control with its parent form.
Note:
ngModelwill try to bind to the property given by evaluating the expression on the current scope. If the property doesn’t already exist on this scope, it will be created implicitly and added to the scope.”
The crux of this paragraph being that the ngModel directive gives you two way binding using scope, Scope of the current variable defines the binding. Here the data entered in the textfield is assigned to the name variable and the expression .i.e. the value in the {{}} brackets is evaluated and updated in real-time and shown on the view.
Its also very helpful to reduce the code we generally write to access the DOM and setup these variables.No need to have “ids” on all the fields and just setting up properties gets you the values to work with.
Output:
AngularJS Lesson1
Thats it for this lesson more coming soon.
Comments
Post a Comment