Recently started to learn AngularJS, which is really a very good framework. It makes routes, Two way data binding and modular design easy.
I have created a minimal MVC example for beginners to get started with. This is a BMI calulator.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS Example</title> </head> <body> <div ng-app="" ng-controller="MainController"> <h2>BMI calculator</h2> Name: <input type="text" ng-model="name" /> <br> Weight: <input type="number" ng-model="weight" />kg <br> Height: <input type="number" ng-model="height" />cm <br> <p> Hi {{ name }}, your BMI is {{ calBMI() | number:2 }} </p> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script type="text/javascript"> var MainController = function($scope){ $scope.name = 'Jon Doe'; $scope.weight = 69; $scope.height = 173; $scope.calBMI = function(){ return $scope.weight / ($scope.height/100 * $scope.height/100); } }; </script> </body> </html> |
You can also try the jsFiddle here.
With all respect, but this doesn’t look like MVC to me.You have view and controller in a single file (and controller doesn’t choose the view). And the Model is missing completely, as you do not store any data here.