Workflow - AngularJS Components - Page Source

Published on Thursday, 7 September 2017
Workflow AngularJS

In this Article I will run through the differences in the Page Source when you add AngularJS to your Web Forms.

Table Of Contents

There are changes to the JS / CSS files.

The Angular Directives are added to the page.

For more information go to the following site and run through some tutorials.

Angular Logo https://angular.io/

If we run both projects in Debug and View Source on the page you can then use something like https://www.diffchecker.com/ to compare.

Key - O (Original) | A (Angular)

O

<link type='text/css' rel='stylesheet' href='/SymWebInclude/styles/kendo.fb.min.css'/>

A

<link type='text/css' rel='stylesheet' href='/SymWebInclude/styles/kendo.bootstrap.min.css'/>

There are a number of ScriptResouce files generated

<script src="/DemoOFAngularJSComponents0/ScriptResource.axd?d=... type="text/javascript"></script>

Then the main change is the content of the page.

O

<div 
 id="l1b" 
 tabindex="2" 
 class="fb-grid" 
 name="l1b" 
 style="height:200px;width:400px;position:absolute;left:41px;top:30px;-moz-box-sizing:border-box;box-sizing:border-box;-moz-resize:none;resize:none;overflow:visible;">
 ...
 <!-- Loads of hidden elements, then the Table -->
 <div class="fb-col-box">
  <div>
   <table cellspacing="0" cellpadding="0" style="width:5400px">
    ...
   </table>
  </div>
 ...
</div>

A

<div 
 id="l1b" 
 tabindex="2" 
 ng-controller="l1b_Ctrl" 
 k-options="controlConfig" 
 kendo-grid="" 
 name="l1b" 
 style="height:200px;width:400px;position:absolute;left:41px;top:30px;-moz-box-sizing:border-box;box-sizing:border-box;-moz-resize:none;resize:none;overflow:visible;">
</div>

As you can see we now have an ng-controller which if we look at the documentation

ng-controller="l1b_Ctrl"

https://docs.angularjs.org/api/ng/directive/ngController

The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

Scrolling further down the Source we see that the script has most of the content now. Adding all the new Filtering options etc.

O

<script type="text/javascript">
 ...
 <script>var lfb=lfbInit('l2b');</script>
 <script>
  WebForm_InitCallback();$(function(){
   ...
  }
 </script>
 ...
</script>

A

<script>var lfb=lfbInit('l2b');</script>
<script>
 angular.controller('l1b_Ctrl',function ($scope) {
  $scope.controlConfig = {
 ...
 }
</script>

This is all generated for you but you can hook into the controls with their ids if you were wanting to implement extra functionality.

Protirus