What should you expect from this blog series ?
This blog series should set you in the position to start DNN module development with Angular even if you haven't done a module for DNN yet. So we will start with an empty project in Visual studio and build it up step by step. I plan to guide you through all these steps. But beware, this is no Angular course! I will not explain all the stuff that is involved in full detail because that would fill a book and is way too much for a blog like this, but where possible I'll provide you some links with further information to the corresponding topic. First we will start with a DNN 7 style Angular module using standard View.ascx that is able to run in DNN 7 and later we will convert this to a SPA module type for DNN 8.
My personal Angular history
I started my carreer developing desktop applications with Visual FoxPro which was similar to VB6. You create a form, throw controls on it, doubleclick on a button, write code what should happen if you click the button, run it and it works. VFP was outdated one day and I started to code in Visual Studio. Winforms was a natural learning path for me and the paradigma was not too different so this worked OK for me. But everywhere it whispers : "XAML, MVC, WPF, Silverlight..." and a dozen new technologies for creating desktop applications came up and nobody knew which one would win. And I couldn't decide what to learn next either. I tried a little bit WPF but it was awful. Throwback in productivity 500%. After some more tries I totally stopped developing desktop application and decided to go the web way which seems to be the future for me (for heavens sake I was right!). But holy crap, this was not easy! I had to learn that every click on a button first has to go to the server and the result has to be rendered on the server and send back trough the wire and the state of controls must be sent back and forth - you all know this server side stuff! But I learned it with a lot of obstinacy and created some really sophisticated DNN modules over the time. Nevertheless it bugs me that the whole thing feels so stiff and slow and I started to look at client side development. Naturally for me I started with Knockout which came out-of-the-box with DNN. Suddenly it feels a little bit like magic again, like in the old desktop days. You create some UI with HTML and define which data go to which control, bind the data to your UI and BÄM! its working all alone in the browser! I was happy and started to use it extensively. Felt very good and the user experience was great because of the responsiveness and speed. There are some aspects in Knockout that makes programming a little bit laborious (observables...) but I got familiar with them. Finally at DNNConnect 2015 in France I saw a session from Daniel Mettler (2sic) about Angular module development and I realized that this is really impressive. Its not only about databinding like Knockout, it does the whole thing! And its easy to write and understand! And modular! Need some diagrams in your app ? Go for a angular diagram library in the web, download the code and throw it into your app and simply use it. I really love this because after all those years I can feel the easyness of programming like in former VFP times again. I hope I can ignite this fever in you too with this blog series!
Some fundamentals about SPA architecture and Angular
Angular registers the button click and invokes an REST AJAX call to the server. On server side this call is received by the WebAPI which converts the REST call to a method call to the controller with typed parameters. In the controller the method call is converted by PetaPoco to pure SQL that quests the database and returns the data. The controller takes the data and converts them back to an object or IEnumerable and returns them to the Web API. In this layer they are converted into json and sended back to the browser where finally Angular receives them back and automatically actualizes the Html depending on the action.
The benefits of using Angular
Two-Way-Databinding is meant as synchronisation of the data between View and Model. If we change the data in the view, the changes are automatically transferred to the datastructure in the model. If we change the data in the modell, automatically the display in the view changes too.
Extensability and Readability of HTML
One of the most outstanding features of the framework is the possibility to create user defined HTML tags and attributes. These tags and attributes could be used then in your application as standalone, reusable extensions. Instead using a lot of deep nested div elements a better and easier to read code takes place. See the following example:
<image-uploader accepted-type="image/png" enable-drag-drop></image-uploader>
Abstraction of low level operations
When we use jeury we have to do always the same things: DOM selection and manipulation. When we had inserted a new element in an array, we use jquery to find the correspondig list in the DOM (selection) and then we need to insert the new node there (manipulation). In Angular we only describe that we want to link the list in the DOM with the array. From this point on Angular synchronizes everything automatically. The philosophy of Angular is, that a web application changes its representation only as a result of changes in the corresponding viewmodel. Direct manipulation of the DOM is in most cases unwanted! For this purpose Angular makes use of a lot of predefined directives, all beginning with the prefix ng- (ng-click, ng-href, ng-...).
For the wiring of the components angular has a built-in dependency injection container (DI). Instead of binding the components statically, one registers them as standalone, isolated modules and describe their dependencies declarative. Angular solves these afterwards automatically. Software development and testing could be simplified considerably.
The original author, Miško Hevery has placed great emphasis on testability. This refers not only to the very good test coverage in the framework itself. Even the developer himself should be able to test his application easy. If you stick to the Angular way, tests are really very easy to write .
Including Angular into your module
What you need to know is that one library can hold only one js library, normally in the minified version. You can attach corresponding files like css, map and unminified version of the js, but it is not possible to have multiple other js files (for example for i18n = localization) also packaged into this library - they are not loaded! You need to build another package.
These components should be zipped together into one file (e.g. angular_1.4.5.zip). Now you are able to install this zip file like any other package in host-Extensions.
<dotnetnuke type="Package" version="5.0">
<description>AngularJS is what HTML would have been, had it been designed for building web-apps.</description>
<license src="LICENSE.htm" />
<releaseNotes src="CHANGES.htm" />
For more information about DNN manifest files, see: http://www.dnnsoftware.com/wiki/manifests
In the next part of this blog series we will start making our hands dirty. In the mean time I'll leave you some resources that helped me a lot getting started with Angular.
The first one is a free online course by Code School "Shaping up with Angular". Its an interactive course where you listen to some webcasts and after each lesson you get some quests to solve online - very helpful!
The second one is the Angular Style Guide by John Papa. In my opinion a "must read" because he defines a lot of patterns that makes your code more readable and structured. And he is an advocate for the "controllerAs View Syntax" avoiding the $scope syntax which is definitely the better and more robust syntax style ($scope => dll hell for Angular).
DNN Hero webcasts by Scott Wilkinson about Advanced Module Development. These helped me a lot to get started with Angular in DNN modules. This is a payed resource but it is really worth it!
And, last but not least, not to forget the Angular Homepage full with Youtube videos, tutorials, courses, case studies, guides, references etc.!