All for Joomla All for Webmasters

AngularJS First Example

AngularJS applications are a mix of HTML and JavaScript. The first thing you need is an HTML page.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. .
  5. .
  6. </head>
  7. <body>
  8. .
  9. .
  10. </body>
  11. </html>

Second, you need to include the AngularJS JavaScript file in the HTML page so we can use AngularJS:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js”></script>
  5. </head>
  6. <body>
  7. .
  8. .
  9. </body>
  10. </html>

Note: You should always use the latest version of AngularJS, so it is not necessary to use the same version as the above example.

AngularJS First Example

Following is a simple “Hello Word” example made with AngularJS. It specifies the Model, View, Controller part of an AngularJS app.

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.     <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js”></script>
  5. </head>
  6. <body ng-app=“myapp”>
  7. <div ng-controller=“HelloController” >
  8. <h2>Hello {{helloTo.title}} !</h2>
  9. </div>
  10. <script>
  11. angular.module(“myapp”, [])
  12.     .controller(“HelloController”, function($scope) {
  13.         $scope.helloTo = {};
  14.         $scope.helloTo.title = “World, AngularJS”;
  15.     } );
  16. </script>
  17. </body>
  18. </html>

View Part

  1. <div ng-controller=“HelloController” >
  2. <h2>Hello {{helloTo.title}} !</h2>
  3. </div>

Controller Part

  1. <script>
  2. angular.module(“myapp”, [])
  3.     .controller(“HelloController”, function($scope) {
  4.         $scope.helloTo = {};
  5.         $scope.helloTo.title = “World, AngularJS”;
  6.     });
  7. </script>
PinIt
submit to reddit

Leave a Reply

Top