Using-AngularJS-with-Sitefinity.pptx
- 2. ABOUT ME Venkata 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/
- 3. AGENDA Goal 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
- 4. 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
- 5. KEY FEATURES • Declarative HTML • 2 way databinding • Expressions • MVC / MVVM Pattern • Dependency Injection • Routing • Templating • Modules • Services / Factories / Providers
- 6. PRIMITIVE DIRECTIVES ng-app • Bootstraps angular application • Only one ng-app per HTML document • Syntax: <body ng-app=“myapp”>
- 7. PRIMITIVE DIRECTIVES ng-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”>
- 8. PRIMITIVE DIRECTIVES ng-model • Determines what model the value of an input field will be bound to • Two way databinding • Syntax: <input type=“text” ng- model=“propertyvalue”>
- 9. MORE DIRECTIVES • ng-if • ng-repeat • ng-show • ng-click • Expressions {{ 1 + 2 }} • And more… we will learn more as we go
- 10. 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
- 11. DEMO
- 12. BABAGANOUSH • An SDK for Sitefinity developers • API Extensions for Rapid Development • Adds needed plugins and utilities • Opinionated framework
- 13. BABAGANOUSH FEATURES • Models • Managers • Web services • Widgets • Themes / Master pages • Utilities and more…
- 14. DEMO
- 15. LETS BUILD THE APP • Add script reference angular.js • <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2. 14/angular.min.js"></script>
- 16. TRACKS WEB API
- 17. STRUCTURING ANGULAR APPs • There are lot of ways to structure Angular app, below is one
- 18. NG-APP - CONFERENCEAPP • Defining ng-app • App.js
- 21. CONFERENCE LIST WIDGET • MVC Widget • Razor syntax • Register the widget
- 23. DIRECTIVES
- 24. DIRECTIVES
- 25. RECAP – WEB APP GET • app.js • employeesFactory.js • employeesController.js • Employees ASP.NET Web API Controller • Employees List MVC Widget
- 26. MOBILE APP – INTRODUCTION TO IONIC • HTML5 app development framework powered by Angular • Open source http://ionicframework.com/
- 27. DEMO
- 28. 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
- 30. DEMO
- 31. iOS App
- 32. Android App
- 34. QUESTIONS