1. AngularJS and SharePoint

2. Overview Introduction AngularJS Intermountain Healthcare Wrapper
New Intermountain Sites
Find out who your audience is.. Developer front or back end?
Executives?
Power users?
Lost?

3. About Intermountain Nonprofit health system based in Salt Lake City
with 22 hospitals, 150 clinics
over 800 physicians, hundreds of affiliated physicians and clinicians.
a broad range of clinics and services, and health insurance plans from SelectHealth
We are the largest healthcare provider in the Intermountain West, with over 33,000 employees
Noted in media:
Last year, gave away $277 Million in charity care
Praised by President Obama as a role model for U.S. health reformers

4. About Me Nathan Green Manager, Internal eBusiness Software Engineering
Intermountain Healthcare
9 yrs
7 yrs sp 4

5. eBusiness accountability for Intermountain’s online strategy
Employees/Workforce
Intermountain.net
Team Space
Document Center
Search
150,000+ daily page views
Patient/Clinical
My Health site
Online Medical Record
Integrated to our EMR
Integrated to SelectHealth
Secure messaging with docs
Physicians
Intermountainphysician.org
Employed and Affiliated docs
Germ Watch, Surgery Schedules, more
Online lab results and other reports
Public Sites
Intermountainhealthcare.org
LiVe, Trustees, Service Lines
160 integrated clinic and hospital sites
Transactions including Rx Refill, Bill Pay and Find a Doctor
Term used to describe business that utilize Internet technologies to improve productivity or profitability of a business.
Sponsor large, enterprise initiatives
Champion for the end-user
17 employees – Software engineers, designers, content analysts
Primarily a .net shop running SharePoint. Some Java (LifeRay)

6. Enhancing the Experience
One of our guiding principles in eBusiness is that we create tools so easy to use that our customers only choose to use our tools and want to go nowhere else.
We believe SharePoint OOTB is unusable as a portal platform. We’ve invested a lot of time to make it better
Built on SharePoint. A primary goal of our team is to make it not look like SharePoint. OOTB it gives you a ton of functionality, but it can be like drinking from a firehose for our users. Mostly non technical.
Different iterations

7. AngularJS Basics

8. What is AngularJS?
AngularJS \ˈaŋ-gyə-lər jā ‘s\ is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write.
Lightweight JavaScript framework
Templating system
Cross browser compatible
Uses jQuery library
Open Sourced in 2010
~600 contributors
Framework: it’s much lighter than a typical framework. <36KB. 100% client side. Not a plugin or browser extension
Templating: Bidirectional data binding. The template is compiled in the browser, then creates a live view.
Cross-browser: Intermountain is running IE8 for our clinical IS. It’s important to us that it
jQUery: can use jQuery 1.x, but not 2.x. It can fall back to its own implementation of the subset of jQuery called jQLite

