Downloaded 36 times
Uploaded byAhmed Elharouny
Building share point apps with angularjs
The document is a presentation by Ahmed Elharouny on building SharePoint apps, covering various app models, particularly SharePoint-hosted apps and single-page applications using AngularJS. It details high-level design, optimization strategies, unit testing, and tools like RequireJS for managing dependencies. The presentation also includes live demos and sample code, emphasizing optimizing performance and enhancing user experience.
Building share point apps with angularjs
- 1. Building SharePoint Apps With ByAhmed Elharouny 22nd October 2014
- 2. Page Agenda › Introduction › AppModelOverview(SharePoint-Hosted,SPA,AngularJS, RequireJS) › High-levelDesign › Demo&SampleCode › Optimization › UnitTesting › Q&A / Copyright ©2014 by Readify Pty Ltd2
- 3. Page Introduction / Copyright ©2014by Readify Pty Ltd3 Ahmed Elharouny Senior Developer at Readify http://www.harouny.com Twitter: @harouny Github: harouny • Microsoft Technology Specialist (MCTS Web) • Professional Scrum Master (PSMI) • 9 years of experience in web development • I’m not a SharePoint specialist • I started SharePoint Live Charts to learn about the new app model
- 4. Page App Model Overview / Copyright©2014 by Readify Pty Ltd4
- 5. Page SharePoint Hosted / Copyright©2014 by Readify Pty Ltd5 • Development experience • Instant deployment to SharePoint while modifying in debug mode. • No external deployment steps • i.e. IIS, Azure. • No extra costs & concerns • Who is paying for resources? • Leverage SharePoint for services and data storage • Using client APIs REST or CSOM. • APP and data is a single unit • Backup, Restore, Install, Uninstall single unit. • Still protecting app business logic • Using business connectivity services and workflows.
- 6. Page Single Page App /Copyright ©2014 by Readify Pty Ltd6 • Simpler in development • No need to manage user moving from page to page. • Only update what you want to update. • Persist state on client. • Rich user experience • No page reloads. • Allow of rich UX. • Progressively download resources when required. • Modular approach • Think about modules, not pages.
- 7. Page AngularJS / Copyright ©2014by Readify Pty Ltd7 • A JavaScript framework for building client side applications that runs in the browser. • Started by Google but quickly became a popular open source project. • It aims to simplify development, maintaining and testing applications.
- 8. Page AngularJS / Copyright ©2014by Readify Pty Ltd8 1999 Inline 2007 Unobtrusive Knockout Angular 2013 Data Binding
- 9. Page AngularJS / Copyright ©2014by Readify Pty Ltd9 • Dependency Injection • Data Binding • Routing • Templates • MVC or MVVM • Ajax, REST • Unit Testing • Animation
- 10. Page AngularJS / Copyright ©2014by Readify Pty Ltd10 • Modules • Controllers • Directives • Filters • Services • Configs • Routes Services Recipes Constant
- 11. Page AngularJS - Modules /Copyright ©2014 by Readify Pty Ltd11 - A module is a logical container for the different parts of your app – controllers, services, filters, directives, etc. - A module is not a namespace. DependenciesName
- 12. Page AngularJS - Modules /Copyright ©2014 by Readify Pty Ltd12
- 13. Page AngularJS - Controllers /Copyright ©2014 by Readify Pty Ltd13 - A Controller is a JavaScript function that is used to work with scope (view model). - Controllers are attached to DOM using ng-controller directive. Name Dependencies Function
- 14. Page AngularJS - Scope /Copyright ©2014 by Readify Pty Ltd14 - AngularJS will always create a root scope driven by the ng-app directive. ng-app ng-controller ng-controller
- 15. Page AngularJS - Directives /Copyright ©2014 by Readify Pty Ltd15 Directives are markers on a DOM element that tell AngularJS to attach a specified behavior to that DOM. Built-InDirectives
- 16. Page AngularJS - Directives /Copyright ©2014 by Readify Pty Ltd16 CustomDirectives - Custom directive can be used to provide a declarative markup approach and reusability. - There are many ways to declare a directive in markup using (HTML attributes, elements, comments and CSS classes).
- 17. Page AngularJS - Services /Copyright ©2014 by Readify Pty Ltd17 - Services is a way to organize and share code across app. - Services are lazy initialized and singleton. Built-InServices • $http • $log • $window CustomServices
- 18. Page RequireJS / Copyright ©2014by Readify Pty Ltd18 • RequireJS is a JavaScript file and module loader. • It supports Asynchronous Module Definition AMD. • Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.
- 19. Page RequireJS / Copyright ©2014by Readify Pty Ltd19 common.js common.config.js • Load scripts faster. • Manage script dependencies for you. • Script loading is Configurable. • Mock scripts during test.
- 20. Page / Copyright©2014 by Readify Pty Ltd20 High-level Design Route
- 21. Page / Copyright©2014 by Readify Pty Ltd21 High-level Design
- 22. Page Demo / Copyright ©2014by Readify Pty Ltd22 https://github.com/harouny/GitHubAppForSharePoint Sample Code
- 23. Page Optimization / Copyright ©2014by Readify Pty Ltd23
- 24. Page RequireJS Optimizer / Copyright©2014 by Readify Pty Ltd24 • Combine related scripts together into minified files. • Uses r.js file. • node is recommended to run it. (java, browser can do it as well). • Add this to a Post Build Script. Build output configs Build folder
- 25. Page RequireJS Optimizer / Copyright©2014 by Readify Pty Ltd25 • You can switch between the optimized and the non-optimized versions. • The non-optimized version is needed during development and debugging.
- 26. Page Optimizing HTML files /Copyright ©2014 by Readify Pty Ltd26 • You can minify, combine, cache HTML templates used by AngularJS so that Angular doesn’t need to make an Ajax request for every new template. • Can be done manually or with a tool like grunt-angular-templates See it in action
- 27. Page Unit Testing / Copyright©2014 by Readify Pty Ltd27
- 28. Page Unit Testing / Copyright©2014 by Readify Pty Ltd28 • Jasmine • Chutzpah • Chutzpah configuration file • RequireJS setup • angular-mocks
- 29. Page Q & A /Copyright ©2014 by Readify Pty Ltd29
- 30.