In the last tutorial, we saw few things on a very high level. Lets now deep down in some details and learn more. In an angular based single page application (SPA), we generally have a basic page, usually called index.html. This page include all the css, scripts and other dependencies. All other pages are like just some portion of an html and are loaded over this page as per the requirement. However if the application is not SPA, we can have general html pages for each screen.
The interaction with the html is done by Controllers. Its a good idea, although not a mandate to have a separate controller for each view. We have already seen a controller in previous post. Lets see it again.
Angular Controller:
An angular controller is declared as follows:
angular.module('myModule')
.controller('myCtrl', function($scope){
});
where myModule is the ng-app for the application, myCtrl is the name of the controller and $scope is the angular dependency required by our controller. Whenever we define any angular directive or attribute in HTML, internally angular assigns a $scope variable to that HTML component. In this way every component in angular has a $scope variable attached to it. This makes $scope the most widely used angular variable too. You will be seeing a lot much use of $scope in any angular application.
All other dependencies needed by a controller goes along with $scope in controller declaration. This process is called Dependency Injection. If you have frameworks like Spring, you probably are aware of what a dependency injection is. However, if you are new to it, nothing to worry about.
In simple terms, by dependency injection we mean that we inject into our controller, all the things that we are going to need while working inside that controller. We just need to mention them at the time of declaration as below and Angular will have them ready for use in that controller. So we can directly start using them instead of making a call for them, initializing them and all the boring stuff.
For ex:
angular.module('myModule')
.controller('myCtrl', function($scope,$state){
});
In the above example, an additional $state service is passed to controller, which can be used anywhere within this controller.
In some cases, you might see the controller definition as below:
angular.module('myModule')
.controller('myCtrl', ['$scope', '$state', function($scope, $state){
}]);
This is required to be done in case your scripts goes for minification at a later stage, say in production environment. Generally while minifying all the arguments are replaced by variables like a, b, c, d etc. This is why when you open any minified library like jQuery or angular.js, all you get to see is variables like these. But for angular controllers, the argument name should remain intact to $scope or $state, whatever it is. Just for this purpose, they are passed within an array as shown above. This prevents the minification process from replacing these arguments by some random variables.
So, we saw how the angular controller is declared. Let's declare some variables inside the controller. In normal JavaScript, we declare variables using var keyword. While in angular a variable is defined as below:
angular.module('myModule')
.controller('myCtrl',['$scope', '$state', function($scope,$state){
$scope.aNewVariable="Hello"; //String variable
$scope.aNewVariable=true; //boolean variable
}]);
Similarly a function or method can be described in angular as follows:
angular.module('myModule')
.controller('myCtrl',['$scope', '$state', function($scope,$state){
$scope.aNewMethod= function(){
// function definition
};
}]);
If you are familiar with JavaScript or jQuery, a controller is pretty just a place to write any code that you write in your regular jQuery files. All you need to keep in mind is to pass the basic $scope variable in controller definition and all other dependency that you might need.
From here on, we will go with a basic application to demonstrate the working of various components in Angular JS. We will be creating a HTML template and will write the JavaScript code to interact with the HTML. If you are facing issues at any point, don't worry things will be much more clearer in coming tutorials.
For any doubts, you can always post your comments below.
The interaction with the html is done by Controllers. Its a good idea, although not a mandate to have a separate controller for each view. We have already seen a controller in previous post. Lets see it again.
Angular Controller:
An angular controller is declared as follows:
angular.module('myModule')
.controller('myCtrl', function($scope){
});
where myModule is the ng-app for the application, myCtrl is the name of the controller and $scope is the angular dependency required by our controller. Whenever we define any angular directive or attribute in HTML, internally angular assigns a $scope variable to that HTML component. In this way every component in angular has a $scope variable attached to it. This makes $scope the most widely used angular variable too. You will be seeing a lot much use of $scope in any angular application.
All other dependencies needed by a controller goes along with $scope in controller declaration. This process is called Dependency Injection. If you have frameworks like Spring, you probably are aware of what a dependency injection is. However, if you are new to it, nothing to worry about.
In simple terms, by dependency injection we mean that we inject into our controller, all the things that we are going to need while working inside that controller. We just need to mention them at the time of declaration as below and Angular will have them ready for use in that controller. So we can directly start using them instead of making a call for them, initializing them and all the boring stuff.
For ex:
angular.module('myModule')
.controller('myCtrl', function($scope,$state){
});
In the above example, an additional $state service is passed to controller, which can be used anywhere within this controller.
In some cases, you might see the controller definition as below:
angular.module('myModule')
.controller('myCtrl', ['$scope', '$state', function($scope, $state){
}]);
This is required to be done in case your scripts goes for minification at a later stage, say in production environment. Generally while minifying all the arguments are replaced by variables like a, b, c, d etc. This is why when you open any minified library like jQuery or angular.js, all you get to see is variables like these. But for angular controllers, the argument name should remain intact to $scope or $state, whatever it is. Just for this purpose, they are passed within an array as shown above. This prevents the minification process from replacing these arguments by some random variables.
So, we saw how the angular controller is declared. Let's declare some variables inside the controller. In normal JavaScript, we declare variables using var keyword. While in angular a variable is defined as below:
angular.module('myModule')
.controller('myCtrl',['$scope', '$state', function($scope,$state){
$scope.aNewVariable="Hello"; //String variable
$scope.aNewVariable=true; //boolean variable
}]);
Similarly a function or method can be described in angular as follows:
angular.module('myModule')
.controller('myCtrl',['$scope', '$state', function($scope,$state){
$scope.aNewMethod= function(){
// function definition
};
}]);
If you are familiar with JavaScript or jQuery, a controller is pretty just a place to write any code that you write in your regular jQuery files. All you need to keep in mind is to pass the basic $scope variable in controller definition and all other dependency that you might need.
From here on, we will go with a basic application to demonstrate the working of various components in Angular JS. We will be creating a HTML template and will write the JavaScript code to interact with the HTML. If you are facing issues at any point, don't worry things will be much more clearer in coming tutorials.
For any doubts, you can always post your comments below.
No comments:
Post a Comment
Your valuable comments on this post are welcomed. Think something is missing, something is inappropriate or want to share something???
Please feel free to comment..