Angularjs ngclick run local In notepad

Hi friends in this post I am sharing about ngclick in angularjs. And also how to run in notepad.Kindly read tis post if you want run angularjs in notepad.


angularjs-ng-click




A controller is a JavaScript Object, created by a standard JavaScript object constructor.To control and also to initiate a function work in the angular js applications, controllers are used.
And to name this controller ng-controller directive is used.The controller now starts to work with an object $scope.$scope is used to mention the variables and to perform function process, where variables is a value that can be changed according to the  needs of a program.Now this variable which is in the function  is called by ng-click ngclick is an html event in Angular js. ngclick is used to make an click event.And it performs the task as per the  given data's.

  • If you learned how to run angular js local ,then proceed to the next steps.In the img.html file copy and paste below code and remove if any old codes written.
<html ng-app>
  <head>
    <title>Tecinfoweb:AngularJS ng-click concept </title>
    <script src="angular/angular.min.js"></script>
  </head>
<style>
</style>
<h1 >TECHINFOWEB</hh1>
  <h3>AngularJS ng-click using notepad</h3>
<body>
<h3>Example:</h3>
  <div  ng-controller="techinfowebcontroller">
<button  ng-click="techinfowebclick = techinfowebclick + 1">Click here!</button>
<p>{{ techinfowebclick }}</p>

</div>
<script>
function techinfowebcontroller($scope) {
    $scope.techinfowebclick = 0;
    }
</script>
</body>
</html>
    In the given example,Angular js calls techinfowebcontroller as it was defined in ng-controller directive. The "tecinfowebcontroller"(we can also call whole techinfowebcontroller function  as "controller file"). Now this techinfowebcontroller starts to work with an object $scope.$scope is used to mention the variables and here the variable is  techinfowebclick = 0;Now this value=0 will be submitted wherever it is called.Here the button have ng-click and ng-click ="techinfowebclick = techinfowebclick + 1".Now value=0 submitted.And if a click process occurs then "techinfowebclick = 0+ 1" whic is equal to 1.Now this value=1 will be displayed in <p>{{ techinfowebclick }}</p> where {{ techinfowebclick }} is a data binding expression which used to display the data.The value will increment by 1 when next click occurs.Thus for each  click the value will be incremented 1.
    Demo:

    ng-click-demo
    Print Friendly and PDF
    SHARE

    About me

    Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

      Blogger Comment
      Facebook Comment

    0 comments :

    Post a Comment