Download presentation
Presentation is loading. Please wait.
1
in SharePoint A Practical Guide
2
Speaker Bio SharePoint Geezer? SharePoint Homeless?
Lots of SP Experience Lots of .NET Lots of JavaScript Yada yada
3
App or Page Design? It used to be simple
BAs edited page content Designers created master pages Developers wrote web parts in C# or VB jQuery blurred the line: is it an app or a page edit?
4
Client side just got real
JavaScript is no longer a 90lb weakling getting sand kicked in its face JavaScript is used to build applications Modern JavaScript is usually compiled (grunt, babel, gulp, asm, etc) JavaScript has some of the best tools of any environment
5
Installing Angular Download the Node Package Manager (npm)
Create a folder for your code (c:\h-spug) Run npm init Verify package.json file Run npm install angular EZ-PZ
6
How .NET peeps do Angular
<html ng-app=“myApp” ng-controller=“myController”> <head></head> <body> {{some_variable}} </body> </html> Meh…
7
Angular for web parts <div id=“h-spug”></div>
Create a file hspugApp.js on your PC var myApp = angular.module(‘myApp’,[]) angular.element(document).ready(function(){ $("#h-spug").attr({'ng-controller':‘myController angular.bootstrap(document.getElementById(“h- spug"),[‘myApp']); });
8
WTH did we just do?! angular.module(‘myApp’,[])
We used a module to define a piece of an applications functionality Modules are namespaces of libraries Angular is all about building upon a large number of libraries
![WTH did we just do ! angular.module(‘myApp’,[])](http://slideplayer.com./slide/13708131/85/images/8/WTH+did+we+just+do+%21+angular.module%28%E2%80%98myApp%E2%80%99%2C%5B%5D%29.jpg "We used a module to define a piece of an applications functionality. Modules are namespaces of libraries. Angular is all about building upon a large number of libraries.")
9
Model – View – Controller Pattern
Model = backend data View = front end display Controller = reads the model and tells the view what to display Angular module types correspond to MVC angular.module().controller() for the controller angular.module().service() for the model angular.module().directive() for the view
10
Lets add our controller
Create a file myController.js class MyController { constructor($scope, $compile) { this.$scope = $scope; this.init(); } init () { this.scope.message = “Hello World!"; }; MyController.$inject = ['$scope']; const MyControllerModule = angular.module(“MyControllerModule", []); MyControllerModule.controller(‘MyController', MyController);
11
That doesn't look like JavaScript!
class MyController {} JavaScript is getting upgrades! ES2015, ES2016 Install the Babel transpiler to compile our JavaScript into something older browsers can understand npm install babel
12
Building Hello World Npm install gulp Npm install gulp-babel
Npm install gulp-concat Next we edit the gulpfile to create a “build-hspug” command
13
Gulpfile var gulp = require('gulp'); var config = require('./gulp.config')(); var $ = require('gulp-load-plugins')(); var babel = require("gulp-babel"); gulp.task('build-hspug', function () { var dev = [ ‘js/myController.js', ‘js/MyApp.js', ]; gulp.src(dev) .pipe(babel()) .pipe($.concat(‘h-spug.min.js')) .pipe(gulp.dest('./deployment/')); });
14
Finish off the View <script src=“/SiteAssets/js/lib/angular-min.js”></script> <script src=“/SiteAssets/js/h-spug/h-spug.js”></script> <div id=“h-spug”> {{message}} </.div>
15
The End! Source Code: http://github.com/oldgittroy
Angular JS documentation site:
Similar presentations
