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.
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.
