Now days, UI design become more pasionate, most people showing interest to learn and design rich UI using latest technologies.
Today, we are going discuss about how to setup angular js into HTML 5 page
1. Create new HTML 5 File
2. Find latest Angular JS librabry from https://angularjs.org and include into HTML file
Ex:
<head><meta charset="UTF-8"><title>Angular JS - Hello World</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script></head>
3. Add Angular JS app support in the current html file - (ng-app add's support to current html with angular js application)
<html ng-app>
4. Define and bing angular js property using "ng-model"
<input type="text" ng-model="hello"/>
5. Bind the simple angular js property using "{{}}"
<h1>{{hello}}</h1>The following example expalins , how to add Angular Js support with binding property
<!DOCTYPE html><html ng-app><head><meta charset="UTF-8"><title>Angular JS - Hello World</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script></head><body><h1>{{hello}}</h1><input type="text" ng-model="hello"/></body></html>Output:
0 comments :
Post a Comment