Using Controllers in AngularJS
The controllers primary purpose is to control the view model contained within the Angular scope. Controllers are used in AngularJS to:
- Set the initial state of Scope variables, which are then made available for the View to consume and interact with
- Add behavior to the Scope by two-way binding variables and declaring Scope functions
- Set up communications to and from the view and Model objects such as Services, brought in through Dependency Injection
Controllers are created by registering with an existing Angular Module.
var app = angular.module("app", [])
.controller("myController", [
"$scope",
function ($scope) {
// do work here
}
]);In our example that our controller is named myController, and that name will correspond to the ng-controller attribute in our HTML. Controllers are placed on the page with the ng-controller attribute. Here is an example using the myController we created.<body ng-controller="myController"> ... </body>Nesting controllers within each other results in separate scopes being created for each controller. Their scopes can be shared between each other by means of the scope.parent property. This can be useful for isolating logic within certain components of the page, but still maintaining a larger scope of more global function.<body ng-controller="pageController"><div ng-controller='myChildController'><div ng-controller='evenDeeperController'> </div> </div> </body>
The Overview of ScopeThe$scopeobject is used to make the model available to the view. It is also referred to as the view model. Essentially, if you want a variable to be able to be used or influenced by the view, you assign it as a sub property to the Scope. As discussed prior, the scope is defined and controlled by Controllers. To define Scope variables, simply assign them as subproperties of the$scopeobject.
var app = angular.module("app", [])
.controller("myController", [ "$scope", function ($scope) { $scope.name = "Fred Flintstone"; } ]);To create a function that your view can use (such as something bound to a click event), assign a function as a sub property of the Scope object, like so:var app = angular.module("app", [])
.controller("myController", [ "$scope", function ($scope) { $scope.title = "Home"; $scope.renameTitle = function (newValue) { $scope.title = newValue; }; } ]);Now, we are going to implement a controller in a practical scenario. The correspondence project can be downloaded from the link that is shown below.
https://github.com/Supeshala/Getting-Started-Angular/tree/master/Project2To implement this I am using Visual Studio Code and you can use any of the editor as you prefer.
- Open Visual Studio Code and Create a folder called Project 2.
- In Visual Studio Code, in the Explorer pane, to create a folder that you will use for your JavaScript files, click New Folder, type app and then press Enter.
- Create a index.html file, open it and type the below code.
4. Then just before the closing</body>tag, to add script references for the JavaScript files, enter the following code: The whole index.html file looks like this.5. Open app.js file and enter the following code.6. Create a menuController.js file and open it. To create a controller named 'menuController', enter the following code and finally save all.7. To bootstrap the app module, in the html tag update your code as follows.<html ng-app="app">8.In the<body>tag, to specify that your controller will apply to the body section of the page, update your code as follows:<body ng-controller="menuController">9.Below the<h1>tag containing "Tony's Pizza", to create placeholder text representing the restaurant menu, enter the following code and save all:<h2>{{'Menu'}}</h2>At this point, the code looks similar to the following.app.jsapp/menuController.js
Very good. Keep it up.But It will be very useful if you are going to teach us something in advance or some newest technology via you blog site.
ReplyDeleteThis comment has been removed by the author.
DeleteThanks for your admiration and for your advice too.
Delete