Hima replied to the topic 'How to create a controller in Angular JS?' in the forum. 11 months ago

Syntax is
<module name>.controller("<Controller name", function())

<script>
var x= angular.module("Module",[]);
x.controller("Controller", function($scope)
{
$scope.city="Hyderabad";
}

</script>

Read More...

Hima replied to the topic 'How to link your controller to HTML code?' in the forum. 11 months ago

To bind Controller to HTML, we need to use ng-controller
Example:

<!--Defining a Module and controller -->
<script>
var app= angular.module('Module, []');
app.controller('controller', function($scope))
{
$scope.name="XYZ"
}
</script>

<!-- Binding Module and controller to html-->
<div ng-app="Module1">
<div ng-controller="Controller">
</div>
Welcome {{name}}!
</div>

Read More...

Hima replied to the topic 'Create a simple application like gmail Inbox?' in the forum. 11 months ago

<!--Import Angular JS library scrpit-->
<script src=" ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js ">
</script>

<!--Binding Module to HTML using ng-app-->
<div ng-app="gmail">

<!--Binding Controller to HTML using ng-controller-->
<div ng-controller="Display">

<!-- HTML tag to Add a Heading-->
<h1>
Welcome {{name}} to Gmail
</h1>

<p>
<!-- Adding an input textbox with a place holder text search -->
<input type='text' ng-model="Key" placeholder="Search">
</p>

<!-- Dispalys number of mails by using length operator from messages object-->
<h3>
Inbox ({{messages.length}})
</h3>

<!--ng-repeat loops through the object and filters message using 'Key' entered in the text box above -->
<div ng-repeat="mails in messages|filter:Key">

<b>
{{ mails.subject}}
</b>
</br>
<i>
{{ mails.body}}
</i>
</div>


</div>
</div>

<!-- script tag is used to include Angular JS code-->
<script>

<!--Defining a Module-->

var app= angular.module('gmail',[]);

<!--Defining a controller-->
app.controller('Display', function($scope)
{
$scope.name='Hima';

<!--this the Jason object which has an object 'messages' with properties 'subject' and 'body'-->

$scope.messages=[
{subject:'Hi!', body:'Hi!, How are you? its been a long time'},
{subject:'Call Me', body:'Call me when possible'},
{subject:'Advice Needed', body:'I am totally stuck, Can you please advice what to do next?'},
{subject:'Hi Again', body:'Hi!, How are you? Call me'},
{subject:'Help Needed', body:'I need your help'},
{subject:'Beautiful Day', body:'Its a beautiful day out, why dont we go out?'},
{subject:'Surprise', body:'Click here to get your surprise'},
{subject:'Learn Angular JS', body:'Here is your opportunity to learn Angular JS'},
{subject:'Modules', body:'Angular JS contains Modules'},
{subject:'Controllers', body:'Modules contains one or more controllers'},
{subject:'Logic', body:'Each controller contains a logic'},
{subject:'Binding', body:'Modules and controlers need to be binded to html using ng-app and ng-controller'},
{subject:'Object', body:'Object is used to store data, it contains properties'},
{subject:'calling data from obect', body:'to access data from object use ng-repeat loop through the data in the object'},
{subject:'Modules', body:'Angular JS contains Modules'},
{subject:'Controllers', body:'Modules contains one or more controllers'},
{subject:'Logic', body:'Each controller contains a logic'},
{subject:'Binding', body:'Modules and controlers need to be binded to html using ng-app and ng-controller'},
]
}
);


</script>

Read More...