Download - USING ANGULARJS WITH SITEFINITY
![Page 1: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/1.jpg)
USING ANGULARJS WITH SITEFINITY
![Page 2: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/11.jpg)
DEMO
![Page 12: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/13.jpg)
BABAGANOUSH FEATURES
• Models• Managers• Web services• Widgets• Themes / Master pages• Utilities and more…
![Page 14: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/14.jpg)
DEMO
![Page 15: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/16.jpg)
TRACKS WEB API
![Page 17: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/18.jpg)
NG-APP - CONFERENCEAPP
• Defining ng-app
• App.js
![Page 19: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/19.jpg)
CONFERENCE FACTORY
![Page 20: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/20.jpg)
CONFERENCE CONTROLLER
![Page 21: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/21.jpg)
CONFERENCE LIST WIDGET
• MVC Widget• Razor syntax• Register the widget
![Page 22: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/22.jpg)
CONFERENCE LIST VIEW
![Page 23: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/23.jpg)
DIRECTIVES
![Page 24: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/24.jpg)
DIRECTIVES
![Page 25: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/27.jpg)
DEMO
![Page 28: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/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](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/29.jpg)
CONFIGURING WEB SERVICES
![Page 30: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/30.jpg)
DEMO
![Page 31: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/31.jpg)
iOS App
![Page 32: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/32.jpg)
Android App
![Page 33: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/33.jpg)
![Page 34: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/34.jpg)
QUESTIONS
![Page 35: USING ANGULARJS WITH SITEFINITY](https://reader030.vdocument.in/reader030/viewer/2022012313/56813b3a550346895da40fcb/html5/thumbnails/35.jpg)