this is the second article continue with angular basics and followed with the http://cgenit.blogspot.com/2015/04/angular.html
Here we are going to discuss the first major concept, View and controller.
Angular provides a nice mechanism called view and controller which enhances the readability and re-usability of the code.
controller has the data and the function. controller bind to view with something called $scope.
This is the glue between controller and the view.
Controller need not to know anything about the View and View does not want to know anything about the Controller. This achieved simply by using the concept of $scope.
angular has lots of objects defined with the $ sign and you will see them as you dig up more with the angular.
Let's go to example, let's try to do the same example we did to customer data set using Controller.
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div>
<p>
Name: <input type="text" data-ng-model="name">
</p>
{{name}}
</div>
<div data-ng-controller="SimpleController">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li
data-ng-repeat="customer in customers | filter:name | orderBy:'city'">{{customer.name
| uppercase}}- {{customer.city | lowercase}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [ {
name : 'Shaun',
city : 'Phoenix'
}, {
name : 'Dilan',
city : 'Chicago'
}, {
name : 'Mike',
city : 'NewYork'
} ];
});
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
We haven't change the logic used in previous example in http://cgenit.blogspot.com/2015/04/angular.html
Here we have introduced a Controller.
Before that we have given a name to the application "myApp". If you see the opening HTML tag you will that.
Then we move to definition of the Controller.
We have defined inside separate area , as a separate script. If you familiar with packaging and modularising , now you should see that.
We are defining the Controller in a separate script, inside "script" tags.
First, we define a variable or a holder for application.
var app = angular.module('myApp', []);
we have defined a variable "app" or module with module giving our application name "myApp"
don't worry about empty braces.. well that's for dependency injection.. or we can say module myApp depend on applications, can be given inside those.
Second , then we define the Controller
we define the controller as function. this is more like simple java-script function. we have included $scope in the Controller definition. This is scope which acts as a glue between Controller and the View.
As we have included Controller inside a separate script , you can simply include that into separate file and include in the main file.
So when we are using Controller , with use of data-ng-controller , we give the name of the Controller we are using. the functions and the data defined within the scope of the specified Controller will be available. In this case , we have given inside a div tag, and "SimpleController" Controller data and functions will be available within the div tag.
So when you run the above code , you will see the same output as the previous example.
No comments:
Post a Comment