9. Why AngularJS? HTML as the UI Well defined structure
MVC (now closer to MVVM). Or MVW
Simple JS Objects
Unit testing
HTML: makes it much easier to define the interface. Allows for designers to make modifications to the view without necessarily breaking it or writing JS. Simplifies app development. UX folks don’t need to worry about the distraction of a DOM manipulation or jQuery call. Separates markup from JS. Handles dom manipulation and ajax.
Well defined structure: controllers, modules, etx
A big ball of mud” ( a software system that lacks a perceivable architecture
Jeremy Thake: Explain MVC as an excel spreadsheet. As an excel user, I can add value 1, value2 together, but a lot is going on under the covers
MVVM:Angular uses MVVM. Angular manages your components for you and serves as the pipeline that connects them. This is helpful as to avoid “A big ball of mud” ( a software system that lacks a perceivable architecture. Although undesirable from an engineering point of view, such systems are common in practice due to business pressures and developer turnover. They have therefore been declared a design anti-pattern.) Also, less code because the MVVM pipeline is already defined.
MVW – Model View Whatever
There are many software architecture pattern which separates the representation of information from the user’s interaction with it. The central ideas behind these patterns are code reusability and separation of concerns. The most famous pattern that is used widely today is MVC or Model-View-Controller. Similar to MVC, there is another pattern called MVP or Model-View-Presenter. The MVP is based on MVC and the presenter assumes the functionality of the “middle-man” (played by the controller in MVC). In MVP, all presentation logic is pushed to the presenter. Eventually, the model becomes strictly a domain model. And then there are other patterns such as MVVM or Model-View-View-Model.
Angular doesn’t care actually what software architecture pattern you want to use in your app. And thus the pattern MVW or Model-View-Whatever. A basic concept of MVW is that all definitions are associated with a named Module. Modules can then be aggregated to form complete web applications. Modules can depend on one another, so that including a single Module in your WebApplication may bring along additional functionality on which that Module depends. Angular JS provides you with rich set of APIs to define these modules and linked them together with dependency injection. We will see this in great detail in next few articles.
Simple JS Objects: don’t require special setter/getter methods
Unit Testing: Easy to inject mock data into the controller and measure the output and behavior. Angular has a mock HTTP provider to inject fake server responses into a controller

10. Won’t Angular Go Away Sometime?
Usage is low, but growth was 5354% in 1
2 Google Trends:

11. Google Feedback 17000 -> 1500 Lines of code Example from Jeremy T
Originally built w/17000 LOC, 6 mo, 3 devs
AngularJS, 1500 LOC, 3 weeks
hack, Microsoft manager, gave a great presentation on AngularJS at SPC this year

12. Why Intermountain Chose AngularJS
Reusability
Faster development
Fewer deployments
Not tied to HTML
UX don’t have VS, but Devs do. Now we can all develop with the all the same tools
SharePoint 2013 is more client side
Less server load
Questions for Sunil: why did you and Gordon decide to go with Angular?
Resusability: we build it once, and we can use it all over. Also makes it easier to migrate
Faster: once you get past the learning curve
Fewer deploments; code is client side, no need for server-side processing
Separation of HTML, allows UX to do their markup
Tooling needed is less
AngularJS lends itself to the client-side model MS is pushing in 2013 SP

13. Why Use AngularJS For Mobile
Small library files
Less HTML needing to be written
2.0 version to be focused on mobile1
MV* pattern used…separates presentation from logic
jqLite
3rd party modules
AngularJS file size <36 KB
Templates call for less HTML to be written
2.O to be more mobile ready: We’ll talk more about this
MV* separates logic, causes less code to be written
Jqlite – small subset of jquery functionality. Exposes $ operator
Many 3rd party modules for mobile support – carosels, navigation, scrolling, pull to refresh

14. Angular Basics Ng-app directive Include angular.js <html ng-app>
<script src=“/scripts/angular.js”></script>
Ng-app basically tells angular to initialized.
Use this directive to auto-bootstrap an AngularJS application.
By bootstrap, I mean starting a process without external input
The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or<html> tags.
Include the angular.js library
Let me walk through some of the basic ideas behind AngularJS

15. https://docs.angularjs.org/guide/databinding
Data Binding
Most templating systems bind data in only one direction:
The view = projection of the model through the HTML template
The model = your data
This means the template and the model are merged into a view
This isn’t ideal because after the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view.
Any changes that the user makes to the view are not reflected in the model.
This means that the developer has to write code that constantly syncs the view with the model and the model with the view.
Two-way data binding is the automatic synchronization of data between the model and the view components.
First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser.
The compilation step produces a live view.
Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view.
The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer. You can think of the view as simply an instant projection of your model.
Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency.

16. https://docs.angularjs.org/guide/concepts#a-first-example-data-binding
Data Binding
Click and show demo
This file is called a template. Basically HTML with some additional markup
The markup gets compiled, the transformed and rendered
The curly braces are where the JS expression gets evalutated.

17. https://docs.angularjs.org/guide/concepts#model
Other Basics…
Models
Filters
Model
Filter
Just like variables in a JavaScript function live in a scope, Angular provides a "scope" for the variables accessible to expressions.
The model: the values stored in variables on the scope.
-Applied to the example above, the markup directs Angular to "take the data we got from the input widgets and multiply them together".
The example above also contains a "filter". A filter formats the value of an expression for display to the user. In the example above, the filter currency formats a number into an output that looks like money.

18. https://docs.angularjs.org/guide/controller
Controllers
In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope.
When a Controller is attached to the DOM via the ng-controller directive,
Angular will instantiate a new Controller object, using the specified Controller's constructor function.
A new child scope will be available as (an injectable) parameter to the Controller('s constructor function) as $scope.
Use controllers to:
Set up the initial state of the $scope object.
Add behavior to the $scope object.
You don’t use controllers to manipulate the DOM, format input, filter output. It only augments the scope
In our example, the controller is only augmenting the scope data…not transforming the DOM in any way

19. https://docs.angularjs.org/guide/module
Modules
Module
You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
Why do we have them?
Most applications have a main method that instantiates and wires together the different parts of the application.
Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:
The declarative process is easier to understand.
You can package code as reusable modules.
The modules can be loaded in any order (or even in parallel) because modules delay execution.
Unit tests only have to load relevant modules, which keeps them fast.
End-to-end tests can use modules to override configuration.

20. Angular Modules We’ve Used
Angular-cookies
Angular-mocks
Angular-modernizr
Angular-resource
Angular-route
Angular-sanitize
Angular-scenario
There are several modules available…here are ones we’ve included
Cookies: read/write access to browser cookies
Mocks: unit testing
Modernizr: provides HTML5 functionality in browsers that don’t natively support them using shims, fallbacks, polyfills etc
Resource: high-level abstracted interactions with RESTful services
Route: Allows for multiple views inside of a single app, deep linking URLs to controllers and views
Sanitize: parses html into tokens to ensure safe input, output of html
Scenario: end to end testing

21. https://docs.angularjs.org/guide/directive
Directives
Sets the name of the element, and which template to use.
Normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
A directive is a marker on a DOM element to attach your behavior OR transform the DOM element
So in the example, the left part could be your master page/layout page. Your template can be in a separate file altogether.
-The restrict option is typically set to:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
-transclude: allows scope to be outside rather than inside of directive
-replaces: means that the content of the directive template will replace the element that the directive is declared on

22. Service Controller View
In the previous example, the controller had all of the logic.
It’s good practice to move independent logic out of the controller into a different file or component so it can be reused by other parts of the application
That lets us change the logic to pull different data, but keep the controller the same
In this example, we use an Angular service

23. https://docs.angularjs.org/guide/providers
Providers
Factory
Service
Value
Constant
Provider
The injector uses recipes to create two types of objects: services and special purpose objects
There are five recipe types that define how to create objects: Value, Factory, Service, Provider and Constant.
Factory and Service are the most commonly used recipes. The only difference between them is that Service recipe works better for objects of custom type, while Factory can produce JavaScript primitives and functions.’
Value and Constant – most simple. (Constant is available in config phase before any services are available)
The Provider recipe is the core recipe type and all the other ones are just syntactic sugar on it.
Provider is the most complex recipe type. You don't need it unless you are building a reusable piece of code that needs global configuration.
All special purpose objects except for Controller are defined via Factory recipes.
We use factories. We can keep the same controllers, but update the factories if we pull from new data. In the case of moving from SharePoint 2010 to 2013, we basically just had to update the factory methods

24. Simple Angular Demo

25. SharePoint – REST & JSOM

26. REST/JSOM Play Nice w/AngularJS
Services we used:
SharePoint REST API (Lists, Users, Search, etc)
SharePoint JSOM
Home grown
SharePoint 2013, more so than older versions, works great with AngularJS.
That’s because MS is exposing their Server API in more and more ways
2 ways are REST and CSOM. I’ll call it JSOM
I haven’t found much difference in my experience between REST and JSOM. I’ve been able to use both just fine.
Andrew Connell (MS MVP): REST tends to be more chatty with the backend than JSOM
You have to be more hands on with REST and specify exactly what data you want back
Matter of preference
Some things you can’t do with REST: MM Taxonomies, Workflows
Generally more documentation for REST
Quicker to test with REST

27. SharePoint REST API Core components Lists Files and Folders
Users and Groups
Social
Search
Core: features, event receiver, site objects, web object, web template
Lists: fields, items, views, fields
Files: folders, files, versioning
Users: Groups, roles, role assignment and definitions
Social: Feeds, mentions, likes, posts. Following and followers
Search

28. SharePoint REST Architecture
You can specify the return type in your HTTP request…I usually request JSON

29. SharePoint JSOM Web Parts Taxonomy Analytics Workflows Business Data
E-discovery
Batch Updates
-batch updates: one call to handle multiple tasks

30. 1 http://w3techs.com/blog/entry/fact_20130806
Intermountain.net 1

31. Intermountain.net Wrapper
Global Navigation
Header
Left Nav
Right Nav
Site Nav
All navigation!

32. Do a demo if available. Show what the different parts using Angular are….

33. Intermountain.net Mobile

34. ng-app (Module) SharePoint Factories Controllers Templates Directives
Config
navigationConfig
noCacheInterceptor
SharePoint
Factories
navigationFactory
Utilities
Controllers
ihc-globalnav
ihc-header
ihc-left-nav
ihc-site-nav
ihc-bread-crumbs
Templates
Config: httpInterceptor to prevent caching
navigationConfig – sets url location for templates
Utilities – does the communication with SP via JSOM or REST
navigationFactory – similar to utilities…implementation of the methods inside of the controllers. Allows us to swap out the factory but still reuse the controller
ihc-global-nav
ihc-header
ihc-left-nav
ihc-site-nav
ihc-bread-crumbs
Directives
ihcGlobalNav
ihcHeader
ihcLefNav
ihcSiteNav
ihcBreadCrumbs

35. Global Navigation CSS for transitions
Becomes left navigation in mobile
List driven
CSS transition: CSS3, add an effect when changing styles
When in a mobile view, it degrades down into a left navigation

36. This part of the template pulls the main 3 sections down, adds a hover delay, includes the nav title and icon.
-Ng-repeat: repeater, like a for loop
These sections pull each column of the navigation
These sections pull in each navigation link. Ng-click…similar to onclick, but used within Angular scope. Allows you to specify custom behavior
Why ng-click and data-ng-click? The latter is considered valid HTML5

37. Left Nav

38. 1 http://w3techs.com/blog/entry/fact_20130806
There’s also the mobile nav version.
Advantage here is the same databindings
See how we’re using the same objects for both 1

39. ‘use strict’ – not angular, but ECMAScript 5: With strict mode, you cannot, for example, use undeclared variables.
Strict mode makes it easier to write "secure" JavaScript.
Strict mode changes previously accepted "bad syntax" into real errors.
As an example, in normal JavaScript, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable.
In normal JavaScript, a developer will not receive any error feedback assigning values to non-writable properties.
In strict mode, any assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object, will throw an error.
Get’s dummy global navigation. This was to prevent some jumping or a sense of slow loading on the home page
Get’s the 2nd level nav headers
Pull the data for the global navigaiotn items…actually going to sharepoint
The directive:
-The restrict option is typically set to:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
-transclude: allows scope to be outside rather than inside of directive
-replaces: means that the content of the directive template will replace the element that the directive is declared on

40. Header
Logo, search box, right flyout

41. Straightforward…here’s the HTML template
Notice the two sections specific to mobile. On a mobile device we show the left nav menu button and no search bar. The desktop sections show the search bar and don’t show a left-nav button

42. Simple directive…nothing special

43. Right Navigation Single HTML Template Multiple Data Sources
List driven
We use a single HTML template to render this,
It’s pulling from multiple data sources
-Workplace links – list of links…based on a user profile property that specifies your ‘workplace’ as one of several hospitals or regions
-Tools – our global tools also available on the home page. Static information in a list
-Notifications – from our homegrown social code. Data is stored in a SP list inside of mysites
-Favorites – pages on .net you’ve tagged

44. Ng-click: similar to onclick. Let’s you evaluate an expression
Ng-hide/ng-show: The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. 

45. Notice that there isn’t much implementation in the ‘getWorkplaceTools’ It’s calling the factory method navigationFactory.getWorkplaceTools.
By separating the factory methods from the controller, we can use the same controller regardless of the version of SP. When we moved this code from 2010 to 2013, just had to update the factory methods

46. The link property allows the directive to manipulate the DOM
The link property allows the directive to manipulate the DOM. We had to wait for the ‘WorkPlaceTools’ data to come back before we could allow the menu to be loaded. It’s watching the ‘WorkPlaceTools’ variable. This part took our devs a long time to figure out.

47. Site Nav Based on each subsite
Driven by the ‘site navigation’ elements in our SPWebs
Allow us to drill down

49. Small controller, using custom service to pull site data

50. Difference between 2010/2013 Sites
Slightly different structure
Part of VS Solution
More AngularJS!
Sites more templated, but configurable
Put directives and controllers together in same .js. Fewer files to wade through
Moved HTML and JS into separate folders
VS Solution. Makes it more reusable since we’ll be having multiple site collections, web applications
Using more Angular.
There are more services available, so we can use more AngularJS
The sites themselves are more template, but list driven

51. List driven
Top level homepage, say Human Resources or Information Systems

52. To drive the data, we’re using a list
To drive the data, we’re using a list. This list contains multiple content types. Each of these content types has their own fields. The list allows users to use a familiar interface, and to have X number of ‘banners’, visual features, etc

53. Banner Uses SP JSOM to read Homepage Content List
Factory method pulls data from list using CAML
Controller parses the data, binds to template

54. Visual Feature Uses SP JSOM to read Homepage Content List
Factory method pulls data from list using CAML
Controller parses the data, binds to template

55. Site Description
Uses SP JSOM to pull SPSite object

56. Tools Uses SP JSOM to read Homepage Content List
Factory method pulls data from list using CAML
Controller parses the data, and parses taxonomy data. Binds to template

57. News Subscription Uses SP JSOM to read Homepage Content List
Factory method pulls data from list using CAML
Factory method runs SP search query for news data
Controller parses the data. Binds to template

58. Resources Uses SP JSOM to read Homepage Content List
Factory method pulls data from list using CAML
Controller parses the data, binds to template

60. Intermountain Glossary
List-driven
View driven by search

61. Get a list of all letters
Iterate through all definitions
Show a header if it’s the first definition for the letter
Display the definition, source, related terms

62. Notice the filter. It parses a semi-colon delimited string into items, then makes them clickable

63. Final Thoughts

64. Lessons Learned $location causes issues with search (and probably MDS)
$location makes the URL available to your application. For search, we had to overwrite $location with our own service

65. Lessons Learned Loading order, jumpy.
Fixed by loading dummy navigation and server-side body at same time, left nav and global nav body loading at same time afterwards

66. Lessons Learned SharePoint 2013 and blank attributes
Our directives have blank attributes. In SharePOint 2010 we could use an attribute with no ‘equal’ sign chokes if you don’t have a blank attribute (=“”)

67. Lessons Learned IE h8 caching
.config(function ($httpProvider) { $httpProvider.requestInterceptors.push('httpRequestInterceptorCacheBuster'); })
IE 8 caching was an issue. We had to set

68. Lessons Learned Learning curve
Client side Data binding was easy and fast. Traditionally all the process is done on server side. There’s a general learning curve with SharePoint 2013…they’re pushing us more client side and away from Full Trust Code.
Once it’s learned, development is rapid.

69. Lessons Learned It’s powerful Powerful
Angular templates(directives) gave more flexibility to front end which is just html.
Client side Data binding was easy and fast. Traditionally all the process is done on server side.
Deploying front end changes was easy, still had to deploy backend changes(this changed in 2013).

70. Futureproofing Our Site
Right now, we’re just hitting SharePoint
We’d like to start using more of the app model and offload any custom services to our tactical IIS server
Then that would prep us for o365
Angular is built for this since it consumes the service wherever it lives.

71. AngularJS 2.0 Mobile focus Modern browsers ECMA 6 Faster
Instrumentation
Modular
Smoother animations
Improved templating and directives
Targeting modern browsers
ECMA 6. It doesn’t run in browsers today, but it will be compiled down to ECMAScript 5.
Faster: faster change detection
Better instrumentation: high resolution timing details of where time gets spent in your application
Modular: almost every piece of it will be optional/replaceable/used in other frameworks so you can pick/choose the parts you want
Targeting 60 fps animiations
Improved templating: Simplify the directive API, Integrate with other component frameworks using web standards, Improve performance, Allow tools like IDEs to analyze and validate templates

72. http://www. jeremythake
angularjs-recording-published-spc14/ This will give some more background as to why to use AngularJS