Youtor
Controllers in AngularJS
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=mW25S2tiCOM
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...
#############################
