Angular js is a javascript framework which is used to build web applications.
Benefits of angular js :
- Dependency injection
- Two way data binding
- Testing
- It uses model-view-controller
- Directives, filters etc
Angular js module & controller :
What is Module in angular js
A Module is a container for different parts of your application i.e. controller, services, directive, filters etc.
You can think of a module as a Main() method in other type of applications.
<script>
var newApp = angular.module(“newModule”,[]);
</script>
“newModule” is a name of module and [] is for dependency
What is Controller in angular js
A controller is a javascript function, its job is to bind a model for the view to display.
<script>
var newApp = angular.module(“newModule”,[]);
var newController = function($scope){
$scope.message = “Angular js Tutorial”;
}
</script>
Binding controller to module :
<script>
// creating module
var newApp = angular.module(“newModule”,[]);
// creating controller
var newController = function($scope){
$scope.message = “Angular js Blog”;
}
// binding controller to module
newApp.controller(“newController”,newController);
</script>
“newController” is name of controller and newController on right is value of controller.
Let’s make it short.
<script>
var newApp = angular.module(“newModule”,[]);
newApp.controller(“newController“,function($scope){
$scope.message = “Angular js Blog”
})
</script>
Now let’s add some object to a controller.
<script>
var newApp = angular.module(“newModule”,[]);
newApp.controller(“newController“,function($scope){
var user = {
name : “John”,
surname : “Doe”,
Age : 28
}
$scope.userDetails = user;
})
</script>
Now the complete working code for this application is given below, you can copy paste this code and run it.
<!DOCTYPE html>
<html>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<script>
var newApp = angular.module(“newModule”, []);
newApp.controller(“newController”, function ($scope) {
var user = {
name: “John”,
surname: “Doe”,
age: 28
}
$scope.userDetails = user;
})
</script>
</head>
<div ng-app=“newModule” ng-controller=“newController”>
Name : {{userDetails.name}}<br />
Age : {{userDetails.age}}<br />
</div>
<body>
</body>
</html>
Output for this code
Now lets create a module and controller and register the controller within the module in one line.
<script>
var newApp = angular.module(“newModule”,[]).controller(“newController”,function($scope){
$scope.message = “Angular js blog”;
})
</script>
If you like this blog, please share with your friend.
