#PBShop_test#

//

##Purpose of this project## This project is for personal training for JavaScript stem technologies.

###Front-Side###

• AngularJS
• SASS
• GSAP

###Back-End-Side###

• MongoDB
• Mongoose
• NodeJS
• Express

##Screen shot## http://kevangular.herokuapp.com/#!/a-main

###Desktop Version###

###Mobile Version###

###Mobile### Chrome App (Apache CODOVA), Android and IOS version

RESTFUL API

###List Banners Information### http://kevangular.herokuapp.com/banners

###Get Banner Information### http://kevangular.herokuapp.com/banners/:bannerId

Example: http://kevangular.herokuapp.com/banners/5424791b254f310800385bfd

###List Product Information### http://kevangular.herokuapp.com/products

###List Product Information Under a specific banner ### http://kevangular.herokuapp.com/products/list/:bannerId

Example: http://kevangular.herokuapp.com/products/list/5424791b254f310800385bfd

7_10

Fixed gview.client.controller.js

Create a test driven API call
    users.server.controller.js
    user.server.model.js
    user.server.routes.js

---

#7_13# Clone to Home PC

---

#7_14# userlist view added

user information dashboard(not connected with db) example

Files 
1. userlist.client.controller.js
2. userlist.client.view.html

##directive##

• userlist dashboard
• product-description directive This directive will shows product image and description

##services##

• extracting user information
• filtering user information

---

#7_15#

##Build API## GET: /galleries (DONE) list all galleries items(json)

GET: /galleries/userlist list all of user informations

GET: /users/all list all of user's information

/galleries/productlist list all of product list

build Authentication version of API

---

#(Plan)7_16#

##Front-End## implementing product-description directive(30%) Design Quiz directive (10%)

###Plan###

• Considering a Polymer integration
• Design framework material design http://blog.sethladd.com/2014/02/angular-and-polymer-data-binding.html

---

#(Plan)7_17#

##Front-End## implementing product-description directive(30%) Design Quiz directive (10%) Implementation of Quiz directive Toolbar Test (Polymer) URL: http://kevangular.herokuapp.com/#!/test-polymer

##Back-End## Connect Social Network(Facebook, Twitter, and Google+)

---

#(Plan)7_18# ##Front-End## Decorate product-description directive Test polymer is working from AngularJS Directive scope Design Quiz directive Implementation of Quiz directive

##Back-End##

#7_21#

User Friendly User List(Polymer)##

http://kevangular.herokuapp.com/#!/test-polymer

#7_23#

User list data binding with angular##

Dialog Custom element##

#7_24# Communication between Angular and Polymer https://github.com/eee-c/angular-bind-polymer

#7_25# Build Directive by using Polymer elements

Create a editor option 1 1 column description

option 2 2 column description

option 3 3 column description

option 1.1 Image + Description

option 2.1 Image(Left) + Description

option 2.2 Image(right) + Description

option 3.1 Image + Description + Image

option 3.2 Description + Image + Description

#7_29# YouTube Directive implementation files: \public\modules\galleries\directives\youtube\youtube.html \public\modules\galleries\directives\youtube.client.directive.js

applied to (http://kevangular.herokuapp.com/#!/galleries/gview)

##plan## directive styling

#7_30#

#7_31# GSAP Draggable rotation (Image http://kevangular.herokuapp.com/#!/galleries/gview)

#8_1# Apply velocity and snap degree on the Draggable Directive

#8_3# Add SCSS and responsive animated grid gallery

#8_11# menuList

##RestfulAPI(Backend)## app.route('/menus') .get(menus.list) // working .post(menus.create); // working

app.route('/menus/:menusId') .get(menus.read) .put(users.requiresLogin, menus.hasAuthorization, menus.update) .delete(users.requiresLogin, menus.hasAuthorization, menus.delete);

##File Added(Fronend)## added route and view

(menuform.client.controller.js)
(menuform.client.view.js)
(menus.client.service.js)

Menu Form

#8_12# Added Google Map directive Menu Form

#8_13# Image Drag and Drop directive

#8_14# Request:

1. Top Nav Bar Shrink if it doesn't use for 30 second
2. Expending a image

#8_15# Designing a Background

http://www.java2s.com/Open-Source/Javascript_Free_Code/AngularJS/Download_angularJS_TwitterSearch_Free_Java_Code.htm http://codepen.io/GreenSock/pen/zDwEk

##BezierPlugin## http://codepen.io/GreenSock/pen/Krfod

##DirectionalRotationPlugin## http://codepen.io/GreenSock/pen/jiEyG

##preloader## http://codepen.io/GreenSock/pen/KCaBn

#8/18# Front View http://kevangular.herokuapp.com/

Model: https://testcenter.duolingo.com/

#8/19# CSS

#9/5# create rChart directive

Example controller

grunt
$scope.example1 = {
            src: 'library(rCharts)\n'+
                'hair_eye_male <- subset(as.data.frame(HairEyeColor), Sex == "Male")\n' +
                'nPlot(Freq ~ H' +
                'air, group = "Eye", data = hair_eye_male, type = "multiBarChart")',
            title:'Multi Bar Chart'
        };

view

<code>
<r-chart r-source="example1"></r-chart>
<r-chart r-source="example2"></r-chart>
</code>

#9/17# /#!/a-main responsive column and rendering custom directive and http://stackoverflow.com/questions/20297638/call-function-inside-sce-trustashtml-string-in-angular-js

#9/20# Google Permallinks http://gdurl.com/

#9/25# https://github.com/googledrive/realtime-tasks/blob/master/app/scripts/app.js implementing a Google Drive

#10/21# JWT Imeplementation /egghead