using angularjs with sitefinity. about me venkata koppaka senior software engineer at falafel...
TRANSCRIPT
![Page 1: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/1.jpg)
USING ANGULARJS WITH SITEFINITY
![Page 2: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/2.jpg)
ABOUT MEVenkata Koppaka• Senior Software Engineer at Falafel Software• Focus on WebCMS products• Loves AngularJS, and mobile development with
Xamarin• Twitter: @vkoppaka• Blog:
http://blog.falafel.com/author/venkata-koppaka/
![Page 3: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/3.jpg)
AGENDAGoal of the talk is to build a full web and mobile application powered by Angular• We will be talking about basics of AngularJS• We will be talking basics of WebAPI (which will expose Sitefinity’s
data)• We will be talking about an easy way to create WebAPIS in Sitefinity
using Babaganoush• Building a Conference web app which shows how to get and put
data into Sitefinity using widgets powered by Angular• Building a Conference mobile app which shows how to get data from
Sitefinity to a hybrid app powered by AngularJS
![Page 4: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/4.jpg)
WHAT IS ANGULAR• AngularJS is a super heroic javascript MVVM framework from
Google• Open sourced and has a really huge community behind it https://
github.com/angular/angular.js • NOT a DOM manipulation library like jQuery but uses a subset of
jQuery (jqLite)• V1.2.x is the current stable version. V1.3.x is the beta release and
V2.0.x is where Angular team is making big changes• Declarative HTML
![Page 5: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/5.jpg)
KEY FEATURES• Declarative HTML• 2 way databinding• Expressions• MVC / MVVM Pattern• Dependency Injection• Routing• Templating• Modules• Services / Factories / Providers
![Page 6: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/6.jpg)
PRIMITIVE DIRECTIVESng-app
• Bootstraps angular application• Only one ng-app per HTML document• Syntax: <body ng-app=“myapp”>
![Page 7: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/7.jpg)
PRIMITIVE DIRECTIVESng-controller
• Determines which javascript controller is bound to specific portions of a page
• A single HTML document can have many ng-controller
• Syntax: <div ng-controller=“mycontroller”>
![Page 8: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/8.jpg)
PRIMITIVE DIRECTIVESng-model
• Determines what model the value of an input field will be bound to
• Two way databinding• Syntax: <input type=“text” ng-
model=“propertyvalue”>
![Page 9: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/9.jpg)
MORE DIRECTIVES• ng-if• ng-repeat• ng-show• ng-click• Expressions {{ 1 + 2 }}• And more… we will learn more as we go
![Page 10: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/10.jpg)
ASP.NET WEB API• A modern restful framework for building HTTP APIs• Nuget powered and minimal friction framework• Open source• Ships with Sitefinity (no Nuget needed)• Personal preference: I use Web API more than ServiceStack• And more… we will learn more as we go
![Page 11: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/11.jpg)
DEMO
![Page 12: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/12.jpg)
BABAGANOUSH• An SDK for Sitefinity developers
• API Extensions for Rapid Development• Adds needed plugins and utilities• Opinionated framework
![Page 13: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/13.jpg)
BABAGANOUSH FEATURES
• Models• Managers• Web services• Widgets• Themes / Master pages• Utilities and more…
![Page 14: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/14.jpg)
DEMO
![Page 15: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/15.jpg)
LETS BUILD THE APP• Add script reference angular.js • <script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
![Page 16: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/16.jpg)
TRACKS WEB API
![Page 17: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/17.jpg)
STRUCTURING ANGULAR APPs
• There are lot of ways to structure Angular app, below is one
![Page 18: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/18.jpg)
NG-APP - CONFERENCEAPP
• Defining ng-app
• App.js
![Page 19: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/19.jpg)
CONFERENCE FACTORY
![Page 20: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/20.jpg)
CONFERENCE CONTROLLER
![Page 21: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/21.jpg)
CONFERENCE LIST WIDGET
• MVC Widget• Razor syntax• Register the widget
![Page 22: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/22.jpg)
CONFERENCE LIST VIEW
![Page 23: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/23.jpg)
DIRECTIVES
![Page 24: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/24.jpg)
DIRECTIVES
![Page 25: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/25.jpg)
RECAP – WEB APP GET• app.js• employeesFactory.js• employeesController.js• Employees ASP.NET Web API Controller• Employees List MVC Widget
![Page 26: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/26.jpg)
MOBILE APP – INTRODUCTION TO IONIC• HTML5 app development framework powered by
Angular• Open source http://ionicframework.com/
![Page 27: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/27.jpg)
DEMO
![Page 28: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/28.jpg)
TELERIK PLATFORM - INTRODUCTION
• Cross platform development platform for iOS, Android and Windows Phone
• AppBuilder - In Browser, Windows Application, Visual Studio Extension, Sublime text plugin.
• Telerik Backend services• Automated Testing framework• Telerik Analytics
![Page 29: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/29.jpg)
CONFIGURING WEB SERVICES
![Page 30: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/30.jpg)
DEMO
![Page 31: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/31.jpg)
iOS App
![Page 32: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/32.jpg)
Android App
![Page 33: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/33.jpg)
![Page 34: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/34.jpg)
QUESTIONS
![Page 35: USING ANGULARJS WITH SITEFINITY. ABOUT ME Venkata Koppaka Senior Software Engineer at Falafel Software Focus on WebCMS products Loves AngularJS, and mobile](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d825503460f94a684ca/html5/thumbnails/35.jpg)