Overview

Skill Level: Intermediate

broad intermediate

This recipe describes the integration of data Model, View (HTML) and Controller (Angularjs) as a solution for an automation portal.
Other topics by the author in the "Automation Series" can be found at: https://developer.ibm.com/recipes/author/patemic/

Ingredients

Linux

Python

java script

Angularjs

NoSQL

 

Step-by-step

  1. MVC Construct

    The MVC method is decomposed as follows:

    • The Model is the data and hence, the data handler.  The Model is commonly developed on a Python base. Since data handling involves I/O, the Python module will require additional object imports sych as SQL or NoSQL, and O/S system features.
    • the View is the data presentation.  The View will require the initial HTML, rendered by the Python data handler as such can colocate in the container with the Python source.  The View’s initial HTML also contains js source references that will be loaded and executed on the client side.  Therefore the single page View in the MVC construct is dynamic.
    • The Controller is based on js and having data binding with the View, functions as data relay with the Model (Python) source. 

    The integration of the MVC components follows.  The graphic illustrates that after the client loads the intial HTML, client activity will result in Angularjs directives invoking actions in the data handler (Model) and hence probable data I/O activity.

     

    Master_Flow

  2. The MVC Components: The Model

    The decomposition of the Model’s Python setup and data handling components described with code examples is in Recipe: 

    Flask-Python as Web App Front End

    Please refer to the above recipe as the referenced code in the above link is relevent to this recipe and described integration of the Model, View, Controller plus a backend NoSQL. 

     

  3. MVC Components: The View

    The MVC method allows for a dynamic, single page HTML with dynamic functionality enabled by the inclusion of Angularjs directives. The architecture and source examples of the Angularjs Controller are described in the next step. The construct of the View are described here:

    In this example, Bower is used as a package manager to assist in ensuring compatibility and dependency management between HTML, CSS and js files and sources. The use of bootstrap as a bank of CSS, HTML design templates and essential js interractive features is covered in many sources and not covered in depth here.

    The order in loading files has significance.  Minified files are used for loading speed.  jquery is needed for bootstrap plugins and is loaded before bootstrap.min.js. Custom js files are loaded last, so as to allow the HTML to fully load first.  

    CSS References

    <!DOCTYPE html>

    <html lang=”en”>
    <head>

    |

    |

    <link href=”http://HOST/PORT/bower_components/bootstrap-css/css/bootstrap-theme.min.css” rel=”stylesheet”>

     <link href=”http://HOST/PORT/bower_components/bootstrap/dist/css/bootstrap.min.css” rel=”stylesheet”>

    </head>

     HTML Source

     
    <body>

        <div ng-app=”myApp” ng-controller=”HomeCtrl”>  define the application in which the View can access the model (data) and the controller that that owns the scope containing data within the <div>

    HTML source including angularjs directives follows, example: use an Angularjs directive (thisDirective) to invoke a method in the controller, because a button is pressed

    <button class=”w3-btn w3-large w3-blue” ng-click=”thisDirective()”>button_label </button>

    |

     

    js References

    In the example, controller-source.js is the app’s Controller source code and loads last of all. 

    <script type=”text/javascript” src=”http://HOST/PORT/bower_components/angular/angular.min.js”></script>

    <script type=”text/javascript” src=”http://HOST/PORT/bower_components/jquery/dist/jquery.min.js”></script>

    <script type=”text/javascript” src=”http://HOST/PORT/bower_components/bootstrap/dist/js/bootstrap.min.js”></script>

    <script type=”text/javascript” src=”http://HOST/PORT/bower_components/ng-ip-address/ngIpAddress.min.js”></script>

    <script type=”text/javascript” src=”http://HOST/PORT/controller-source.js”></script> This is the source code for the Controller for this app

     

  4. MVC Components: The Controller

    The Angularjs module will own the controllers identifed in the View. The single Controller also identified in the View is declared in this module. The Controller owns the data contained within the declared $scope and the $scope is bound between the View and its Controller. The Controller also owns the function $html, used to access routes in the model (data) handler Python app. The module also declares module dependencies including (for example) the module “app-ip”, which in turn declares its own dependent modules including “ng-ip-address”.

    angular.module(‘myApp’, [‘app-ip’])

        .controller(‘HomeCtrl’, function ($scope, $http) {            —declare functions employed between the controller-View and between the Controller-Python data handler
           

        $scope.info = {};  —initialize the Controller’s scope 

        $scope.initialval1 = 0;  —initialize some values within the scope

        $scope.initialval2 = 0;    

        $scope.initialval3 = 0;

       

       $scope.thisDirective = function () {   see directive referenced in above View step

                $scope.info.data1 = $scope.DataProvidedByUser      —User (browser) provided data is within the scope and therefore accessible within the Controller module

                $http({   —the $http function for accessing Python routes is also declared in this controller 

                    method: ‘POST’,  —will post the data (below) to the Python route identified in the URL

                    url: ‘http://FlaskPythonHostName:AppPort/mycode’,  –—Now point back to the route “mycode” in the Python app

                    data: {

                        info: $scope.info  —model (data) to be posted to the Python app

                    }

  5. …and back to the Model's Data Handler

    The Python/Flask app originally rendered the HTML document which contained references to all CSS, js files and including Angularjs directives. 

    Once the Angularjs posts data to the Python/Flask module, the Python code is responsible for exercising any Model (data) I/O necessary.

    Now refer back to Flask-Python as Web App Front End  steps 1 and 4 for examples of Python exercising NoSQL document insertions including the data that was posted by the Angularjs module. 

  6. Making the Automation Portal Commercially Available

    Great; you’ve created a MVC based automated portal app.  You should make your portal available for user consumption as the next step.  Deploying a resilient app as a light-weight Kubernetes Service is becoming common.  A guide for how to deploy a MVC based portal app as a Kubernetes Service in IBM Cloud is described in MVC App Deployed in IBM Cloud.  Using these guidelines can speed your concept to app delivery. All the best, and be creative!

Join The Discussion