Menu ▼



Posted By :
avatarmrkraju
Total Views : 665

AngularJS Hello World

To write you first Hello World example in angularjs follow the below steps.

  • Add reference to AngularJS library in head tag.
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  • Add directives ng-app & ng-controller.
    <div ng-app="myApp" ng-controller="myCntrl">
  • Add directive ng-model to textbox.
    <input type="text" ng-model="hellomodel" />
  • Now in angular javascript assign the defalut value for model "hellomodel"
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {
            $scope.hellomodel = "Hello World!";
        });
    </script>
  • Thats all... now run the html page and change the text in the textbox the same will be binded to h1 tag.

Example
Change the text in the below textbox to see how ng-model will bind the model value to controls.

Enter text:


{{hellomodel}}


Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        Enter text:
        <br />
        <input type="text" ng-model="hellomodel" />
        <br />
        <br />
        <h1>
            {{hellomodel}}</h1>
        <script language="javascript">
            var myapp = angular.module("myApp", []);
            myapp.controller("myCntrl", function ($scope) {
                $scope.hellomodel = "Hello World!";
            });
        </script>
    </div>
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com