Controllers in AngularJS
angularjs controller example
angularjs directive controller example
In this video we will continue our discussion on controllers in angular. This is continuation to Part 2. Please watch Part 2 from AngularJS tutorial for beginners.
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
We will discuss
Attaching complex objects to the scope
What happens if a controller name is mis-spelled
What happens if a property name in the binding expression is mis-spelled
How to create module, controller and register the controller with the module, all in one line
The job of the controller is to build a model for the view. The controller does this by attaching the model to the scope. The scope is not the model, it's the data that you attach to the scope is the model.
In the following example, $scope is not the model. The message property that we have attached to the scope is the model.
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS Tutorial";
});
The view will then use the data-binding expression to retrieve the model from the scope. This means the controller is not manipulating the DOM directly, thus keeping that clean separation between the model, view and the controller. So when you are developing controllers, make sure, you are not breaking that clean separation between the model, view and the controllers. The controller should only be used for setting up the $scope object and adding behavior it. We will discuss, when and why should we add behvior to the scope object in a later video.
In the example above, message is a simple property. You can also attach a complex object to the scope. In the example below, we have an employee object which is a complex object with 3 properties attached to the view.
myApp.controller("myController", function ($scope) {
var employee = {
firstName: 'Mark',
lastName: 'Hastings',
gender: 'Male'
};
$scope.employee = employee;
});
With in the view, we can then retrieve the employee properties and display them in the view as shown below
[div ng-controller="myController"]
[div]First Name : {{ employee.firstName }}[/div]
[div]Last Name : {{ employee.lastName }}[/div]
[div]Gender : {{ employee.gender}}[/div]
[/div]
What happens if the controller name is misspelled
When the controller name is misspelled, 2 things happen
1. An error is raised. To see the error, use browser developer tools
2. The binding expressions in the view that are in the scope of the controller will not be evaluated
If you are using the minified version of the AngularJS script, the error messages may not be readable. To get readable error message
1. In the developer tools, click on the link next to the error. This will lead you to a page, where you can see a much clean error message without all the encoding symbols.
2. Another option you have is, if you are in the development environment, you may use the non-minified version of the AngularJS script, which produces readable error message.
What happens if a property name in the binding expression is misspelled
Expression evaluation in angular is forgiving, meaning if you misspell a property name in the binding expression, angular will not report any error. It will simply return null or undefined.
How to create module, controller and register the controller with the module, all in one line
Use the method chaining mechanism as shown below
var myApp = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employee = {
firstName: 'Mark',
lastName: 'Hastings',
gender: 'Male'
};
$scope.employee = employee;
});
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
Auf dieser Seite können Sie das Online-Video Controllers in AngularJS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer kudvenkat 01 November 2015 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 678,522 Mal angesehen und es wurde von 1.9 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
