Saturday, December 15, 2018

AngularJS Part2

The best way to see the power of an AngularJS Application is to create your first basic program "Hello World" app in Angular.JS.
There are many integrated development environments you can use for AngularJS development, some of the popular ones are mentioned below. In our example, we are using Webstorm as our IDE.
  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Hello world, AngularJS

The example below shows the easiest way to create your first "Hello world" application in AngularJS.
AngularJS Hello World: Your First Program
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body ng-app="app">
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>


Code Explanation:
  1. The "ng-app" keyword is used to denote that this application should be considered as an angular js application. Any name can be given to this application.
  2. The controller is what is used to hold the business logic. In the h1 tag, we want to access the controller, which will have the logic to display "HelloWorld", so we can say, in this tag we want to access the controller named "HelloWorldCtrl".
  3. We are using a member variable called "message" which is nothing but a placeholder to display the "Hello World" message.
  4. The "script tag" is used to reference the angular.js script which has all the necessary functionality for angular js. Without this reference, if we try to use any AngularJS functions, they will not work.
  5. "Controller" is the place where we are actually creating our business logic, which is our controller. The specifics of each keyword will be explained in the subsequent chapters. What is important to note that we are defining a controller method called 'HelloWorldCtrl' which is being referenced in Step2.
  6. We are creating a "function" which will be called when our code calls this controller. The $scope object is a special object in AngularJS which is a global object used within Angular.js. The $scope object is used to manage the data between the controller and the view.
  7. We are creating a member variable called "message", assigning it the value of "HelloWorld" and attaching the member variable to the scope object.
NOTE: The ng-controller directive is a keyword defined in AngularJS (step#2) and is used to define controllers in your application. Here in our application, we have used the ng-controller keyword to define a controller named 'HelloWorldCtrl'. The actual logic for the controller will be created in (step#5).
If the command is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
The message 'Hello World' will be displayed.
AngularJS Hello World: Your First Program

10 comments:

  1. This is an awesome post.Really very informative. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.
    Angularjs development company

    ReplyDelete
  2. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angularjs online training
    best angularjs online training
    top angularjs online training

    ReplyDelete
  3. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angular js online training
    best angular js online training
    top angular js online training

    ReplyDelete
  4. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angular-js online training
    best angular-js online training
    top angular-js online training

    ReplyDelete
  5. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angular js online training

    ReplyDelete
  6. This is one of the best article read in recent times. continue your good work.thanks for sharing with us.

    Inwizards LLC - Top Angularjs Developmant Company

    Hire Angularjs Developers

    Hire Angularjs Developer

    ReplyDelete