angularjsangularjs-scopefrontendangularjs-ng-show

Angularjs directive doesn't seems to be working could not able to resolve ngshow

Hi Guys I am an Entry level programmer for angularJS i tried to use ng-show but i dont know why its not been working. I used latest version of Angular js-1.7.9.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index Page</title>
    
    
</head>
<body >
<div ng-app="myApp">
    Enter Your Name: <input type="text" ng-model="firstName">
    <br>
    <b>{{firstName}}</b>
    <div ng-controller="ShowController">
        <button ng-click="showParagaph()">Click Me</button>
        <p ng-show="visible">Hello world</p>



    </div>


</div>

<script src="./js/angular.js"></script> 
 
<script>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
  
    $scope.visible=true;
    $scope.showParagraph = function() {
        $scope.visible=false;
    };
});



</script>
     
     

  
</body>
</html>
I tried to solve by many possibilites but couldn't get on the error. Thanks in Advance.

Solution

  • Fix the typo:

    ̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶P̶a̶r̶a̶g̶a̶p̶h̶(̶)̶"̶>̶C̶l̶i̶c̶k̶ ̶M̶e̶<̶/̶b̶u̶t̶t̶o̶n̶>̶ 
<button ng-click="showParagraph()">Click Me</button>


    var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {  
    $scope.visible=true;
    $scope.showParagraph = function() {
        $scope.visible=false;
    };
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
    Enter Your Name: <input type="text" ng-model="firstName">
    <br>
    <b>{{firstName}}</b>
    <div ng-controller="ShowController">
        <button ng-click="showParagraph()">Click Me</button>
        <p ng-show="visible">Hello world</p>
    </div>
</body>