AngularJS - 02 (Intro Coding)

AngularJS is distributed as a JavaScript file,
and can be added to a web page with a script tag:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

</body>
</html>

Example explained:

AngularJS starts automatically when the web page has loaded.

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variable name.

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

--------------------------------------------------------------------------------------------------------------------

Steps to create AngularJS Application

<div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Step 1 − Load framework

Being a pure JavaScript framework, It can be added using <Script> tag.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Step 2 − Define AngularJS Application using ng-app directive

<div ng-app = "">
   ...
</div>

Step 3 − Define a model name using ng-model directive

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 3 − Bind the value of above model defined using ng-bind directive.

<p>Hello <span ng-bind = "name"></span>!</p>

-----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">


<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

<div ng-controller="HelloController" >
    <h2>Hello {{helloTo.title}} !</h2>
</div>

<script>
angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        $scope.helloTo = {};
        $scope.helloTo.title = "World, AngularJS";
    } );
</script>

</body>
</html>

In this example the "view" is this part:

<div ng-controller="HelloController" >

    <h2>Hello {{helloTo.title}} !</h2>

</div>

Notice the ng-controller attribute. This attribute tells AngularJS what controller to use with this view. Notice also the {{helloTo.title}} text. This is part of AngularJS's template system. This tells AngularJS to write the "model" value named helloTo.title to the HTML at this location.

The "controller" is this part:

<script>
angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        $scope.helloTo = {};
        $scope.helloTo.title = "World, AngularJS";
    });
</script>

This code registers a controller function named "HelloController" in the angular module named "myapp". Angular modules will be explained later in this tutorial.

The $scope parameter passed to the controller function is the "model". The controller function adds ahelloTo JavaScript object, and in that object it adds a title field. It is this helloTo.title value from the model which the view writes into the HTML.

Deepan's Tech

Search This Blog