INTRODUCTION TO

Malin De SilvaSharePoint SpecialistExilesoftmalindesilva.net

OVERVIEW

• Introduction

• AngularJS Directives

• Demonstrations

• Other features

STATIC HTML VS DYNAMIC HTML

• HTML works great with static content

INTRODUCTION

• How about dynamic content?

STATIC HTML VS DYNAMIC HTMLINTRODUCTION

Lines : 19 14Characters: 527 296

TWO WAY BINDINGINTRODUCTION

MODEL – VIEW - WHATEVER

Model – View – Controller+

Model – View – Presenter+

Model – View – ViewModel+…=

Model – View - Whatever

INTRODUCTION

SETTING UP

• Minified and non-minified versions• Online and offline reference

• Feature downloads

INTRODUCTION

• angular-mocks.js• angular-scenario.js• angular-loader.min.js

• angular-animate.js• angular-cookies.js• angular-resource.js

• angular-route.js• angular-sanitize.js• angular-touch.js

DirectivesANGULARJS

Directives are markers on a DOM element that tells AngularJS’s HTML Compiler to attach a specified behavior to that DOM element or even transform that DOM element and its children.

DirectivesANGULARJS

• ng-app - designates the root element of the application

• ng-model - binds a control to a property on the scope

• ng-click - specify custom behavior when an element is clicked

• ng-repeat - instantiates a template once per item for a collection

• ng-init - evaluate an expression in the current scope

• ng-controller- attaches controller class to the view

More…

DEMONSTRATIONS

• Demo 1: ng-app and ng-model

• Demo 2: ng-init and ng-repeat with ordering and filtering

• Demo 3: Using controllers$scope

• Demo 4: ng-click

Modules

Two-way binding

OTHER FEATURES

• Config• Routes• Factory• Provider• Service• Value

$scope.Done

Email: malindesilva@live.com