Post on 16-Jan-2017
HI! OLIMPIU ROB
4+ years experience with Plone~1 year experience with AngularJS
SINGLE PAGE APPLICATIONS
SPA CHALLENGESDOM manipulationBrowser HistoryRoutingModule and view loadingData bindingCachingInput validation
JAVASCRIPT SOLUTIONSEmber.jsExtJSReactMeteorAngularJS
FIRST DEMO
HOW IT WAS MADE
FILE STRUCTUREkittenz/ - images/ 1.jpg 2.jpg ... - pages/ details.html home.html kittenz.html app.js index.html
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']);
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' });;
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;
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]; }]);
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>
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>
ANGULARJS AND PLONEcollective.js.angular
[buildout] ... eggs += collective.js.angular ...
Bower
$ bower init $ bower install --save angularjs
A MORE USEFUL DEMO
VIEW CHAMELEON TEMPLATEINTEGRATING STATIC RESOURCES
VIEW CHAMELEON TEMPLATEINITIAL DATA
THE FACTORY
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>
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>
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 {
USING THE TINYMCE PATTERN
THE TEMPLATE<div class="heading-body"> <atinymce ng-model="heading" /></div>
USING THE TINYMCE PATTERN
THE ANGULAR DIRECTIVE
ANGULARJS IN THE FUTURE
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
QUESTIONS?