So as per our last blog, we have bootstrapped Angular and now we will start writing some code for beginners. If you take any UI there will always be user actions. So we will start wiring some of the user actions. Before getting in to code its important to understand there are several inbuilt ng events bundled with angular. So in this example we will how we handle a click event in angular and update some data on click of a button.
<html> <head> <script src="js/lib/angular.min.js"></script> <script src="js/controllers/mainController.js"></script> </head> <body ng-app="appViewer"> <div ng-controller="mainController"> <div>{{title}}</div> <input type="text" ng-model="textValue"> <button ng-click="updateTitle()">Update Title</button> </div> </body> </html>So the above highlighted code uses an inbuilt directive ng-controller which tied to mainController and next comes this new weird {{title}}. What’s this?
Well this is nothing Angular uses the value inside the double braces as an attribute the $scope which is nothing but the model. In this example “title” is a variable in the mainController.
MainController.js
var app = angular.module("appViewer",[]); app.controller("mainController",function($scope){ $scope.title = "IOS App Viewer"; $scope.updateTitle = function(){ $scope.title = $scope.textValue; } });So if you see the above code $scope.title =” IOS App Viewer” and this title variable is used inside the html and double braced so any change in $scope.title will change the view. This is one way of binding your model data in your view.
So if you run the above code you will be seeing an output like below
So the title variable by default is “IOS App Viewer” which gets binded and what if I want to update by title on click of “Update Title”. All I need to do is to get the value entered in the text input. To do that I need to use ng-model which is another way Angular uses for data binding.
<input type="text" ng-model="textValue">
So any string given inside ng-model will be magically available in the $scope so you don’t need to initialize or create a textValue variable in your scope.
Next step is to wire an ng-click event to your button.
<button ng-click="updateTitle()">Update Title</button>
Cool, but if you run your Application you may get an error saying that updateTitle method is not available. So what to do?
Well hope you got that by now, like the other variables you need to add the method/function “updateTitle()” in your $scope of your controller like the below.
$scope.updateTitle = function(){ $scope.title = $scope.textValue; }Awesome, now your first Angular click handler is ready and inside the function you are accessing the textValue which you have defined inside the text input’s ng-model and you are assigning that to the “title”. Bingo you are done with code of updating the title on entering some value in the text input and clicking updateTitle button will update the entered title in the place “IOS App Viewer” like the below.
Leave a Reply