how to build an angular spa module - dnn-connect … to build an angular...•get in touch with...
TRANSCRIPT
![Page 1: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/1.jpg)
#DNNConnect2016
How to build an Angular SPA module
Torsten Weggen
Indisoftware GmbH
Twitter: @weggetor
![Page 2: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/2.jpg)
#DNNConnect2016
Please support our valuable sponsors
![Page 3: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/3.jpg)
#DNNConnect2016
About me
This is not! where I come from!
![Page 4: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/4.jpg)
#DNNConnect2016
Coming from Hamburg in Northern Germany!
![Page 5: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/5.jpg)
#DNNConnect2016
We are more the rough guys …
Between liver and spleen Christmas stress ? You can have this!
![Page 6: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/6.jpg)
#DNNConnect2016
And we love our lawns !
Holy lawn. (St. Pauli soccer club)
![Page 7: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/7.jpg)
#DNNConnect2016
Now lets start!
Agenda
![Page 8: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/8.jpg)
#DNNConnect2016
Agenda
•Get in touch with Angular JS
•Standard SPA app vs. DNN SPA module
•Using JS libraries
•A look at the different layers of a DNN SPA module• Injecting information (Settings, Localization etc)
• Angular modules, directives, controller
• Bootstrapping Angular
• Routing
•Samples
![Page 9: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/9.jpg)
#DNNConnect2016
Get in touch with AngularJS
• Javascript Framework by Google (http://angularjs.org)
• Used on 0.5 % of ALL Websites (https://w3techs.com/technologies/details/js-angularjs/all/all)
• Lots of code samples, modules, extensions (eg. http://ngmodules.org/ , GitHub)
• New version 2 (RC) using Typescript
• Great course to start: (https://www.codeschool.com/courses/shaping-up-with-angular-js)
• John Papa is the style guru (https://github.com/johnpapa/angular-styleguide)
![Page 10: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/10.jpg)
#DNNConnect2016
Using Javascript Libraries
• Use DNN Javascript libraries !
• Create a package for every Angular component you use!
• Reusage in different modules
• No multiple loading of libs (DNN controls injection of scripts)
• See https://github.com/EngageSoftware/DNN-JavaScript-Libraries
• Demo
![Page 11: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/11.jpg)
#DNNConnect2016
SPA Architecture - Classic
ASP.NET MVC / Node.js HTML5 / AngularJS / more JS Libs
![Page 12: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/12.jpg)
#DNNConnect2016
SPA Architecture - DNN
![Page 13: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/13.jpg)
#DNNConnect2016
Have a look at the BBAngularConnect module
Demo: Sample Module BBAngularConnect
![Page 14: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/14.jpg)
#DNNConnect2016
Different layers of SPA module – DAL 2
Data Access Layer (DAL 2, with PetaPoco)• methods for CRUD Operations to the Database
• Definition of Entity POCOs
![Page 15: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/15.jpg)
#DNNConnect2016
Different layers of SPA module – WebAPI
Webservice Layer (WebAPI)• RouteMapper.cs – defining the standard route
• StoryController.cs – WebAPI methods
> http://dnn8.local/desktopmodules/bbangularconnect/API/story/new
![Page 16: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/16.jpg)
#DNNConnect2016
Different layers of SPA module – HTML/CSS
View Control (SPA->Plain Html)
• Including CSS and JS files
• ng-view is where the content is rendered
![Page 17: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/17.jpg)
#DNNConnect2016
Different layers of SPA module – HTML/CSS
View Control (SPA->Plain Html)
![Page 18: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/18.jpg)
#DNNConnect2016
Different layers of SPA module – JSON
• Problem: Providing Localization, Settings etc. needs extra AJAX call.
• Solution: • Sample all needed Data
• convert to JSON
• Inject in View.html via Token
TokenProvider – Generate JSON
See code !
![Page 19: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/19.jpg)
#DNNConnect2016
Different layers of SPA module – Angular App
Angular app class
• Instantiating our module
• Registerung other module with DI
![Page 20: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/20.jpg)
#DNNConnect2016
Different layers of SPA module – Service
Service class
• Invoking Ajax calls
• Returning results as promises
![Page 21: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/21.jpg)
#DNNConnect2016
Different layers of SPA module – Angular Directive(s)
Directive dnnLabel
• Encapsulating Html and
functionality as own tag or
attribute
![Page 22: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/22.jpg)
#DNNConnect2016
Different layers of SPA module – Angular Routing
Angular Routing
• Defining the different „pages“ of the application
• Using # - Url (no page reload)
• Defining template + controller per page
![Page 23: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/23.jpg)
#DNNConnect2016
Different layers of SPA module – Angular Controller
Angular Controller
• Business logic
• Defining viewmodel variables
• Querying and sending data via
service
• Decorating the „scope“ with
variables and functions
See code !
![Page 24: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/24.jpg)
#DNNConnect2016
Different layers of SPA module – Templates
Dynamically loaded HTML templates
![Page 25: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/25.jpg)
#DNNConnect2016
Adding some functionality
Extending the Edit form with star rating
Demo !
![Page 26: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/26.jpg)
#DNNConnect2016
Real world samples
Samples !
![Page 27: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/27.jpg)
#DNNConnect2016
Questions?
Please remember to evaluate the session online
Thank you
![Page 28: How to build an Angular SPA module - DNN-Connect … to build an Angular...•Get in touch with Angular JS •Standard SPA app vs. DNN SPA module •Using JS libraries •A look at](https://reader035.vdocuments.us/reader035/viewer/2022062602/5ee01314ad6a402d666b53e9/html5/thumbnails/28.jpg)
#DNNConnect2016
Contact me if you have questions!
Torsten Weggen
Indisoftware GmbH
Email: [email protected]
Twitter: @weggetor