Below is a very simple example of AngularJS to explain few important directives which we gonna use from very start.
First, we need to know what are directives basically?
So, To enhance our HTML, AngularJs provides us some in built attributes called "Directives", but we can also create our own directives which we will discuss later.
ng-app : This initializes AngularJs application i.e. The first ng-app found in the document will automatically initializes application when web page is loaded. This defines a root element of an AngularJs application.
ng-model : This binds the value of HTML element to application data. This binding goes both ways i.e. if value of HTML element is changed then AngularJs property automatically getting updated without refreshing a page.
ng-click : defines AngularJS code that will be executed when the element is being clicked. This directive comes under AngularJs Events.
ng-controller : The ng-controller directive defines the application controller,created by a standard JavaScript object constructor.
The StudentController function is a JavaScript function. AngularJS will invoke the controller with a $scope object which is the application object i.e. we can access any function and properties through this.
The controller creates properties in the scope.
The ng-model directives bind HTML elements to the controller properties.
In below example we can see the use of all the directives above explained in short obviously..;)
Example
<!doctype html>
<html ng-app>
<head>
<title>Simple TableRow Addition</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body ng-controller="StudentController">
<table>
<thead>
<tr>
<td>
<label> User: </label>
<input type="text" placeholder="Enter Name" ng-model="name" />
</td>
</tr>
<tr>
<td>
<label> Age: </label>
<input type="number" placeholder="Enter Age" ng-model="age" />
</td>
</tr>
<tr>
<td>
<label> Class: </label>
<input type="text" placeholder="Enter Class" ng-model="uclass" />
</td>
</tr>
</thead>
<td align="right">
<button type="button" ng-click="addUser()"> adduser </button>
</td>
</table>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Title
</th>
</tr>
</thead>
<body>
<tr ng-repeat="user in users">
<td>
{{ user.name }}
</td>
<td>
{{ user.age }}
</td>
<td>
{{ user.uclass }}
</td>
</tr>
</body>
</table>
<script>
function StudentController($scope)
{
$scope.users = [];
$scope.addUser = function(){
$scope.users.push({name : $scope.name,age:$scope.age,uclass:$scope.uclass});
}
}
</script>
</body>
</html>
Result :
First, we need to know what are directives basically?
So, To enhance our HTML, AngularJs provides us some in built attributes called "Directives", but we can also create our own directives which we will discuss later.
ng-app : This initializes AngularJs application i.e. The first ng-app found in the document will automatically initializes application when web page is loaded. This defines a root element of an AngularJs application.
ng-model : This binds the value of HTML element to application data. This binding goes both ways i.e. if value of HTML element is changed then AngularJs property automatically getting updated without refreshing a page.
ng-click : defines AngularJS code that will be executed when the element is being clicked. This directive comes under AngularJs Events.
ng-controller : The ng-controller directive defines the application controller,created by a standard JavaScript object constructor.
The StudentController function is a JavaScript function. AngularJS will invoke the controller with a $scope object which is the application object i.e. we can access any function and properties through this.
The controller creates properties in the scope.
The ng-model directives bind HTML elements to the controller properties.
In below example we can see the use of all the directives above explained in short obviously..;)
Example
<!doctype html>
<html ng-app>
<head>
<title>Simple TableRow Addition</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body ng-controller="StudentController">
<table>
<thead>
<tr>
<td>
<label> User: </label>
<input type="text" placeholder="Enter Name" ng-model="name" />
</td>
</tr>
<tr>
<td>
<label> Age: </label>
<input type="number" placeholder="Enter Age" ng-model="age" />
</td>
</tr>
<tr>
<td>
<label> Class: </label>
<input type="text" placeholder="Enter Class" ng-model="uclass" />
</td>
</tr>
</thead>
<td align="right">
<button type="button" ng-click="addUser()"> adduser </button>
</td>
</table>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Title
</th>
</tr>
</thead>
<body>
<tr ng-repeat="user in users">
<td>
{{ user.name }}
</td>
<td>
{{ user.age }}
</td>
<td>
{{ user.uclass }}
</td>
</tr>
</body>
</table>
<script>
function StudentController($scope)
{
$scope.users = [];
$scope.addUser = function(){
$scope.users.push({name : $scope.name,age:$scope.age,uclass:$scope.uclass});
}
}
</script>
</body>
</html>
Result :
Excellent post, adding concepts is really helpful.
ReplyDeleteAngularJS Training | AngularJS Training in Chennai | AngularJS course in Chennai
Thank you :)
DeleteIEEE Final Year projects Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Projects for CSE It gives you tips and rules that is progressively critical to consider while choosing any final year project point.
DeleteJavaScript Online Training in India
JavaScript Training in India
The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training
Thanks for sharing valuable information with us. check it once through Angularjs Online Training Hyderabad
ReplyDeleteThank you :)
DeleteWe need strong coding skills to understand what your conveying.
ReplyDeleteAngularjs Training in Bangalore ,
Angular 2 Training in bangalore ,
Python Training in Bangalore
Thank you :)
DeleteGiven article is useful and informative.The article shared more informations about Angular Js training for further reference refer Angular training in kochi and Angular course in kochi
ReplyDeleteReally great article! I love to read it.
ReplyDeleteTo Hire Angularjs Developers visit Mobiwebtech.com
Wow Such a great Blog. I discovered this which is exceptionally utilize full. Extraordinary article and data continue sharing more! Love yours blog. Thanks for sharing. AngularJS Course in Pune
ReplyDeleteGreat Article… I love to read your articles because your writing style is too good, it is very very helpful for all of us and I never get bored while reading your article because they are becomes more and more interesting from the starting lines until the end. AngularJS Course in Pune
ReplyDeleteThank you for writing this informative post. Looking forward to read more.
ReplyDeleteResponsive Web Design Services
Thanks for sharing all the information with us all.
ReplyDeleteFull Stack Online Training
Thanks for a great tips, This would be a different idea from the routine tips.
ReplyDeleteOracle Training in Chennai | Certification | Online Training Course | Oracle Training in Bangalore | Certification | Online Training Course | Oracle Training in Hyderabad | Certification | Online Training Course | Oracle Training in Online | Oracle Certification Online Training Course | Hadoop Training in Chennai | Certification | Big Data Online Training Course
Thank you for sharing with us..
ReplyDeleteFull Stack Online Training
Thank you for sharing valuable information.
ReplyDeleteAngular online training
I am really happy to say it’s an amazing post to read. I learn new information from your article, you are doing a great job. Keep it up
ReplyDeleteHire AngularJS Developer
Thanks for sharing this wonderful content. it's very useful to us. Your writing skill is amazing. Thanks a lot for this blog.
ReplyDeleteHire Vue.JS Developers
Finish the Data Science training in Chennai from Infycle Technologies, the best software training institute in Chennai for students, freshers, experienced, and tech professionals. At Infycle, get the rock-solid demanding courses like Selenium Testing, Machine Learning, Graphic Design and Animation, Cyber Security, Blockchain, Java for Android and iOS Development, Big Data, Oracle, Python, Microsoft Azure, Manual, and Selenium Automation Testing, Medical Coding, etc., with the best trainers in the industry. For more info and the free demo, reach us on call at +91-7504633633, +91-7502633633.
ReplyDeleteA performance tester needs to design the workload model for the above requirement. He prepares the script to place an order on the website. The script takes 30 seconds but you must try "final grade calculator
ReplyDelete"without any think time to complete one iteration. He adds 5 seconds think time between the transactions and gets 30 seconds as total think time. He assumes 60 seconds pacing.
ca colleges in hyderabad
ReplyDeletemec inter colleges in hyderabad
cec inter colleges in hyderabad
Cma Colleges in hyderabad
degree colleges in hyderabad
cs colleges in hyderabad