In this Article, we will see the role of Modules, Controllers, $scope in AngularJS Application.
In previous AngularJS Tutorials Series, We saw
Module: Module in AngularJS applications is a container for controllers, directive, filters, services etc and helps in packaging code as reusable modules.
Creating/Defining a Module:
$scope acts as a glue between application controller and the view. $scope is dynamically injected into controller's function. We have added some data to $scope properties.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Working with Controller</title>
<script src="Script/angular.js"></script>
<script>
// Declare a module
var myApp = angular.module('myApp', []);
//Registering a controller in myApp module
myApp.controller('myController', function ($scope) {
$scope.Name = "Anoop Kumar Sharma";
$scope.Website = "www.ittutorialswithexample.com";
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Name:{{Name}}<br />
Website:{{Website}}
</div>
</body>
</html>
|
Preview:
Example2.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Working with Controller</title>
<script src="Script/angular.js"></script>
<script src="Script/controller.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Name:{{Name}}<br />
Website:{{Website}}
</div>
</body>
</html>
|
// Declare a module
var myApp = angular.module('myApp', []);
//Registering a controller in myApp module
myApp.controller('myController', function ($scope) {
$scope.Name = "Anoop Kumar Sharma";
$scope.Website = "www.ittutorialswithexample.com";
});
|
[Download Source Code via Google Drive]
0 comments:
Post a Comment