Angular JS
It is a JavaScript framework used from creating Web Application.
Model
ngModel is responsible for Binding the view into the model. It 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.
Module
A module is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the $injector.
Controller
It is defined by a JavaScript constructor function that is used to increase the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function.A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $Scope.
Let's see with an example:
Step 1: This is going to be the structure.Include angular.js or angular.min.js file
Step 2: In ModuleScript.js
Step 3: In AngularExample.js
Step 12 : Run the Application
It is a JavaScript framework used from creating Web Application.
Model
ngModel is responsible for Binding the view into the model. It 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.
Module
A module is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the $injector.
Controller
It is defined by a JavaScript constructor function that is used to increase the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function.A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $Scope.
Let's see with an example:
Step 1: This is going to be the structure.Include angular.js or angular.min.js file
Step 2: In ModuleScript.js
///
<reference path="angular.min.js" />
var Angularapp = angular
.module("AngularModule", [])
.controller("AngularController", function ($scope) {
var employee = {
Name:"Sanjeet",
JobLocation: "Noida",
JobDescription:"Software Engineer"
}
$scope.employee=employee;
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularModule">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/ModuleScript.js"></script>
</head>
<body ng-controller="AngularController">
<table>
<tr>
<td>
Name:
</td>
<td>
<input type="text" ng-model="employee.Name" />
</td>
</tr>
<tr>
<td>
Job Location:
</td>
<td>
<input type="text" ng-model="employee.JobLocation" />
</td>
</tr>
<tr>
<td>
Job Description:
</td>
<td>
<input type="text" ng-model="employee.JobDescription" />
</td>
</tr>
</table>
<br /><br />
<table>
<tr>
<td>
Name:
</td>
<td>
{{employee.Name}}
</td>
</tr>
<tr>
<td>
Job Location:
</td>
<td>
{{employee.JobLocation}}
</td>
</tr>
<tr>
<td>
Job Description:
</td>
<td>
{{employee.JobDescription}}
</td>
</tr>
</table>
</body>
</html>
Text of Textbox and Label will simultaneously change.
Posts
0 comments:
Post a Comment