Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

Angular

VIDEO – Angular CLI – Todo List in SharePoint Content Editor

Angular 2 (“Angular”) brings many improvements over Angular 1 (“AngularJS”).  The CLI tools (Command Line Interface) help streamline operations so we can develop professional applications with ease including unit testing, bundling, minification, live preview, webpack, distribution, and more.

The below demo shows how to create a new application, run tests, add features, and deploy to SharePoint Pages hosted in a Content Editor Web Part.  The CLI tools boost developer productivity while holding up quality control.

Check out the live coding video below, hosted on both Vimeo and YouTube.

Leave a comment if you found it helpful.  Cheers! 

shades_smile

Video

Screenshots

image
image
image
image
image

Source Code

Steps

  1. MD TODO
  2. NG NEW TODO
  3. CD TODO
  4. NG SERVE
  5. NG HELP BUILD
  6. NG BUILD -PROD -AOT -D http://portal/sites/todo/SiteAssets/todo -W
  7. Upload all files from local /dist/ to SharePoint /SiteAssets/todo/
  8. Right click “index.html” in SharePoint to copy absolute URL
  9. Edit Page, add Content Editor Web Part (CEWP)
  10. Modify CEWP and provide URL for display
  11. Enjoy!

References

Errors Fixed

https://stackoverflow.com/questions/40386883/sharepoint-angular-2-app-using-cli-webpack

For Angular2 to load correctly on a SharePoint page we must comment out the line “import ‘core-js/es6/string’;” from “polyfills.ts” to avoid conflict with Microsoft Script Resource AXD code already included.

  • Uncaught g {__zone_symbol__error: Error: Sys.ParameterCountException: Parameter count mismatch.
  • polyfills.3737621….bundle.js:1 Uncaught
  • ScriptResource.axd?d=BguhdZbE6Lg8ptBp5skwRENGckVM6n4sP4jY4eLX78z7DZzuMbkeH4dwMKG-9qqtKy6_9p0QSjbOTX…:494 Uncaught

Video – Get Started with SPCRUD.JS

Check out the below 10 minute video for how get started using “spcrud.js” to easily connect Angular JS applications to SharePoint List data.    I created this library as a wrapper for AngularJS $http GET and POST.     We can streamline the repetitive SharePoint plumbing of JSON headers, HTTP VERBs, and URL syntax.    Now you can easily call “spcrud.read()” or “spcrud.update()” instead of formatting each HTTP request.

Enjoy!! 

shades_smile

Please leave a comment if you found this helpful. 

 

Learn Angular!

I wanted to share the links below for learning AngularJS.  Great way to code less AND get higher quality apps.   Dual win for developer productivity.  Enjoy!  

shades_smile

 

 

Media

People

Code

Tools

 

 

* diagram from http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes

AngularJS – $http default JSON headers

The below JavaScript will change $http default headers to be JSON ready for SharePoint REST APIs.  This is handy when sending GET/POST to SharePoint 2013 so we don’t need to repeat headers on each individual call.   Enjoy! 

shades_smile

 

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