Download presentation
Presentation is loading. Please wait.
1
Angular JS and SharePoint
What’s it All About?
2
What is MVC? A model stores data that is retrieved according to commands from the controller and displayed in the view. A view generates new output to the user based on changes in the model. A controller can send commands to the model to update the model's state (e.g. editing a document). It can also send commands to its associated view to change the view's presentation of the model (e.g. by scrolling through a document).
3
Data HTML JavaScript
4
MVVM: Model-View View Model
The controller is replaced with a View Model. The View Model sits below the UI layer. The View Model exposes the data and command objects that the view needs.
5
MODEL (data) is BOUND to the VIEW (DOM)
WHATEVER!
6
Controller/ViewModel Interchangeable
7
Basic Angular Concepts
Check Out:
8
Services: the core of Angular
9
Problems Angular Solves
Prevents polluting the global namespace Creates one variable that holds everything Variable and functions don’t collide Gives STRUCTURE to JavaScript Allows you to write extensible, reusable and complex software Basically recreates the client/server architecture within the browser Provides maximum separation from the presentation layer (HTML) Data Dash Attributes - Answers the “What JavaScript library should I use?” question Originally Google initiative but now has major industry, including Microsoft support Angular 2, a major upgrade, has just come out. Was written in TypeScript, which was originally developed by Microsoft
10
<html lang=“en-us” ng-app=“myApp”>
How does it work? 1. Create one variable in your app.js file - (see var myApp=angular.module(‘myApp’, [ ]); “angular” is the global angular object that has a function called “module” and it takes a name and an array of dependencies as parameters 2. You put the app attribute on the HTML tag (View) that you want to be connected: <html lang=“en-us” ng-app=“myApp”> “myApp” is now connected!
11
ngAPP, the Prime Directive
ngAPP is a directive. It auto-bootstraps an AngularJS application. 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. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto- bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
12
So you’ve created an App, now what?
Next, declare a controller, which takes a name and a function (place to put the code associated with the controller) var My App = angular.module(‘myApp’, []; myApp.controller(‘mainController’, function( ) { //code in here }); Assign the controller to a part of the VIEW, i.e.HTML: <div ng-controller=“mainController”> <h1> Hello world!</h1> </div> AngularJS will keep this view bound to the “mainController” controller. You can have multiple “controllers” on a page.
13
NOTE: All AngularJS services start with a dollar sign
$Scope in AngularJS NOTE: All AngularJS services start with a dollar sign Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scope is the glue between application controller and the view. During the template linking phase the directives set up $watch expressions on the scope. The $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM. Both controllers and directives have reference to the scope, but not to each other. This arrangement isolates the controller from the directive as well as from the DOM. This is an important point since it makes the controllers view agnostic. The values that are stored in variables on the scope are referred to as the model (ng-model) in the rest of the documentation. Scopes can watch expressions and propagate events.
14
Scope and Interpolation
Creating a string by combining strings and placeholders (variables) Ng-controller is “watching” the <div> it is referenced on because of “$scope” Whatever variables and functions you put in the scope is available in the VIEW (HTML) Whatever you put in double braces will be interpolated into the VIEW (HTML)
15
Dependency Injection What the heck is it????
16
This is Bad: function is dependent on var “Bizzers”
17
This is Good: Pass object to the function
18
Dependency Injection NOTE: All AngularJS services start with a dollar sign
19
Two-Way Data Binding An instruction to AngularJS to manipulate a piece of the DOM. This could be “add a class’, ‘hide this’, ‘create this’, etc. More powerful, flexible than JQuery Two-way binding means Model can change View and View can change Model
20
Two-Way Binding
22
Angular Modules
23
Using Multiple Directives - HTML
24
AngularJS Vocabulary Directives – ng-app, ng-controller, ng-model, ng-show, ng-hide, ng-if, ng-class, etc. Services - $scope, $filter, $timeout, $http, $q, etc. Modules – ngMessages, ngCookies, ngAnimate, etc. Expressions – {{ }} Dependency Injection Two-way binding Interpolation Templates Functions – angular.fromJson, angular.isArray, angular.isDate, angular.forEach
25
$http service - XMLHttpRequest Object
NOTE: Native to the browser, invented by Microsoft for Outlook Web Access (OWA)
26
Single Page Applications (SPAs)
Navigation in Angular happens via fragment identifiers: <a href=“#bookmark”>Go to Bookmark</a> URL for this in the browser would be: The DOM syntax for this is: window.location.hash - Angular uses this basic concept to go to build Single Page Applications by using different hashes: window.location.hash === ‘#bookmark/1’ window.location.hash === ‘#/bookmark/2’ etc.
27
Routing with ngRoute and ng-view
Will put the HTML (template) that it retrieves from the template into the <div> marked with the “ng-view” directive: Use $routeParams to pass parameters when configuring the routes.
28
DEMO – AngularJS Content Editor App
29
Angular 2 and TypeScript
A complete rewrite of AngularJS Written in Microsoft’s TypeScript, which is the recommended language for developing applications using the Angular framework It is not an MVC framework but a component. In Angular 2 an application is a tree of loosely coupled components Not officially released yet - You can start using Angular 2 now - Angular 2 will provide the ability to build apps for any deployment target—web, mobile web, native mobile and native desktop (that’s the claim!)
30
TypeScript The classes and modules “compile-away” so there is no “cost” to using them.
31
AngularJS Tutorial Videos
“Learn and Understand AngularJS” Class on Udemy.com – EXCELLENT BEGINNING COURSE! Jeremy Thake 2014 SharePoint Conference Bob German’s AngularJS video from October, 2015 Andrew Connell’s “Building SharePoint Apps as Single Page Apps with AngularJS” on Pluralsight Mosh Hamendi’s “Angular 2 with TypeScript for Beginners” course on Udemy.com “Introduction to TypeScript” by Anders-Hejlsberg – viewed 1.3 million times!
32
More Links Bob German’s Weather App Example on Plunker
Atish Dipongkor’s Excellent Angular Code Example on CodeProject Service vs. Factory JavaScript Promises Explained Good back and forth on the difference between MVC and MVVM Bob German’s Article on how to have several Angular Apps on one page in SharePoint
Similar presentations
