What is module and how to create a module
Module
is container for different parts of your application i.e controller,services,
directives filters etc.
You
can think module is as a main method in other application How to create Module :
Use
angular objects modules () method to create a module
Syntax
var app =
angular.module(“myModule”, []);
What is controller and how to create a controller
In
angular controller is a javascript function. The job of the controller is to
build a model for the view to display.
How to create a controller
Example
var controller = function($scope) {
$scope.message
= “AngularJS Tutorial”;
}
How to declare a Controller
Controllers in Angular JS
<div ng-app = "" ng-controller = "myController">
...
</div>
Here we've declared a controller "myController" using ng-controller directive.
Next step we'll define the "myController" as follows −
<script>
var app = angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.message = "AngularJS Tutorial";
});
</script>
Controllers attaching
complex object with the scope.Within the
view we can then retrieve the properties and display.
Example :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Modules and Controllers</title>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.message = "AngularJS Tutorial";
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
{{ message }}
</div>
</body>
</html>
Explanation :
In above example “myApp” is a module and “myController”
is a controller.
To scope object we are attaching message
property, message property have the “AngularJs
Tutorial” value. By using binding expression we are reading the value of
message property from the scope object.
Output :
AngularJS Controllers in External files
In larger applications, generally the controllers are
stored in external files. Create an external file named "script.js"
to store controller.
script.js
var app = angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.message = "AngularJS Tutorial";
});
index.html
Output
What happens if controller name misspelled :
index.html
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
src="script.js"></script>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Simple AngularJS
Application</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
{{
message }}
</div>
</body>
</html>
Output
What happens if controller name misspelled :
1. An error is occurred
2. The binding expression in the view that are in the scope of that controller will not be evaluated
What Happen if the property name in the expression is misspelled :
Expression Evaluation is forgiving , means if you misspell a property name in the binding expression, angular will not report any error. It will simply return null or undefined.