AngularJs Basics

You can download the AngularJs to use via CDN. I am using doing my examples in

  • Visual Studio Code (VSC)
  • Live Server plugin for the VSC

Angular application based on the model-view-controller pattern. The view is based on the DOM. The controllers are JavaScript classes and the model data is stored in object properties1.

  • The model (line# 10) represent the current state of the application.
  • view (line# 12) for display the data
  • controllers manage the relationships of model and views.

Here the simplest two way binding where UI is mapped to JavaScript properties.

<!doctype html>
<html ng-app>

<head>
    <title>My AngularJS App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
</head>

<body>
    Value : <input type="text" ng-model="val" placeholder="cost" />
    <p>
        This is your value: {{val}}
    </p>
</body>

</html>

The binding agent is $scope(not only that there $location and so on. As shown in the line# 12 double-curly interpolaton insert val content to the template. If you run the above code, your output will be like the following.

In the above screenshot, you can enter the value for the input box and which will display in the text.

Controller

So far what we work with is view in the model-view-controller pattern. The controller is a manager/coordinator, for example, if you want initial value for above input.

<head>
  ...
  </script>
    <script>
        function ValCtrl($scope) {
            $scope.val = 1000.1;
        }
    </script>
</head>
<body ng-controller="ValCtrl">
...

As shown in the above, the controller is ValCtr. But in addition to that, you have to add the controller to the body element before your test. Please see for Nested Controllers.

Scope

Angular doesn't share the data. If you duplicate the code inside the body to have multiple input elements, one element change will affect response to one text. To explain this, say we need a multiplier as well.

function ValCtrl($scope) {
     $scope.val = 1000.1;
     $scope.multiply = $scope.val * 2;
}

And add the text to the body section.

<p>
    This is the result of multiplication: {{multiply}}
</p>

In the page load, you will find values are initialised as expected, but when you change the value, nothing will be changed. The solution is the watch function. 

function ValCtrl($scope) {
    $scope.val = 1000.1;
    $scope.$watch('val', function() {
        $scope.multiply = $scope.val * 2;
    }

Styling

Here the way to styling the total.

//display total
$scope.$watch('total', function() {
     $scope.total_display = $scope.total ? 'block' : 'none';
});

Add the following styling to the paragraph as follows

<p style="display: {{total_display}}">
    This is the result of multiplication: {{multiply}}
</p>

As shown above, based on the total, decide whether to display the bloc (true) otherwise none (false).

UI Components

For example 

<!doctype html>
<html ng-app>

<head>
    <title>Select example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script>
        function ValCtrl($scope) {


            $scope.cities = [{
                id: 1,
                country: 'Australia',
                capital: {
                    name: 'Sydney'
                }
            }, {
                id: 2,
                country: 'Sri Lanka',
                capital: {
                    name: 'Colombo'
                }
            }];
            $scope.my_city = $scope.cities[1];

        }
    </script>
</head>

<body>
    <div ng-controller="ValCtrl">
        City: <select ng-model="my_city" ng-options="item as item.country for item in cities track by item.id"></select>
        <p>
            Capital of the {{my_city.country}} is {{my_city.capital.name}}
        </p>
    </div>

</body>

</html>

As shown in the above, the select UI component select the c

Data Structure

We will start with the simplest data structure array::

<!doctype html>
<html ng-app>

<head>
    <title>My AngularJS App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script>
        function Ctrl($scope) {
            $scope.students = ["Ojitha", "Mark", "Nimal"];
        };
    </script>
</head>

<body ng-controller="Ctrl">
    {{students}}
</body>

</html>

Above code directlly show the out put such as ["Ojitha","Mark","Nimal"]. You can further format

<body ng-controller="Ctrl">
    <div ng-repeat="student in students">
        {{student}}
    </div>
</body>

Nested Controllers

If you have complex sections of your UI to maintain, you can keep your code simple by creating nested controllers that can share Angular Model and functions through an inheritance tree. For example, in the following code nested contoller is StudentCtrl without the scope show and hide methods will not be visible.

<!doctype html>
<html ng-app>

<head>
    <title>use of nestead controller</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script>
        function Ctrl($scope) {
            $scope.students = [{
                name: "Ojitha",
                subjects: ["Maths", "Physics"]
            }, {
                name: "Mark",
                subjects: ["Englis", "Art"]
            }, {
                name: "Nimal",
                subjects: ["Religon", "History"]
            }];
        };

        function StudentCtrl($scope) {
            $scope.show = function() {
                $scope.student.show_subject = true;
            };

            $scope.hide = function() {
                $scope.student.show_subject = false;
            }
        };
    </script>
</head>

<body ng-controller="Ctrl">
    <div ng-repeat="student in students" ng-controller="StudentCtrl">
        {{student.name}} (
        <a href="#" ng-click="show()" ng-hide="student.show_subject">show</a>
        <a href="#" ng-click="hide()" ng-show="student.show_subject">Hide</a> )

        <div style="margin-left: 50px;" ng-show="student.show_subject">
            <div ng-repeat="subject in student.subjects">
                {{subject}}
            </div>
        </div>
    </div>
</body>

</html>

In the above code nesting is defined in the body. The parent controller Ctrl is assign at line# 33 and the nested controller StudentCtrl assigned at line# 34. The actual nesting happens in scopes. The $scope passed to a nested controller prototypically inherits from its parent controller’s $scope.

Modules

Module provide namespace for related parts.

<!doctype html>
<html ng-app="myApp">

<head>
    <title>module example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script>
        var mod = angular.module('myApp', []);

        mod.controller('Ctrl',
            function($scope) {
                var someText = {};
                someText.message = 'Hello World';
                $scope.someText = someText;
            });
    </script>
</head>

<body ng-controller="Ctrl">
    <p>{{someText.message}}</p>
</body>

</html>

In the above code ng-app has defined as "myApp". This will keep the things out of the global namespace. Here ng-app defined the template boundaries.

Data Binding to Template

You can understand the following sequence diagram now becuase you know what is happening practically.

sequenceDiagram
    participant u as User
    participant b as Browser 
    participant s as Server
    participant a as Angular
    
    u->>+ b: (1) request a first page
  b->>+ s:  http request
  s-->>+b: (2) html
  b->>+a: (3) look "ng-app"
  loop until load all 
      a->>+b: (4) look directives and bindings
  end

Step 1 to 3 is common for all the applications.

Reference

  1. AngularJS by Shyam Seshadri and Brad Green, 2013. ↩

Comments

Post a Comment

commented your blog

Popular posts from this blog

How To: GitHub projects in Spring Tool Suite

Image
The first step is sign up in the GitHub and create a  new project. For example I’ve created a new project Spring3part7 in the GitHub. Before add the projects you need to configure STS for GitHub access. For example, you need to add configuration as shown in the following picture Git local repository also important Now you are ready to pull the project from the GitHub, in the STS import menu select the following Now type the project name and click the ‘Search’ as shown in the following. However, when you select the found project click ‘Finish’ nothing will change in the STS interface. Now you are going to create real project. Here I am going to create simple utility project. This template project need to be created inside the imported GitHub project You have to give the same project name of the GitHub project as shown in the following project Now your project is ready to push. Before that you need to add ignore flag to all the folders and files except pom...
Continue »

Spring 3 Part 7: Spring with Databases

Image
This is the 7 th part of the Spring 3 Series . Create MySQL 5.6 database ‘payroll’, CREATE DATABASE payroll; Next create a user for example, user ‘ojitha’ CREATE USER 'ojitha'@'localhost' IDENTIFIED BY 'ojitha'; Need to grant the ‘payroll’ access to user ‘ojitha’ as shown in the following. GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP ON payroll.* TO 'ojitha'@'localhost'; You can download freeware of TOAD for MySQL from here . Let create a first table, that contains all the states in Australia. You can create a table using visually using the icon given directly below the Tables tab in the Object Explorer as shown in the above diagram. CREATE TABLE payroll.STATE ( CODE CHAR(3) ASCII COMMENT 'State code', STATE VARCHAR(30), PRIMARY KEY (CODE) ) ENGINE = InnoDB COMMENT = 'Australian states' ROW_FORMAT = DEFAULT; In the my sql console you can the newly added table using the following command SHOW ...
Continue »

Parse the namespace based XML using Python

In this blog, I am considering how to parser and modify the xml file using python. For example, I need to parser the following xml 1 (slightly modified for this blog) and need to write the modified xml to out.xml file. Here the country.xml <?xml version="1.0"?> <actors xmlns:fictional="http://characters.example.com" xmlns="http://people.example.com"> <actor type='T1'> <name>John Cleese</name> <fictional:character>Lancelot</fictional:character> <fictional:character>Archie Leach</fictional:character> </actor> <actor type='T2'> <name>Eric Idle</name> <fictional:character>Sir Robin</fictional:character> <fictional:character>Gunther</fictional:character> <fictional:character>Commander Clement</fictional:character> </actor> </actors> In ...
Continue »