Suggested Videos
Part 1 - What is AngularJS
In this video we will discuss
1. What is a module in angular
2. How to create a module
3. What is a controller in angular
4. How to create a controller
5. How to register a controller with the module
6. How to use the module that we created to bootstrap the angular application
What is a module in AngularJS
A module is a container for different parts of your application i.e controllers, services, directives, filters, etc. In this video we will also discuss controllers. We will discuss services, filters and directives in a later video.
Why is a module required
You can think of a module as a Main() method in other types of applications. For example, a Dot Net console application has a Main() method which is the entry point into the application and it wires together the different parts of the application.
Modules are the angular application's equivalent of the Main() method. Modules declaratively specify how the angular application should be bootstrapped.
There are several benefits of the modular approach. It may be difficult to comprehend all those benefits right now, so we will defer the discussion of the benefits to a later video.
How to create a module
Creating a module in angular is staright forward. Use the angular object's module() method to create a module. The angular object is provided by angular script. The following example, creates a module.
var myApp = angular.module("myModule", [])
The first parameter specifies the name of the module.
The second parameter specifies the dependencies for this module
A module can depend on other modules. We will discuss an example of module dependencies in a later video. Right now, the module that we are creating is not dependent on any other external modules, so I am passing an empty array as the value for the second parameter.
What is a controller in angular
In angular a controller is a JavaScript function. The job of the controller is to build a model for the view to display. The model is the data. In a real world application, the controller may call into a service to retrieve data from the database.
How to create a controller in angular
Simple, create a JavaScript function and assign it to a variable
var myController = function ($scope) {
$scope.message = "AngularJS Tutorial";
}
What is $scope
$scope is a parameter that is passed to the controller function by angular framework. We attach the model to the $scope object, which will then be available in the view. With in the view, we can retrieve the data from the scope object and display.
How to register the controller with the module
Use module object's controller function to register the controller with the module
myApp.controller("myController", myController);
Here is the complete code
The above code can also be written as shown below
How to use the module that we created to bootstrap the angular application
Associate the module name with ng-app directive
ng-app="myModule"
Similarly associate the controller using ng-controller directive
ng-controller="myController"
Here is the complete HTML
Here is the complete JavaScript
Part 1 - What is AngularJS
In this video we will discuss
1. What is a module in angular
2. How to create a module
3. What is a controller in angular
4. How to create a controller
5. How to register a controller with the module
6. How to use the module that we created to bootstrap the angular application
What is a module in AngularJS
A module is a container for different parts of your application i.e controllers, services, directives, filters, etc. In this video we will also discuss controllers. We will discuss services, filters and directives in a later video.
Why is a module required
You can think of a module as a Main() method in other types of applications. For example, a Dot Net console application has a Main() method which is the entry point into the application and it wires together the different parts of the application.
Modules are the angular application's equivalent of the Main() method. Modules declaratively specify how the angular application should be bootstrapped.
There are several benefits of the modular approach. It may be difficult to comprehend all those benefits right now, so we will defer the discussion of the benefits to a later video.
How to create a module
Creating a module in angular is staright forward. Use the angular object's module() method to create a module. The angular object is provided by angular script. The following example, creates a module.
var myApp = angular.module("myModule", [])
The first parameter specifies the name of the module.
The second parameter specifies the dependencies for this module
A module can depend on other modules. We will discuss an example of module dependencies in a later video. Right now, the module that we are creating is not dependent on any other external modules, so I am passing an empty array as the value for the second parameter.
What is a controller in angular
In angular a controller is a JavaScript function. The job of the controller is to build a model for the view to display. The model is the data. In a real world application, the controller may call into a service to retrieve data from the database.
How to create a controller in angular
Simple, create a JavaScript function and assign it to a variable
var myController = function ($scope) {
$scope.message = "AngularJS Tutorial";
}
What is $scope
$scope is a parameter that is passed to the controller function by angular framework. We attach the model to the $scope object, which will then be available in the view. With in the view, we can retrieve the data from the scope object and display.
How to register the controller with the module
Use module object's controller function to register the controller with the module
myApp.controller("myController", myController);
Here is the complete code
//Create
the module
var myApp = angular.module("myModule", []);
//Create
the controller
var myController = function ($scope) {
$scope.message = "AngularJS Tutorial";
}
//
Register the controller with the module
myApp.controller("myController", myController);
The above code can also be written as shown below
//Create
the module
var myApp = angular.module("myModule", []);
//
Creating the controller and registering with the module all done in one line.
myApp.controller("myController",
function
($scope) {
$scope.message = "AngularJS Tutorial";
});
How to use the module that we created to bootstrap the angular application
Associate the module name with ng-app directive
ng-app="myModule"
Similarly associate the controller using ng-controller directive
ng-controller="myController"
Here is the complete HTML
<!doctype html>
<html ng-app="myModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
</body>
</html>
Here is the complete JavaScript
///
<reference path="angular.min.js" />
//Create
module
var myApp = angular.module("myModule", []);
//
Register controller with the module
myApp.controller("myController",
function
($scope) {
$scope.message = "AngularJS Tutorial";
});
dear sir,
ReplyDeletei'm working with your angular js code in vs2008 and vs2010 but its showing an error that 'angular' is undefined. please do needful
thanks for your fabulous video tutorial..
Do you have any sample code of what you are trying? It is working for me in VS 2010
Deletesame venkat sir code as is. but i'm using ie8.Is that the problem?
DeleteI think IE8 shouldn't be a problem (but I am not sure about it as IE8 supports Javascript its shouldn't be a problem with AngularJS too). I could able to replicate your error message when I placed AngularJS reference below
Delete(Sorry I am unable to use angular brackets because this comments section is not supporting HTML text)
script src="Scripts/AngScript.js"
script src="Scripts/angular.min.js"
But it was fine when the AngularJS reference is the topmost one like below.
script src="Scripts/angular.min.js"
script src="Scripts/AngScript.js"
So try this if you are doing differently.
Best
Rama
Thank you for your replay.
ReplyDeleteif i use ie9 works fine.
when I am writing the code in .html page vs2012 then I am getting the error
ReplyDeleteas ["Attribute" ng-app is not a valid attribute of element 'html' ]
dear sir,
ReplyDeletei'm working with your angular js code in vs2017 and vs2017 but its showing an error that 'angular' is undefined. please do needful
thanks for your fabulous video tutorial..