Date post: | 30-Jun-2015 |
Category: |
Technology |
Upload: | malin-de-silva |
View: | 97 times |
Download: | 2 times |
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