![Page 1: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/1.jpg)
HI! OLIMPIU ROB
4+ years experience with Plone~1 year experience with AngularJS
![Page 3: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/3.jpg)
SINGLE PAGE APPLICATIONS
![Page 4: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/4.jpg)
SPA CHALLENGESDOM manipulationBrowser HistoryRoutingModule and view loadingData bindingCachingInput validation
![Page 5: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/5.jpg)
JAVASCRIPT SOLUTIONSEmber.jsExtJSReactMeteorAngularJS
![Page 6: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/6.jpg)
![Page 7: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/7.jpg)
FIRST DEMO
![Page 8: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/8.jpg)
HOW IT WAS MADE
![Page 9: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/9.jpg)
FILE STRUCTUREkittenz/ - images/ 1.jpg 2.jpg ... - pages/ details.html home.html kittenz.html app.js index.html
![Page 10: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/10.jpg)
INDEX.HTML
<body ng-app="kittenz"> ... <div class="container"> <div ng-view class="starter-template">
</div> </div> ...</body>
JS:var app=angular.module('kittenz',['ngRoute', 'kittenzControllers']);
![Page 11: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/11.jpg)
ROUTESapp.config(function($routeProvider){ $routeProvider .when('/',{ templateUrl: 'pages/home.html', controller: 'kittenzController' }) .when('/kittenz',{ templateUrl: 'pages/kittenz.html', controller: 'kittenzController' }) .when('/kittenz/:kittenId',{ templateUrl: 'pages/details.html', controller: 'kittenDetailController' }) .otherwise({ redirectTo: '/kittenz' });;
![Page 12: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/12.jpg)
FACTORYapp.factory('kittenzFactory', function() { var kittenz = [ {'id': 1, 'name': 'Fluffy'}, {'id': 2, 'name': 'Puffy (Not the rapper)'}, {'id': 3, 'name': 'Muffin'}, {'id': 4, 'name': 'Snowball'}, {'id': 5, 'name': 'Grumpy'}, {'id': 6, 'name': 'Lorem'}, {'id': 7, 'name': 'Ipsum'}, {'id': 8, 'name': 'Ran out of names'} ]; var factory = {}; factory.getKittenz = function () { return kittenz; }
return factory;
![Page 13: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/13.jpg)
CONTROLLERSvar kittenzControllers = angular.module('kittenzControllers', []);kittenzControllers.controller('kittenzController', ['$scope', 'kittenzFactory', function($scope, kittenzFactory) { $scope.kittenz = kittenzFactory.getKittenz(); }]);
kittenzControllers.controller('kittenDetailController', ['$scope', '$routeParams', '$filter', 'kittenzFactory', function($scope, $routeParams, $filter, kittenzFactory) { $scope.kitten = $filter('filter')(kittenzFactory.getKittenz(), {id: $routeParams.kittenId})[0]; }]);
![Page 14: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/14.jpg)
KITTENZ.HTML <ul class="list-unstyled"> <li ng-repeat="kitten in kittenz"> <a ng-href="#/kittenz/{{kitten.id}}"> <img ng-src="images/{{kitten.id}}.jpg"/> </a> </li> <ul>
![Page 15: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/15.jpg)
DETAILS.HTML<div class="well center-block"> <img class="center-block" ng-src="images/{{kitten.id}}.jpg" style <p class="text-center"> <span>Name: {{kitten.name}}</span> </p></div><ul class="pager"> <li class="previous"><a ng-href="#/kittenz/{{kitten.id-1}}">Previous <li class="next"><a ng-href="#/kittenz/{{kitten.id+1}}">Next</a></li</ul>
![Page 16: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/16.jpg)
ANGULARJS AND PLONEcollective.js.angular
[buildout] ... eggs += collective.js.angular ...
Bower
$ bower init $ bower install --save angularjs
![Page 17: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/17.jpg)
A MORE USEFUL DEMO
![Page 19: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/19.jpg)
VIEW CHAMELEON TEMPLATEINTEGRATING STATIC RESOURCES
![Page 20: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/20.jpg)
VIEW CHAMELEON TEMPLATEINITIAL DATA
![Page 21: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/21.jpg)
THE FACTORY
![Page 22: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/22.jpg)
THE HEADING LISTING<ul class="nav nav-pills nav-stacked" ng-model='json_data.headings'> <li ng-repeat="ngHeading in json_data.headings" class="headingItem" ng-class="{'active': ngHeading.id == cur_head.id}"> <a ng-href="#/readme/{{ngHeading.id}}">{{ngHeading.title}} <span ng-if="authenticated == 'True'" class="remove-ctrl glyphicon glyphicon-remove pull-right" ng-click="removeHeading($event, ngHeading)"></span> </a> </li></ul>
![Page 23: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/23.jpg)
HOW DOES ADDING A HEADING WORK?The template
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="category-submit">Add heading</label> <div class="col-md-4"> <button ng-click="addHeading($event, headingTitle)" class="btn btn-default">Add</button> </div> </div>
<div class="form-group"> <div class="col-md-6"> <input ng-show="addheading" ng-model="headingTitle" type="text" placeholder="Heading title" class="form-control input-md" /> </div>
![Page 24: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/24.jpg)
HOW DOES ADDING A HEADING WORK?The function inside the controller
$scope.addHeading = function(event, headingTitle){ event.preventDefault(); if ($scope.addheading) {
if(this.headingTitle !== '' && $.grep($scope.json_data.headings, function(e){ return e.title == headingTitle;}).length <= 0){ $scope.json_data.headings.push({ 'title': headingTitle, 'content': '', 'id':randid() }); } this.headingTitle = ''; $scope.addheading = false; } else {
![Page 25: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/25.jpg)
USING THE TINYMCE PATTERN
THE TEMPLATE<div class="heading-body"> <atinymce ng-model="heading" /></div>
![Page 26: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/26.jpg)
USING THE TINYMCE PATTERN
THE ANGULAR DIRECTIVE
![Page 27: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/27.jpg)
ANGULARJS IN THE FUTURE
![Page 28: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/28.jpg)
WHERE TO GO NEXTAngular documentation site:
Code School's Shaping up with Angular.JS:
Angular's github page:
https://docs.angularjs.org/guide
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
https://github.com/angular/angular.js
![Page 29: Developing Single Page Applications on Plone using AngularJS](https://reader035.vdocument.in/reader035/viewer/2022062522/587c609c1a28ab633c8b5cb3/html5/thumbnails/29.jpg)
QUESTIONS?