Stark-WebApp-Project/AngularJS_Example.cshtml at master · JSWesterfield/Stark-WebApp-Project · GitHub

1
<!DOCTYPE html><html><head>    <link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css>     <style></style></head><!-- 1) set up an ng-app attribute, usually in the body.--><body ng-app="testApp">   <!-- 3) Identify the portion of page I'll be manipulating using ng-controller.--><p ng-controller="MainController as main">    The current time is: <strong ng-hide="main.shouldTimeBeHidden">{{main.time}}</strong> <!-- 5A) interpolation {{ }}, equivalent to setting text --> <!-- 6A) use ng-hide-->    <button ng-click="main.doSomethingOnClick()">Click me!</button>  <!-- 7A) use ng-click for button. Don't forget the parenthesis () at the end since it's a function --></p>        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>    <script>        // 2) start up Angular. Takes 2 arguments: name of ng-app & any 3rd party plugin/set of code. If none, keep an empty array.         angular.module("testApp", []);        // 4A) create a controller. Takes 1 argument: testApp.         angular.module("testApp").controller("MainController", MainControllerFunction);  // (ng-controller name, function name). For Angular dependency injection.         // 4B) create function        function MainControllerFunction(){            var vm = this;            // 5B) gets the date and puts it into a string            vm.time = new Date().toString();            // 6B) hiding the time            vm.shouldTimeBeHidden = false;            // 7B) listening to DOM (ng-click). Create a function.`            vm.doSomethingOnClick = function(){                vm.shouldTimeBeHidden = !vm.shouldTimeBeHidden;            }        }    </script></body></html>