This is a continued series of tutorials. Please refer to intro part here
First thing first. Since we are going to use AngularJS API, it is first important to add reference of the latest stable version to our HTML file.
Introduction to ng-directives
This is the root element. All the code inside this element will be valid Angular code. So ng-app can be applied to tags like
html , head , body and also to a
div tag. Please note that, there can not be nested ng-app directive within the same hierarchy. Following example uses
div tag as
ng-app root element.
This element is used to actually bind values to a variable. This variable can be called as Model. All types of HTML
input tags come with
value attribute. This attribute is directly bound to the respective variable which later can be used throughout the page. Following example binds
value field of
txtinput to a variable called
name. All you have to do is, this:
<input id="txtinput" type="text" ng-model="name"/>
This attribute is used to bind the model. Once we have associated a value in model to any control then the primary purpose will be to use this value through out the page or may be save this value to database. The database operations we will see later in the course, for now we will bind it to a paragraph tag. Its real time binding.
Sample explaining above
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <title>Angular Demo</title> </head> <body > <div ng-app=""> <input type="text" ng-model="name" /></div> </body> </html>
Now we know the basic three attributes of Angular, we will go further to understand quick binding expression, modules and controllers.
Next chapter is Here