Angular jS is contain the modules and the controller. In this tutorial we will learn what is the modules in Angular JS and how to create the modules in Angular JS.
What is Modules in Angular JS
Basically a module in angular JS is a container of different part of our application like services, controllers, filters etc.
Why we use Modules in Angular JS
Modules is the main method for the other application, as we know that most of application have the entry point means main method to connect the different part of application.
Angular JS does not contain the entry point or main method so modules are the main method for the angular JS. Modules declaratively specify that how to Angular JS application should be bootstrap.
How to create a Module in Angular JS
Creating a module in Angular JS is easy. For creating the module in angular JS use the Module() Method. Angular JS provide a script to create a Module, so following is the example to create a module in Angular JS
var myApp = angular.module("myModule", [])
|
First parameter is defining the name of the module.
Second parameter is defining the dependencies of this module.
A module can be dependent on the other module.
Declaration of the module in Angular JS
<div ng-app="myApp">....</div>
<script> var appModule = angular.module("myApp", []); </script> |
Create a controller in Angular JS
For understanding a module, we need to create a controller, Controller in angular JS is JavaScript function. The use of the controller is to create a model for the view to display the data.
How to create a controller in Angular JS
For creating a Controller, first create a JavaScript function and then assign this to a variable. Below is the code for creating the controller in angular JS
var AngularController = function ($scope) {
$scope.message = "Controller In Angualr JS"; } |
What is $scope
$scope is a parameter which is passed to the controller function using the angular framework. Here we add the model to the $scope object, after that it available in the view, then in the view we can get the data through the $scope.
Add the controller with the model.
Lets understand this with a example
1. Go to your visual studio and add a new project then select a empty template.
2. Now add a folder to your application and paste angular JS Script. And give the folder name as Scripts.
3. Add a another script to the script folder and give it name as “AngualrScript.js” .This file will contain all the custom JavaScript.
In this file create a module and the controller to this Script file, following is the code for this JavaScript file. Before that drag and drop the Angualr JS Script File.
/// <reference path="AngualrScript.js" />
//Create the module
var myApp = angular.module("myModule", []);
//Create the controller as anonynoumes Function
var AngularController = function ($scope) {
$scope.message = "Controller In Angualr JS ";
}
// Add controller with the module
myApp.controller("myController", AngularController);
this code can written as below
//Create the module
var myApp = angular.module("myModule", []);
// Creating the controller and add with the module .
myApp.controller("myController", function ($scope) {
$scope.message = "Controller In Angualr JS ";
});
|
4. Now right click on your application and add a HTML page.
5. Drag and drop angular JS Script to HTML page in head section.
6. Drag and drop the another “AngularScript.Js” to this HTML file.
Below is code for the HTML page
<!doctype html>
<!--Specify the Module as Value in ng-app, so it is going to be bootstrap to angualr application-->
<html ng-app="myModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/AngualrScript.js"></script>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
</body>
</html>
|
Now run your application and see the output
EmoticonEmoticon