Search This Blog

2016-01-05

Angular JS Tutorial1: ng-model,ng-bind and Expression

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
Typically, we don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

Example:

Before staring Angular Expression, create the web server using node.js with the below file

1)Package.json:

{
  "name": "angulardetails",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies" : {
    "connect"         : "*",
    "serve-static"    : "*"
 
  }
}

2)index.js

var connect=require("connect");
var serveStatic=require("serve-static");

var app=connect()
.use(serveStatic('public'))
.use(function  (req,res) {
res.end("Welcome to the Static Demo");
})
.listen(8080);

console.log("listening from port 8080");

3)Create a public folder in the root.

4)run npm install to install dependencies

5)run using 'node index.js'

Now create angular.js file "1.html" with in the public folder


<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<title>ng-model,ng-bind,Expression</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
Info: ng-model works on input, ng-bind on div<br/>
<input type="text" ng-model="name"/>
<div >Hello {{name}}</div>

Hello <div ng-bind="name"></div>
<div data-ng-bind="name"></div>
<div ng:bind="name"></div>
<div ng_bind="name"></div>
<div >Expression {{10*12}}</div>
</body>
</html>


See your angular js file in browser by typing the URL "http://localhost:8080/1.html"




No comments: