├── .gitignore ├── LICENSE ├── Procfile ├── README.md ├── angular-intro.min.js ├── app ├── app.js ├── controllers │ ├── editors │ │ ├── appController.js │ │ ├── controllerController.js │ │ ├── factoryController.js │ │ ├── htmlController.js │ │ └── partialController.js │ ├── intro │ │ └── introController.js │ ├── modal │ │ ├── NewModalCtrl.js │ │ └── modalCtrl.js │ ├── output │ │ └── urlController.js │ ├── prompts │ │ ├── historyController.js │ │ └── promptsController.js │ └── sidenav │ │ ├── SideNavCtrl.js │ │ └── TESTSideNavCtrl.js ├── factories │ ├── factory.js │ ├── inputFactory.js │ ├── lineFactory.js │ └── promptFactory.js ├── historyDirective ├── historyDirective.js ├── morphicon │ └── iconset.svg ├── scripts │ └── angular-ui-router.min.js └── tmpl.html ├── bower.json ├── css ├── angular-material.css ├── introjs.min.css ├── nz-tour.css └── style.css ├── dist ├── app.js ├── controllers │ ├── editors │ │ ├── appController.js │ │ ├── controllerController.js │ │ ├── factoryController.js │ │ ├── htmlController.js │ │ └── partialController.js │ ├── intro │ │ └── introController.js │ ├── modal │ │ ├── NewModalCtrl.js │ │ └── modalCtrl.js │ ├── output │ │ └── urlController.js │ ├── prompts │ │ ├── historyController.js │ │ └── promptsController.js │ └── sidenav │ │ ├── SideNavCtrl.js │ │ └── TESTSideNavCtrl.js ├── factories │ ├── factory.js │ ├── inputFactory.js │ ├── lineFactory.js │ └── promptFactory.js ├── historyDirective.js └── scripts │ ├── angular-ui-router.min.js │ ├── codemirror.min.js │ └── modes.min.js ├── example ├── app.js ├── controller.js └── factory.js ├── gulpfile.js ├── htmltemplates ├── oldprompt10.html ├── oldprompt15.html ├── oldprompt8.html ├── oldprompt9.html ├── prompt1.html ├── prompt10.html ├── prompt11.html ├── prompt12.html ├── prompt13.html ├── prompt14.html ├── prompt15.html ├── prompt16.html ├── prompt17.html ├── prompt18.html ├── prompt19.html ├── prompt2.html ├── prompt20.html ├── prompt21.html ├── prompt210.html ├── prompt22.html ├── prompt3.html ├── prompt4.html ├── prompt5.html ├── prompt6.html ├── prompt7.html ├── prompt8.html └── prompt9.html ├── htmltemplates0 ├── oldprompt10.html ├── oldprompt15.html ├── oldprompt8.html ├── oldprompt9.html ├── prompt1.html ├── prompt10.html ├── prompt11.html ├── prompt12.html ├── prompt13.html ├── prompt14.html ├── prompt15.html ├── prompt16.html ├── prompt17.html ├── prompt18.html ├── prompt19.html ├── prompt2.html ├── prompt20.html ├── prompt21.html ├── prompt210.html ├── prompt22.html ├── prompt3.html ├── prompt4.html ├── prompt5.html ├── prompt6.html ├── prompt7.html ├── prompt8.html └── prompt9.html ├── icons ├── ic_loop_white_24px.svg └── ic_unarchive_white_24px.svg ├── index.html ├── intro.min.js ├── package.json └── server ├── promptController.js ├── promptModel.js └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | .env 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 SnowBubbleJS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: node server/server.js 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AngularArrows-Angular 2 | 3 | 1. Understand Angular.js basics 4 | 2. Know how to initialize and Angular application in HTML 5 | 3. Use *models*, *directives*, *controllers*, *services*, and *factories* 6 | 4. Improve Angular code architecture by adhering to a style guide 7 | 5. Clarify dependency injection and two-way data binding 8 | 6. Work with HTML partials to leverage single-page web application development 9 | -------------------------------------------------------------------------------- /angular-intro.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-intro.js 2015-09-11 */ 2 | !function(a,b){"function"==typeof define&&define.amd?define(["angular","intro"],b):"object"==typeof exports?module.exports=b(require("angular"),require("intro")):a.angularIntroJs=b(a.angular,a.introJs)}(this,function(a,b){"object"==typeof b&&(b=b.introJs);var c=a.module("angular-intro",[]);return c.directive("ngIntroOptions",["$timeout",function(a){return{restrict:"A",scope:{ngIntroMethod:"=",ngIntroExitMethod:"=?",ngIntroNextMethod:"=?",ngIntroPreviousMethod:"=?",ngIntroOptions:"=",ngIntroOncomplete:"=",ngIntroOnexit:"=",ngIntroOnchange:"=",ngIntroOnbeforechange:"=",ngIntroOnafterchange:"=",ngIntroAutostart:"=",ngIntroAutorefresh:"="},link:function(c,d,e){var f;c.ngIntroMethod=function(d){var e=c.$on("$locationChangeStart",function(){f.exit()});f="string"==typeof d?b(d):b(),f.setOptions(c.ngIntroOptions),c.ngIntroAutorefresh&&c.$watch(function(){f.refresh()}),c.ngIntroOncomplete&&f.oncomplete(function(){c.ngIntroOncomplete.call(this,c),a(function(){c.$digest()}),e()}),c.ngIntroOnexit&&f.onexit(function(){c.ngIntroOnexit.call(this,c),a(function(){c.$digest()}),e()}),c.ngIntroOnchange&&f.onchange(function(b){c.ngIntroOnchange.call(this,b,c),a(function(){c.$digest()})}),c.ngIntroOnbeforechange&&f.onbeforechange(function(b){c.ngIntroOnbeforechange.call(this,b,c),a(function(){c.$digest()})}),c.ngIntroOnafterchange&&f.onafterchange(function(b){c.ngIntroOnafterchange.call(this,b,c),a(function(){c.$digest()})}),"number"==typeof d?f.goToStep(d).start():f.start()},c.ngIntroNextMethod=function(){f.nextStep()},c.ngIntroPreviousMethod=function(){f.previousStep()},c.ngIntroExitMethod=function(a){f.exit(),a()};var g=c.$watch("ngIntroAutostart",function(){c.ngIntroAutostart&&a(function(){c.ngIntroMethod()}),g()});c.$on("$locationChangeSuccess",function(){"undefined"!=typeof f&&f.exit()})}}}]),c}); -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | 2 | .directive('menuKey', function() { 3 | return function(scope, element, attrs) { 4 | element.bind("keydown keypress", function(event) { 5 | var keyCode = event.which || event.keyCode; 6 | // If enter key is pressed 7 | if (keyCode === 27) { 8 | 9 | scope.$apply(function() { 10 | // Evaluate the expression 11 | scope.$eval(attrs.menuKey); 12 | }); 13 | event.preventDefault(); 14 | } 15 | }); 16 | }; 17 | }) 18 | ; 19 | -------------------------------------------------------------------------------- /app/controllers/editors/appController.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('AppController', AppController); 5 | 6 | AppController.$inject = ["output", "lineFactory"]; 7 | 8 | function AppController(output, lineFactory) { 9 | var vm = this; 10 | 11 | vm.codemirrorLoaded = codemirrorLoaded; 12 | vm.editorOptions = { 13 | lineWrapping : true, 14 | lineNumbers: true, 15 | mode: 'text/javascript', 16 | }; 17 | 18 | //////////// 19 | 20 | function codemirrorLoaded(_editor) { 21 | _editor.setValue(`(function() { 22 | 23 | }());`); 24 | output.app = _editor.getValue(); 25 | output.render(); 26 | _editor.on('change', function(inst, changes) { 27 | output.app = _editor.getValue(); 28 | // lineFactory.lineHolder(); 29 | output.render(); 30 | // setTimeout(function() { 31 | // lineFactory.lineHolder(); 32 | // }, 500); 33 | }); 34 | } 35 | } 36 | }()); 37 | -------------------------------------------------------------------------------- /app/controllers/editors/controllerController.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('ControllerController', ControllerController); 5 | 6 | ControllerController.$inject = ["lineFactory", "output"]; 7 | 8 | function ControllerController(lineFactory, output) { 9 | var vm = this; 10 | 11 | vm.codemirrorLoaded = codemirrorLoaded; 12 | vm.editorOptions = { 13 | lineWrapping : true, 14 | lineNumbers: true, 15 | mode: 'text/javascript', 16 | }; 17 | 18 | //////////// 19 | 20 | function codemirrorLoaded(_editor) { 21 | _editor.setValue(`(function() { 22 | 23 | }());`); 24 | output.controller = _editor.getValue(); 25 | output.render(); 26 | _editor.on('change', function(inst, changes) { 27 | output.controller = _editor.getValue(); 28 | // lineFactory.lineHolder(); 29 | output.render(); 30 | // setTimeout(function() { 31 | // lineFactory.lineHolder(); 32 | // },0); 33 | }); 34 | } 35 | } 36 | }()); 37 | -------------------------------------------------------------------------------- /app/controllers/editors/factoryController.js: -------------------------------------------------------------------------------- 1 | (function(){angular 2 | .module('app') 3 | .controller('FactoryController', FactoryController); 4 | 5 | FactoryController.$inject = ["lineFactory", "output"]; 6 | 7 | function FactoryController(lineFactory, output) { 8 | var vm = this; 9 | 10 | vm.codemirrorLoaded = codemirrorLoaded; 11 | vm.editorOptions = { 12 | lineWrapping : true, 13 | lineNumbers: true, 14 | mode: 'text/javascript', 15 | }; 16 | //vm.markText({line:4,ch:0},{line:22},{readOnly:true}); 17 | 18 | 19 | //////////// 20 | 21 | function codemirrorLoaded(_editor) { 22 | _editor.setValue(`(function() { 23 | function myFactory(){ 24 | var FriendsList = [ 25 | {'name':'Bryan', 26 | 'age': 30, 27 | 'pet': 'none' 28 | }, 29 | {'name': 'Matt', 30 | 'age': 29, 31 | 'pet': 'nyan_cat' 32 | }, 33 | {'name':'Daniel', 34 | 'age': 25, 35 | 'pet':'catdog' 36 | } 37 | ]; 38 | return FriendsList; 39 | } 40 | }());`); 41 | output.factory = _editor.getValue(); 42 | output.render(); 43 | 44 | _editor.on('change', function(inst, changes) { 45 | output.factory = _editor.getValue(); 46 | // lineFactory.lineHolder(); 47 | output.render(); 48 | // setTimeout(function() { 49 | // lineFactory.lineHolder(); 50 | // },0); 51 | }); 52 | } 53 | } 54 | }()); 55 | -------------------------------------------------------------------------------- /app/controllers/editors/htmlController.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('HtmlController', HtmlController); 5 | 6 | HtmlController.$inject = ["$http", "$scope", "lineFactory", "output"]; 7 | 8 | function HtmlController($http, $scope, lineFactory, output) { 9 | var vm = this; 10 | 11 | vm.codemirrorLoaded = codemirrorLoaded; 12 | vm.editorOptions = { 13 | lineWrapping : true, 14 | lineNumbers: true, 15 | mode: 'htmlmixed' 16 | }; 17 | // $scope.$emit('recheck', function()) 18 | 19 | 20 | //////////// 21 | 22 | // 23 | 24 | 25 | function codemirrorLoaded(_editor) { 26 | _editor.setValue(` 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | `); 38 | output.html = _editor.getValue(); 39 | output.render(); 40 | _editor.on('change', function(inst, changes) { 41 | output.html = _editor.getValue(); 42 | // lineFactory.lineHolder(); 43 | output.render(); 44 | 45 | // $http({ 46 | // method: 'POST', 47 | // url: '/prompts' 48 | // }).then(function successCallback(response) { 49 | // console.log(response); 50 | // }, function errorCallback(response) { 51 | // console.log('failure....'); 52 | // }); 53 | 54 | // setTimeout(function() { 55 | // lineFactory.lineHolder(); 56 | // },0); 57 | }); 58 | }; 59 | } 60 | }()); 61 | -------------------------------------------------------------------------------- /app/controllers/editors/partialController.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('PartialController', PartialController); 5 | 6 | PartialController.$inject = ["output"]; 7 | 8 | function PartialController(output) { 9 | var vm = this; 10 | 11 | vm.codemirrorLoaded = codemirrorLoaded; 12 | vm.editorOptions = { 13 | readOnly: 'nocursor', 14 | lineWrapping : true, 15 | lineNumbers: true, 16 | mode: 'text/javascript', 17 | }; 18 | 19 | //////////// 20 | 21 | function codemirrorLoaded(_editor) { 22 | _editor.setValue(` 23 | `); 24 | output.partial = _editor.getValue(); 25 | output.render(); 26 | _editor.on('change', function(inst, changes) { 27 | output.partial = _editor.getValue(); 28 | output.render(); 29 | }); 30 | } 31 | } 32 | }()); 33 | -------------------------------------------------------------------------------- /app/controllers/intro/introController.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | angular 3 | .module('app') 4 | .controller('IntroController', IntroController); 5 | 6 | IntroController.$inject = ['nzTour', '$timeout']; 7 | 8 | function IntroController(nzTour, $timeout){ 9 | 10 | var vm = this; 11 | 12 | var tour = window.tour = { 13 | config: { 14 | mask:{ 15 | clickExit: true 16 | } 17 | 18 | }, 19 | steps:[{ 20 | content: "

Welcome!


Let's get familiar with the application before we start the tutorial.

Use the left/right keys to go to the next/previous step.

" 21 | },{ 22 | target: "#html", 23 | content: "This is the HTML editor where you will be coding the V in the MVC model." 24 | },{ 25 | target: "#app", 26 | content: "This is the app.js where you'll build the foundation of your application." 27 | },{ 28 | target: "#controller", 29 | content: "This is the controller.js where you'll be creating your controller, the C in the MVC model." 30 | },{ 31 | target: "#factory", 32 | content: "This is the factory.js where you'll be storing data." 33 | },{ 34 | target: '#outputBox', 35 | content: "This is where you'll be witnessing Angular 'magic'." 36 | },{ 37 | target: '#toggleLine', 38 | content: "This is where you can toggle the lines on or off." 39 | },{ 40 | target: '#test', 41 | content: 'Click here to see the history of the prompts as you go through the tutorial.' 42 | },{ 43 | target: '#test1', 44 | content: 'Click here to get started!

Tip: press the esc key as a shortcut to display your current tutorial prompt.

' 45 | }] 46 | }; 47 | 48 | vm.start =function(){ 49 | nzTour.start(tour); 50 | }; 51 | 52 | $timeout(function(){ 53 | vm.start(); 54 | }, 2000); 55 | 56 | } 57 | 58 | })(); 59 | 60 | 61 | 62 | 63 | 64 | // angular 65 | // .module('app') 66 | // .controller('IntroController', IntroController); 67 | // 68 | // function IntroController() { 69 | // var vm = this; 70 | // 71 | // 72 | // vm.CompletedEvent = function (scope) { 73 | // console.log("Completed Event called"); 74 | // }; 75 | // 76 | // vm.ExitEvent = function (scope) { 77 | // console.log("Exit Event called"); 78 | // }; 79 | // 80 | // vm.ChangeEvent = function (targetElement, scope) { 81 | // console.log("Change Event called"); 82 | // console.log(targetElement); //The target element 83 | // console.log(this); //The IntroJS object 84 | // }; 85 | // 86 | // vm.BeforeChangeEvent = function (targetElement, scope) { 87 | // console.log("Before Change Event called"); 88 | // console.log(targetElement); 89 | // }; 90 | // 91 | // vm.AfterChangeEvent = function (targetElement, scope) { 92 | // console.log("After Change Event called"); 93 | // console.log(targetElement); 94 | // }; 95 | // 96 | // vm.IntroOptions = { 97 | // steps:[ 98 | // { 99 | // element: document.querySelector('#step1'), 100 | // intro: "This is the first tooltip.", 101 | // position: 'top' 102 | // }, 103 | // 104 | // ], 105 | // showStepNumbers: false, 106 | // exitOnOverlayClick: true, 107 | // exitOnEsc:true, 108 | // nextLabel: 'NEXT!', 109 | // prevLabel: 'Previous', 110 | // skipLabel: 'Exit', 111 | // doneLabel: 'Thanks' 112 | // }; 113 | // 114 | // vm.ShouldAutoStart = false; 115 | // 116 | // } 117 | -------------------------------------------------------------------------------- /app/controllers/modal/NewModalCtrl.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('NewModalCtrl', NewModalCtrl); 5 | 6 | function NewModalCtrl ($mdDialog, $mdMedia) { 7 | var vm = this; 8 | var tieThisToPromptFactoryCounter = 1; 9 | // vm.customFullscreen = $mdMedia('xs') || $mdMedia('sm'); 10 | 11 | vm.openModal = function(ev) { 12 | var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && vm.customFullscreen; 13 | 14 | $mdDialog.show({ 15 | controller: DialogController, 16 | templateUrl: 'htmltemplates/prompt' + tieThisToPromptFactoryCounter + '.html', 17 | parent: angular.element(document.body), 18 | targetEvent: ev, 19 | clickOutsideToClose:true, 20 | fullscreen: useFullScreen 21 | }); 22 | tieThisToPromptFactoryCounter++; 23 | // vm.$watch(function() { 24 | // return $mdMedia('xs') || $mdMedia('sm'); 25 | // }, function(wantsFullScreen) { 26 | // vm.customFullscreen = (wantsFullScreen === true); 27 | // }); 28 | 29 | }; 30 | } 31 | 32 | function DialogController($mdDialog) { 33 | var vm = this; 34 | vm.hide = function() { 35 | $mdDialog.hide(); 36 | }; 37 | 38 | vm.cancel = function() { 39 | $mdDialog.cancel(); 40 | }; 41 | 42 | vm.answer = function(answer) { 43 | $mdDialog.hide(answer); 44 | }; 45 | } 46 | 47 | }()); 48 | -------------------------------------------------------------------------------- /app/controllers/modal/modalCtrl.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('ModalCtrl', function ($modal, $log) { 5 | var vm = this; 6 | vm.items = ['item1', 'item2', 'item3']; 7 | vm.open = function (size) { 8 | var modalInstance = $modal.open({ 9 | templateUrl: 'tutorialContent.html', 10 | controller: 'ModalInstanceCtrl', 11 | size: size, 12 | resolve: { 13 | items: function () { 14 | return vm.items; 15 | } 16 | } 17 | }); 18 | modalInstance.result.then(function (selectedItem) { 19 | vm.selected = selectedItem; 20 | }, function () { 21 | $log.info('Modal dismissed at: ' + new Date()); 22 | }); 23 | }; 24 | }); 25 | 26 | // Please note that $modalInstance represents a modal window (instance) dependency. 27 | // It is not the same as the $modal service used above. 28 | 29 | angular 30 | .module('app') 31 | .controller('ModalInstanceCtrl', function ($modalInstance, items) { 32 | var vm = this; 33 | vm.items = items; 34 | vm.selected = { 35 | item: vm.items[0] 36 | }; 37 | vm.ok = function () { 38 | $modalInstance.close(vm.selected.item); 39 | }; 40 | vm.cancel = function () { 41 | $modalInstance.dismiss('cancel'); 42 | }; 43 | }); 44 | }()); 45 | -------------------------------------------------------------------------------- /app/controllers/output/urlController.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('EmbeddedPage', EmbeddedPage); 5 | 6 | EmbeddedPage.$inject = ["output"]; 7 | 8 | function EmbeddedPage(output) { 9 | var vm = this; 10 | 11 | vm.changeLink = changeLink; 12 | vm.userInput = 'http://www.localhost:3000/'; 13 | 14 | //////////// 15 | 16 | function changeLink() { 17 | output.url = vm.userInput; 18 | console.log('im here', output); 19 | output.render(); 20 | } 21 | } 22 | }()); 23 | -------------------------------------------------------------------------------- /app/controllers/prompts/historyController.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('HistoryController', HistoryController); 5 | 6 | HistoryController.$inject = ['$scope','$timeout', '$mdSidenav', 'promptFactory']; 7 | function HistoryController($scope, $timeout, $mdSidenav, promptFactory) { 8 | var vm = this; 9 | vm.template = {}; 10 | vm.template.getHistory = getHistory; 11 | vm.openMenu = openMenu; 12 | vm.close = close; 13 | vm.template.historyUrl = 'htmltemplates0/prompt1.html'; 14 | vm.promptNames = [ 15 | 'Starting Angular & Two-Way Data Binding (Part 1)', 16 | '-- Input Box', 17 | '-- Angular Expression', 18 | '-- What are Angular Expressions?', 19 | 'Naming Your Angular Application', 20 | 'Creating the Foundation for Your Application', 21 | '-- Explanation', 22 | 'Using $scope in Your Controller', 23 | '-- Linking the Controller', 24 | "Two-Way Data Binding (Part 2) & 'controllerAs' syntax", 25 | "-- Data binding using 'this'", 26 | "-- Data binding using 'this' part 2", 27 | 'Introduction to factories', 28 | '-- Factory injection in the controller.js', 29 | '-- Passing in myFactory after the injection', 30 | '-- Bringing in data from myFactory', 31 | '-- Displaying the data from myFactory', 32 | '-- Displaying just the names from myFactory', 33 | 'Introduction to ng-repeat', 34 | '-- Using ng-repeat', 35 | '-- Using Angular Expressions with ng-repeat', 36 | 'Congratulations!' 37 | ]; 38 | vm.poossiblePrompts = []; 39 | 40 | 41 | 42 | ////////////// 43 | 44 | function close() { 45 | $mdSidenav('historyRight').close(); 46 | } 47 | 48 | function getHistory(index) { 49 | vm.template.historyUrl = 'htmltemplates0/prompt' + (index+1) + '.html'; 50 | 51 | 52 | $timeout(function(){ 53 | $scope.$apply(); 54 | 55 | $mdSidenav('historyRight').toggle(); 56 | },250); 57 | } 58 | 59 | function openMenu($mdOpenMenu, ev) { 60 | if(promptFactory.counter < 1) { 61 | vm.poossiblePrompts = vm.promptNames.slice(0, 1); 62 | } else { 63 | vm.poossiblePrompts = vm.promptNames.slice(0, promptFactory.counter); 64 | } 65 | // originatorEv = ev; 66 | $mdOpenMenu(ev); 67 | } 68 | } 69 | }()); 70 | -------------------------------------------------------------------------------- /app/controllers/prompts/promptsController.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('PromptsController', PromptsController); 5 | 6 | PromptsController.$inject = ["$http", "$scope", "promptFactory", "$interval", "$mdSidenav", "$timeout","$mdMedia", "lineFactory",'nzTour']; 7 | 8 | function PromptsController($http, $scope, promptFactory, $interval, $mdSidenav, $timeout,$mdMedia, lineFactory,nzTour) { 9 | var vm = this, 10 | promise, 11 | last = { 12 | bottom: false, 13 | top: true, 14 | left: false, 15 | right: true 16 | }; 17 | var counter = 2; 18 | vm.toggle = toggle; 19 | vm.getTutorial = getTutorial; 20 | vm.tutorial = false; 21 | vm.template = {}; 22 | vm.template.url = 'htmltemplates/prompt1.html'; 23 | vm.shouldUpdate = 0; 24 | vm.shouldStart = true; 25 | vm.currentTutorial = ""; 26 | vm.close = close; 27 | vm.progress = 0; 28 | vm.switchStatus = true; 29 | vm.success = false; 30 | vm.startLines = startLines; 31 | vm.stopLines = stopLines; 32 | 33 | $interval(function() { 34 | vm.progress += 15; 35 | if(vm.progress >= 100) { 36 | vm.shouldStart = false; 37 | 38 | } 39 | },100, 7); 40 | 41 | //beginning of toolTip functions 42 | vm.toolTip = false; 43 | 44 | $scope.$watch('vm.toolTip',function(val) { 45 | if (val && val.length ) { 46 | vm.showTooltip = true; 47 | } 48 | }); 49 | //end of toolTip functions 50 | 51 | $scope.$on('answer:correct', function(event, data) { 52 | vm.success = true; 53 | vm.shouldUpdate = 1; 54 | vm.getTutorial(); 55 | vm.shouldUpdate = 0; 56 | }); 57 | 58 | $scope.$watch("vm.switchStatus", function(){ 59 | if(vm.switchStatus) { 60 | vm.startLines(); 61 | } else { 62 | vm.stopLines(); 63 | } 64 | }); 65 | 66 | 67 | vm.startLines(); 68 | 69 | //////////// 70 | 71 | function toggle () { 72 | if (!vm.tutorial) { 73 | vm.getTutorial(); 74 | vm.tutorial = true; 75 | } else { 76 | vm.tutorial = false; 77 | } 78 | counter++; 79 | } 80 | 81 | function close() { 82 | $mdSidenav('right').close(); 83 | } 84 | 85 | function getTutorial() { 86 | //this closes the nzTour if you click the prompt button 87 | 88 | 89 | if(promptFactory.counter === -5) { 90 | promptFactory.counter = 1; 91 | // $timeout(function(){ 92 | $mdSidenav('right').toggle(); 93 | // },1250); 94 | 95 | } 96 | else if(vm.shouldUpdate === 1) { 97 | vm.shouldUpdate = 0; 98 | promptFactory.counter += 1; 99 | if(promptFactory.counter % 1 === 0) { 100 | 101 | vm.template.url = 'htmltemplates/prompt' + promptFactory.counter + '.html'; 102 | console.log(vm.template.url); 103 | $scope.$apply(); 104 | $timeout(function(){ 105 | console.log('inhere'); 106 | vm.success = false; 107 | $mdSidenav('right').toggle(); 108 | },1300); 109 | } 110 | } 111 | else { 112 | console.log(vm.template.url); 113 | $mdSidenav('right').toggle(); 114 | } 115 | 116 | if(counter % 2 === 0) { 117 | counter++; 118 | nzTour.stop(); 119 | } 120 | 121 | 122 | } 123 | 124 | function startLines() { 125 | vm.stopLines(); 126 | promise = $interval(function() { 127 | lineFactory.lineHolder(); 128 | }, 100); 129 | } 130 | 131 | function stopLines() { 132 | $interval.cancel(promise); 133 | lineFactory.clearLines(); 134 | } 135 | } 136 | }()); 137 | -------------------------------------------------------------------------------- /app/controllers/sidenav/SideNavCtrl.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('SideNavCtrl', SideNavCtrl) 5 | .controller('RightCtrl', RightCtrl); 6 | 7 | function SideNavCtrl ($scope, $timeout, $mdSidenav, $log) { 8 | $scope.toggleRight = buildToggler('right'); 9 | $scope.isOpenRight = function(){ 10 | return $mdSidenav('right').isOpen(); 11 | }; 12 | 13 | /** 14 | * Supplies a function that will continue to operate until the 15 | * time is up. 16 | */ 17 | function debounce(func, wait, context) { 18 | var timer; 19 | 20 | return function debounced() { 21 | var context = $scope, 22 | args = Array.prototype.slice.call(arguments); 23 | $timeout.cancel(timer); 24 | timer = $timeout(function() { 25 | timer = undefined; 26 | func.apply(context, args); 27 | }, wait || 10); 28 | }; 29 | } 30 | 31 | /** 32 | * Build handler to open/close a SideNav; when animation finishes 33 | * report completion in console 34 | */ 35 | function buildDelayedToggler(navID) { 36 | return debounce(function() { 37 | $mdSidenav(navID) 38 | .toggle() 39 | .then(function () { 40 | $log.debug("toggle " + navID + " is done"); 41 | }); 42 | }, 200); 43 | } 44 | 45 | function buildToggler(navID) { 46 | return function() { 47 | $mdSidenav(navID) 48 | .toggle() 49 | .then(function () { 50 | $log.debug("toggle " + navID + " is done"); 51 | }); 52 | }; 53 | } 54 | } 55 | 56 | function RightCtrl ($scope, $timeout, $mdSidenav, $log) { 57 | $scope.close = function () { 58 | $mdSidenav('right').close() 59 | .then(function () { 60 | $log.debug("close RIGHT is done"); 61 | }); 62 | }; 63 | } 64 | 65 | }()); 66 | -------------------------------------------------------------------------------- /app/controllers/sidenav/TESTSideNavCtrl.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular 3 | .module('app') 4 | .controller('SideNavCtrl', SideNavCtrl) 5 | .controller('RightCtrl', RightCtrl); 6 | 7 | function SideNavCtrl ($scope, $timeout, $mdSidenav, $log) { 8 | $scope.toggleRight = buildToggler('right'); 9 | $scope.isOpenRight = function(){ 10 | return $mdSidenav('right').isOpen(); 11 | }; 12 | 13 | /** 14 | * Supplies a function that will continue to operate until the 15 | * time is up. 16 | */ 17 | function debounce(func, wait, context) { 18 | var timer; 19 | 20 | return function debounced() { 21 | var context = $scope, 22 | args = Array.prototype.slice.call(arguments); 23 | $timeout.cancel(timer); 24 | timer = $timeout(function() { 25 | timer = undefined; 26 | func.apply(context, args); 27 | }, wait || 10); 28 | }; 29 | } 30 | 31 | /** 32 | * Build handler to open/close a SideNav; when animation finishes 33 | * report completion in console 34 | */ 35 | function buildDelayedToggler(navID) { 36 | return debounce(function() { 37 | $mdSidenav(navID) 38 | .toggle() 39 | .then(function () { 40 | $log.debug("toggle " + navID + " is done"); 41 | }); 42 | }, 200); 43 | } 44 | 45 | function buildToggler(navID) { 46 | return function() { 47 | $mdSidenav(navID) 48 | .toggle() 49 | .then(function () { 50 | $log.debug("toggle " + navID + " is done"); 51 | }); 52 | }; 53 | } 54 | } 55 | 56 | function RightCtrl ($scope, $timeout, $mdSidenav, $log) { 57 | $scope.close = function () { 58 | $mdSidenav('right').close() 59 | .then(function () { 60 | $log.debug("close RIGHT is done"); 61 | }); 62 | }; 63 | } 64 | 65 | }()); 66 | -------------------------------------------------------------------------------- /app/factories/factory.js: -------------------------------------------------------------------------------- 1 | // (function(){ 2 | angular 3 | .module('app') 4 | .factory('output', output); 5 | 6 | output.$inject = ["$rootScope", "promptFactory","inputFactory"]; 7 | 8 | function output($rootScope, promptFactory, inputFactory) { 9 | var out = { 10 | html: '', 11 | partial: '', 12 | app: '', 13 | controller: '', 14 | factory: '', 15 | source: '', 16 | url: "http://www.localhost:3000/", 17 | prepareSource: function(partial) { 18 | var src = this.html; 19 | // Partial 20 | if(!!partial) { 21 | src = src.replace(//, '' + this.partial + '' ); 22 | } 23 | 24 | // App 25 | var appScript = '", 23 | "Let's dive into Angular and look into what Directives are. An Angular Directive extends HTML attributes by placing markers on a HTML tag which tells Angular to run or reference JavaScript code on the marked HTML node and any of that HTML node's children. Directives allow you to write HTML that expresses the behavior of your application. The first directive we will use is 'ng-app', which will initialize your Angular application in the DOM. ", 24 | "I'm sure you've heard of how easy two way data binding is in Angular. Let's write some code to see how easy it really is. But before we do… what exactly is two way data binding? To explain this we need to go 'under the hood' of Angular a little.", 25 | "Two-way data binding in Angular apps is the automatic synchronization of data between the model and view components. A bit confusing right? Don't worry, you'll get practice with it so you can visualize what it is.", 26 | "Now onto a bit of coding, write ng-app into the 'html' tag. The 'ng-app' directive is commonly added to either the 'html' tag or the 'body' tag.", 27 | "Congratulations, you've initiated your first Angular application, not too bad right? Next, let's add an input box within your body like so, . What is ng-model you ask? ng-model is an Angular directive and what the ng-model directive does is that it binds things like an input or textarea to your applications data.", 28 | "Right underneath your input, write {{yourName}}, what the heck is that you ask? It's an Angular expression. Let's dig a little into what exactly an Angular expression is.", 29 | "AngularJS expressions are Javascript-like code snippets that usually binds dynamic data to HTML markup by using double curly braces {{data}}.", 30 | "Congratulations, you made an angular app! Enter your name in the input box. Notice how every key you press it shows right next to it? That is essentially two way data binding.", 31 | "Now let's move onto building a bit more complex application using more angular components. Erase the input tags and the angular expression {{yourName}}.", 32 | "First things first, let's give your Angular application a name of 'myApp'. To do this all you need to do is give the value of your ng-app 'myApp'. Like so, ng-app='myApp'. Having declared the ng-app directive in the html tag, we have made all application functionality available to the html element and all of its nested elements.", 33 | "Now let's move onto the App box. In here we're going to create a foundation for our application. Write angular.module('myApp', [ ]), in the next section we're going to discuss what you just wrote.", 34 | "You must be wondering what .module is. A module is a container for different parts of your app. In order to add functionality to our application, we need to build a container for our application. We just wrote angular.module('myApp', [ ]); This is telling angular to create a new container encased in where we defined our ng-app. We will explain in depth why the [ ] is there, but briefly, it's where we do dependency injections so our angular app can do cool things. Note the 2nd parameter of [ ] is only put in when we are initially creating the module or container. Because we created this container, it only needs to be referenced when we want to add functionality to our application. What you just did was create a 'setter' (the defining of your angular module with a second argument) following the style guide. Now we can use the 'getter' syntax (discussed later) for every other time we need to reference it! For more information on getters and setters, please visit https://github.com/johnpapa/angular-styleguide#modules", 35 | "Now that we've built the foundation of our application, let's build a controller using the Angular Style Guide by John Papa.", 36 | "Before we build the controller, you need to understand that it is common practice to keep all Angular componentry modularized by defining only 1 component per file and even more so to have these separate JavaScript files wrapped within an Immediately Invoked Function expression (IIFE). These IIFEs are created as wrappers for our AngularJS components so that variable names do not clutter the global workspace. IIFEs are characterized by wrapping your function in parentheses followed by a pair of parentheses, for example - ( function(){//codeblock} )(); For more information about the single responsibility of files, please visit https://github.com/johnpapa/angular-styleguide#single-responsibility. For more information about using IIFEs, please visit https://github.com/johnpapa/angular-styleguide#iife.", 37 | "First, we need to know the role of the controller. A controller as its basic form manages your applications data. We will be creating a controller in the controller.js. Similar to the structure of how you created the module in the app.js, we will need to build the controller in a similar manner. First we need to create the relationship of the controller to the 'myApp'. In the HTML file, add in
. Next, move to the controller.js, in here you will be doing the same thing you did in the app.js to encapsulate the controller in your app. Start by using the getter syntax to chain onto the main module angular.module('myApp'). Notice the main difference here being that there is no second argument since we're essentially referring to the main module created in app.js. Now that you've created the relationship, let's tell the Angular App that you want to build a controller. You will be doing this by creating a method after the module (.controller()), the method takes in two parameters. The first parameter is the name of the controller and the second parameter will be a callback function. The callback function will be responsible for managing data. Follow this format: (.controller('MyController', MyController); function MyController(){}).", 38 | "In order to bind the view to our controller, we will use $scope. $scope is the glue between the Controller and the View that helps with all of our data binding needs. First we need to tell Angular that we want to use $scope. In order to do this, we need to put it as the first parameter in our MyController function like so function MyController($scope){} , now that we 'glued' the controller to the view, let's make the controller do things. Inside the controller write $scope.name = 'Bob'; $scope.age = 30; $scope.occupation = 'hacker';. Now that we're done with that, let's display this information so you can see it.", 39 | "In the HTML file, within the
you created for the ng-controller, write the following Angular Expressions. {{name}} {{age}} {{occupation}}.", 40 | "Great job! But, doesn't it seem like {{name}}, {{age}}, {{occupation}} seem too broad? What if we were creating an application that used those properties a lot? Well we can fix that using john papa's style guide using controllerAs syntax.", 41 | "In the html instead of , we will be using , make this adjustment into your index.html. Using this syntax in the view, angular will force you to use 'dotted' objects in the view, which will prevent reference issues e.g using {{myCtrl.name}} makes it a lot more understandable/readable than {{name}}, you might be using name in a lot more places, but it'll be difficult to catch at first. For more information about this method, please visit https://github.com/johnpapa/angular-styleguide#controllers.", 42 | "In your controller.js let's not use $scope to bind our data, but 'this'. Using 'this', will help avoid defining methods into your controller (they should go into factories, which will be discussed later). For now, take out the $scope as the first parameter in your MyController function. Instead write var vm = this; as the first line in your function. Because our controller is binded through 'this', which we set as 'vm', let's change all of our code to vm.name = 'Bob' vm.age = 30 vm.occupation = 'hacker' .", 43 | "As mentioned earlier, since we're using the controllerAs syntax, we can now show these changes in the view using: {{myCtrl.name}} {{myCtrl.age}} {{myCtrl.occupation}} This will also create two-way binding between our view and our controller, meaning that one change to either will affect the other.", 44 | "Why did we use such a random variable name 'vm'? Per john papa's style guide, 'vm' stands for ViewModel. 'The this keyword is contextual and when used within a function inside a controller may change its context.' Capturing the context of this by setting this to vm avoids encountering this problem. But why are we using 'this' instead of $scope? Per john papa's style guide it , 'helps avoid the temptation of using $scope methods inside a controller when it may otherwise be better to avoid them or move the method to a factory, and reference them from the controller. Consider using $scope in a controller only when needed.","You’re doing great! Now that we understand controllers a little more, let’s move onto the factory. A factory is a service in AngularJS that’s used to allow one or multiple Controllers to access a data set. These controllers can then read or modify the data in the factory. The concept to create a factory is straightforward: create an object, add properties to the object, then return the object. After passing the factory to the controller, it will then have access to the object returned from the factory. For the purposes of this tutorial, in the factory.js, we have a function that returns an object with data that we want to use in our app. However, this data might also be used in another controller. In order to keep the data in one spot while allowing both controllers to read/manipulate the data, we’ll create a factory that returns this data set. Let’s move onto to the next prompt to see what we need to do.", 45 | "Take a look at the factory.js, we have an array called ‘FriendsList’ with multiple objects. We want to use this ‘FriendsList’ and display just the names. Similar to how the controller was created, we first need to link our application to the factory. Then, we will add a .factory(‘myFactory’, myFactory) right below the .module, just like how you did it in the controller.js. The first argument in the factory method is the name we want for our factory, and the second argument is a function that returns an object with data. For more information on how a factory should be implement, please refer to: https://github.com/johnpapa/angular-styleguide#factories. ","Now that we have our factory.js set up, we need to pass (or inject) the data from our factory to our controller. From the controller we can pass the data along to our HTML file.","In the controller.js, we need to inject our factory so that our controller has access to the factory’s data. Right above where you declared your MyController function, write the following code MyController.$inject = [‘myFactory’] . Because the MyController function is going to be dependent on the data from factory.js, we call it ‘dependency injection’. Note we’re injecting the names of the function and not the function itself.","We injected ‘myFactory’ to the controller.js, but we also need to inject it to our function. Pass myFactory as the first parameter in the MyController function. Your MyController function should look like this function MyController(myFactory){} . Even though it might seem repetitive, realize that multiple functions can exist in the controller.js and you can control which functions require access to myFactory.", "In the MyController function, similarly to how we used var vm = this; before, let’s keep that in our function. In our MyController function, let’s bring the data from ‘myFactory’. Add vm.list = myFactory to the bottom of the function. Now we can use list in the view to see the data from our factory.","Head over to your HTML file and let’s display the data from our factory. Use angular expressions to show the data. Use {{myCtrl.list}}","Wait a minute, we only wanted the names, how come our whole array is showing up? We know that the list is an array and in the array are three objects. Knowing that, how can we display all three names using expressions? If you get stuck, check out the next slide.","So we need three Angular expressions to display all the names {{myCtrl.list[0].name}}, {{myCtrl.list[1].name}} and {{myCtrl.list[2].name}}. Wow that’s a lot of coding just to display the names, no? Well, Angular is here to make things easier.","In the HTML doc, create a new
right under your body tag. In this div, we’re going to use an Angular directive called ng-repeat. Let’s try it and then explain what it really does.","Inside the div write ng-repeat = ‘list in myCtrl.list’ . Your div should look like
.","We need to use angular expressions to display the data now. Get rid of what you did before iterating through the array manually. Use a new expression like this {{list.name}}" 46 | ]; 47 | } 48 | } 49 | }()); 50 | -------------------------------------------------------------------------------- /app/historyDirective: -------------------------------------------------------------------------------- 1 | angular.module 2 | .directive('foobar', [function factory() { 3 | return { 4 | restrict: 'E', 5 | replace: true, 6 | templateUrl: '/toBeIncluded.html', 7 | scope: { 8 | "var": "=" 9 | } 10 | }; 11 | }]); 12 | -------------------------------------------------------------------------------- /app/historyDirective.js: -------------------------------------------------------------------------------- 1 | angular.module('app') 2 | .directive('foobar', [function factory() { 3 | return { 4 | restrict: 'E', 5 | replace: true, 6 | templateUrl: 'htmltemplates/prompt5.html', 7 | scope: { 8 | "var": "=" 9 | } 10 | }; 11 | }]); 12 | -------------------------------------------------------------------------------- /app/morphicon/iconset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 15 | 16 | 21 | 22 | 27 | 33 | 34 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /app/tmpl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Angular JS

5 |
6 | 7 | 8 | 9 |
10 | 11 |

12 | Content 13 |

14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 |

Angular JS

25 |
26 | 27 | 28 | 29 | 30 | 31 |

Tab One

32 |

33 | Content 34 |

35 | 36 | 37 | 38 | 39 |

Tab Two

40 |

41 | Content 42 |

43 | 44 | 45 | 46 | 47 |
48 | 49 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tutorialpage", 3 | "description": "", 4 | "main": "server.js", 5 | "authors": [ 6 | "Bryan " 7 | ], 8 | "license": "ISC", 9 | "homepage": "https://github.com/bhtruong93/AngularArrows-Angular", 10 | "moduleType": [ 11 | "node" 12 | ], 13 | "private": true, 14 | "ignore": [ 15 | "**/.*", 16 | "node_modules", 17 | "bower_components", 18 | "test", 19 | "tests" 20 | ], 21 | "resolutions": { 22 | "angular": "1.3.15" 23 | }, 24 | "dependencies": { 25 | "angular": "1.4.8", 26 | "angular-ui-codemirror": "~0.3.0", 27 | "polymer": "Polymer/polymer#^1.2.0", 28 | "paper-card": "PolymerElements/paper-card#~1.0.8", 29 | "paper-ripple": "PolymerElements/paper-ripple#~1.0.5", 30 | "nz-tour": "~1.0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /css/introjs.min.css: -------------------------------------------------------------------------------- 1 | .introjs-overlay{position:absolute;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto!important;opacity:1.0!important;position:absolute!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999!important}.introjs-disableInteraction{z-index:99999999!important;position:absolute}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{position:relative}.introjs-helperLayer{position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-tooltipReferenceLayer{position:absolute;visibility:hidden;z-index:10000000;background-color:transparent;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperLayer *,.introjs-helperLayer *:before,.introjs-helperLayer *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.introjs-helperNumberLayer{position:absolute;visibility:visible;top:-16px;left:-16px;z-index:9999999999!important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:bold;color:white;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid white;border-radius:50%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid white;content:'';position:absolute}.introjs-arrow.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.right-bottom{bottom:10px;right:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.bottom{bottom:-10px;border-top-color:white;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left-bottom{left:-10px;bottom:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-tooltip{position:absolute;visibility:visible;padding:10px;background-color:white;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right;white-space:nowrap}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjs-progress{overflow:hidden;height:10px;margin:10px 0 5px 0;border-radius:4px;background-color:#ecf0f1}.introjs-progressbar{float:left;width:0;height:100%;font-size:10px;line-height:10px;text-align:center;background-color:#08c}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%}.introjs-fixedTooltip{position:fixed}.introjs-hint{position:absolute;background:transparent;width:20px;height:15px}.introjs-hidehint{display:none}.introjs-fixedhint{position:fixed}.introjs-hint:hover>.introjs-hint-pulse{border:5px solid rgba(60,60,60,0.57)}.introjs-hint-pulse{width:10px;height:10px;border:5px solid rgba(60,60,60,0.27);-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background-color:rgba(136,136,136,0.24);z-index:10;position:absolute;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.introjs-hint-dot{border:10px solid rgba(146,146,146,0.36);background:transparent;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;height:50px;width:50px;-webkit-animation:introjspulse 3s ease-out;-moz-animation:introjspulse 3s ease-out;animation:introjspulse 3s ease-out;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite;position:absolute;top:-25px;left:-25px;z-index:1;opacity:0}@-moz-keyframes intrjspulse{0%{-moz-transform:scale(0);opacity:.0}25%{-moz-transform:scale(0);opacity:.1}50%{-moz-transform:scale(0.1);opacity:.3}75%{-moz-transform:scale(0.5);opacity:.5}100%{-moz-transform:scale(1);opacity:.0}}@-webkit-keyframes "introjspulse"{0%{-webkit-transform:scale(0);opacity:.0}25%{-webkit-transform:scale(0);opacity:.1}50%{-webkit-transform:scale(0.1);opacity:.3}75%{-webkit-transform:scale(0.5);opacity:.5}100%{-webkit-transform:scale(1);opacity:.0}} -------------------------------------------------------------------------------- /css/nz-tour.css: -------------------------------------------------------------------------------- 1 | nz-tour * { 2 | -webkit-box-sizing: border-box; 3 | box-sizing: border-box; 4 | } 5 | nz-tour.hidden #nzTour-box { 6 | -webkit-transform: scale(0); 7 | transform: scale(0); 8 | } 9 | nz-tour.hidden .nzTour-masks .mask { 10 | opacity: 0; 11 | } 12 | nz-tour #nzTour-box-wrap { 13 | position: fixed; 14 | width: auto; 15 | height: auto; 16 | left: 50%; 17 | top: 50%; 18 | -webkit-transform: translate(-50%, -50%); 19 | transform: translate(-50%, -50%); 20 | display: block; 21 | z-index: 999999999999; 22 | } 23 | nz-tour #nzTour-box { 24 | width: 450px; 25 | min-height: 100px; 26 | max-height: 450px; 27 | padding: 0.3em; 28 | background: #fff; 29 | -webkit-box-shadow: 0 6px 19px 2px rgba(0,0,0,0.14); 30 | box-shadow: 0 6px 19px 2px rgba(0,0,0,0.14); 31 | -webkit-border-radius: 2px; 32 | border-radius: 2px; 33 | -webkit-transition: all 0.3s ease; 34 | transition: all 0.3s ease; 35 | -webkit-transform: scale(1); 36 | transform: scale(1); 37 | } 38 | nz-tour #nzTour-box.dark-box { 39 | background: rgba(0,0,0,0.8); 40 | color: #fff; 41 | } 42 | nz-tour #nzTour-box.dark-box #nzTour-close { 43 | background: rgba(255,255,255,0.81); 44 | color: #000; 45 | } 46 | nz-tour #nzTour-box.dark-box #nzTour-close:hover { 47 | background: #ee342f; 48 | color: #fff; 49 | } 50 | nz-tour #nzTour-box.dark-box #nzTour-step { 51 | background: #fff; 52 | color: rgba(0,0,0,0.8); 53 | } 54 | nz-tour #nzTour-box.dark-box #nzTour-length { 55 | background: rgba(255,255,255,0.2); 56 | color: #bababa; 57 | } 58 | nz-tour #nzTour-box.dark-box #nzTour-tip.left { 59 | left: 5px; 60 | } 61 | nz-tour #nzTour-box.dark-box #nzTour-tip.center { 62 | left: 50%; 63 | } 64 | nz-tour #nzTour-box.dark-box #nzTour-tip.right { 65 | right: 5px; 66 | } 67 | nz-tour #nzTour-box.dark-box #nzTour-tip.side.center { 68 | top: 50%; 69 | } 70 | nz-tour #nzTour-box.dark-box #nzTour-tip.side.top { 71 | top: 5px; 72 | } 73 | nz-tour #nzTour-box.dark-box #nzTour-tip.side.bottom { 74 | bottom: 5px; 75 | } 76 | nz-tour #nzTour-box.dark-box #nzTour-tip.top { 77 | top: -5px; 78 | border-left: 5px solid transparent; 79 | border-right: 5px solid transparent; 80 | border-bottom: 5px solid rgba(0,0,0,0.8); 81 | } 82 | nz-tour #nzTour-box.dark-box #nzTour-tip.bottom { 83 | bottom: -5px; 84 | border-left: 5px solid transparent; 85 | border-right: 5px solid transparent; 86 | border-top: 5px solid rgba(0,0,0,0.8); 87 | } 88 | nz-tour #nzTour-box.dark-box #nzTour-tip.side.left { 89 | left: -10px; 90 | border-top: 5px solid transparent; 91 | border-bottom: 5px solid transparent; 92 | border-right: 5px solid rgba(0,0,0,0.8); 93 | } 94 | nz-tour #nzTour-box.dark-box #nzTour-tip.side.right { 95 | right: -10px; 96 | border-top: 5px solid transparent; 97 | border-bottom: 5px solid transparent; 98 | border-left: 5px solid rgba(0,0,0,0.8); 99 | } 100 | nz-tour #nzTour-tip { 101 | position: absolute; 102 | display: block; 103 | width: 0; 104 | height: 0; 105 | } 106 | nz-tour #nzTour-tip.hidden { 107 | opacity: 0; 108 | } 109 | nz-tour #nzTour-tip.vertical.left { 110 | left: 5px; 111 | } 112 | nz-tour #nzTour-tip.vertical.center { 113 | left: 50%; 114 | } 115 | nz-tour #nzTour-tip.vertical.right { 116 | right: 5px; 117 | } 118 | nz-tour #nzTour-tip.vertical.top { 119 | top: -5px; 120 | border-left: 5px solid transparent; 121 | border-right: 5px solid transparent; 122 | border-bottom: 5px solid #fff; 123 | } 124 | nz-tour #nzTour-tip.vertical.bottom { 125 | bottom: -5px; 126 | border-left: 5px solid transparent; 127 | border-right: 5px solid transparent; 128 | border-top: 5px solid #fff; 129 | } 130 | nz-tour #nzTour-tip.horizontal.top { 131 | top: 5px; 132 | } 133 | nz-tour #nzTour-tip.horizontal.center { 134 | top: 50%; 135 | } 136 | nz-tour #nzTour-tip.horizontal.bottom { 137 | bottom: 5px; 138 | } 139 | nz-tour #nzTour-tip.horizontal.left { 140 | left: -5px; 141 | border-top: 5px solid transparent; 142 | border-bottom: 5px solid transparent; 143 | border-right: 5px solid #fff; 144 | } 145 | nz-tour #nzTour-tip.horizontal.right { 146 | right: -5px; 147 | border-top: 5px solid transparent; 148 | border-bottom: 5px solid transparent; 149 | border-left: 5px solid #fff; 150 | } 151 | nz-tour #nzTour-close { 152 | display: none; 153 | /*position: absolute; 154 | top: -7px; 155 | right: -7px; 156 | width: 14px; 157 | height: 14px; 158 | background: rgba(0,0,0,0.8); 159 | -webkit-border-radius: 100%; 160 | border-radius: 100%; 161 | font-size: 8px; 162 | color: #fff; 163 | cursor: pointer; 164 | -webkit-transition: all 0.2s ease; 165 | transition: all 0.2s ease; 166 | display: -webkit-box; 167 | display: -webkit-flex; 168 | display: -ms-flexbox; 169 | display: box; 170 | display: flex; 171 | -webkit-box-align: center; 172 | -webkit-align-items: center; 173 | align-items: center; 174 | -webkit-box-pack: center; 175 | -webkit-justify-content: center; 176 | justify-content: center;*/ 177 | } 178 | nz-tour #nzTour-close:hover { 179 | background: #ec1d18; 180 | } 181 | nz-tour #nzTour-content { 182 | width: 100%; 183 | height: 100%; 184 | max-height: 330px; 185 | overflow-x: hidden; 186 | overflow-y: scroll; 187 | position: relative; 188 | border-bottom: solid 32px transparent; 189 | -webkit-box-shadow: inset 0 -20px 20px -20px rgba(0,0,0,0.2); 190 | box-shadow: inset 0 -20px 20px -20px rgba(0,0,0,0.2); 191 | /*padding: 0 2px;*/ 192 | font-size: 15px; 193 | font-family: 'Montserrat'; 194 | } 195 | nz-tour #nzTour-step, 196 | nz-tour #nzTour-length { 197 | width: 24px; 198 | height: 24px; 199 | color: #fff; 200 | position: absolute; 201 | bottom: 0.7em; 202 | font-size: 12px; 203 | font-weight: bold; 204 | -webkit-border-radius: 50px; 205 | border-radius: 50px; 206 | display: -webkit-box; 207 | display: -webkit-flex; 208 | display: -ms-flexbox; 209 | display: box; 210 | display: flex; 211 | -webkit-box-align: center; 212 | -webkit-align-items: center; 213 | align-items: center; 214 | -webkit-box-pack: center; 215 | -webkit-justify-content: center; 216 | justify-content: center; 217 | } 218 | nz-tour #nzTour-step { 219 | background: rgba(0,0,0,0.7); 220 | left: 0.7em; 221 | z-index: 1; 222 | } 223 | nz-tour #nzTour-length { 224 | background: #ccc; 225 | left: 2.2em; 226 | z-index: 0; 227 | } 228 | nz-tour #nzTour-actions { 229 | position: absolute; 230 | bottom: 0.5em; 231 | right: 0.5em; 232 | height: 24px; 233 | } 234 | nz-tour #nzTour-actions button { 235 | height: 100%; 236 | border: none; 237 | -webkit-border-radius: 2px; 238 | border-radius: 2px; 239 | font-size: 0.75em; 240 | padding: 4px 7px; 241 | color: #fff; 242 | background-color: #868686; 243 | } 244 | nz-tour #nzTour-actions button:hover { 245 | background-color: #6b6b6b; 246 | } 247 | nz-tour #nzTour-actions button[disabled] { 248 | opacity: 0.2; 249 | } 250 | nz-tour #nzTour-actions button[disabled]:hover { 251 | opacity: 0.2; 252 | } 253 | nz-tour #nzTour-actions button:focus, 254 | nz-tour #nzTour-actions button:focus:active { 255 | outline: none; 256 | } 257 | nz-tour #nzTour-actions button.success { 258 | background-color: #60bd68; 259 | } 260 | nz-tour #nzTour-actions button.success:hover { 261 | background-color: #43a14b; 262 | } 263 | nz-tour #nzTour-actions button.danger { 264 | background-color: #ec1d18; 265 | } 266 | nz-tour #nzTour-actions button.danger:hover { 267 | background-color: #c01410; 268 | } 269 | nz-tour #nzTour-previous { 270 | margin-right: 0.5em; 271 | } 272 | nz-tour .nzTour-masks .mask { 273 | position: fixed; 274 | z-index: 99999999; 275 | } 276 | nz-tour .nzTour-masks .mask.top, 277 | nz-tour .nzTour-masks .mask.bottom { 278 | width: 100%; 279 | height: 0; 280 | left: 0; 281 | } 282 | nz-tour .nzTour-masks .mask.left, 283 | nz-tour .nzTour-masks .mask.right { 284 | width: 0; 285 | height: 100%; 286 | top: 0; 287 | } 288 | nz-tour .nzTour-masks .mask.top { 289 | top: 0; 290 | } 291 | nz-tour .nzTour-masks .mask.bottom { 292 | bottom: 0; 293 | } 294 | nz-tour .nzTour-masks .mask.left { 295 | left: 0; 296 | } 297 | nz-tour .nzTour-masks .mask.right { 298 | right: 0; 299 | } 300 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /** { 2 | border: 1px solid red; 3 | }*/ 4 | 5 | @media(max-width: 900px) { 6 | body { 7 | /*background: black;*/ 8 | width: 900px; 9 | } 10 | } 11 | 12 | 13 | /*@media(max-height: 740px) { 14 | #headers{ 15 | min-height: 50px; 16 | } 17 | md-toolbar { 18 | min-height: 50px; 19 | } 20 | }*/ 21 | 22 | .animated { 23 | -webkit-animation-duration: 1s; 24 | animation-duration: 1s; 25 | -webkit-animation-fill-mode: both; 26 | animation-fill-mode: both; 27 | } 28 | 29 | @-webkit-keyframes jello { 30 | from, 11.1%, to { 31 | -webkit-transform: none; 32 | transform: none; 33 | } 34 | 35 | 22.2% { 36 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 37 | transform: skewX(-12.5deg) skewY(-12.5deg); 38 | } 39 | 40 | 33.3% { 41 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 42 | transform: skewX(6.25deg) skewY(6.25deg); 43 | } 44 | 45 | 44.4% { 46 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 47 | transform: skewX(-3.125deg) skewY(-3.125deg); 48 | } 49 | 50 | 55.5% { 51 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 52 | transform: skewX(1.5625deg) skewY(1.5625deg); 53 | } 54 | 55 | 66.6% { 56 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 57 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 58 | } 59 | 60 | 77.7% { 61 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 62 | transform: skewX(0.390625deg) skewY(0.390625deg); 63 | } 64 | 65 | 88.8% { 66 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 67 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 68 | } 69 | } 70 | 71 | @keyframes jello { 72 | from, 11.1%, to { 73 | -webkit-transform: none; 74 | transform: none; 75 | } 76 | 77 | 22.2% { 78 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 79 | transform: skewX(-12.5deg) skewY(-12.5deg); 80 | } 81 | 82 | 33.3% { 83 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 84 | transform: skewX(6.25deg) skewY(6.25deg); 85 | } 86 | 87 | 44.4% { 88 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 89 | transform: skewX(-3.125deg) skewY(-3.125deg); 90 | } 91 | 92 | 55.5% { 93 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 94 | transform: skewX(1.5625deg) skewY(1.5625deg); 95 | } 96 | 97 | 66.6% { 98 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 99 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 100 | } 101 | 102 | 77.7% { 103 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 104 | transform: skewX(0.390625deg) skewY(0.390625deg); 105 | } 106 | 107 | 88.8% { 108 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 109 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 110 | } 111 | } 112 | 113 | .jello { 114 | -webkit-animation-name: jello; 115 | animation-name: jello; 116 | -webkit-transform-origin: center; 117 | transform-origin: center; 118 | } 119 | 120 | 121 | 122 | #success { 123 | margin: 0; 124 | padding: 0; 125 | top: 0; 126 | left: 0; 127 | position: fixed; 128 | width: 100%; 129 | height: 100%; 130 | vertical-align: middle; 131 | } 132 | 133 | #check { 134 | fill: green; 135 | margin: auto; 136 | } 137 | 138 | h4 { 139 | font-weight: 500; 140 | padding: 0; 141 | margin: 0; 142 | text-align: right; 143 | position: relative; 144 | display: inline; 145 | height: 0; 146 | top: 4px; 147 | right: 20px; 148 | } 149 | 150 | md-card { 151 | margin: 0; 152 | } 153 | 154 | footer { 155 | /*height: 90px;*/ 156 | background: #424242; 157 | color: white; 158 | position: relative; 159 | /*top: 15px;*/ 160 | } 161 | 162 | #header { 163 | background: rgb(96,125,139); 164 | height: 42px; 165 | } 166 | 167 | #canvas { 168 | z-index: -1; 169 | position: absolute; 170 | top: 0; 171 | left: 0; 172 | width: 100%; 173 | overflow: hidden; 174 | } 175 | 176 | .cm-s-default { 177 | background: none; 178 | } 179 | 180 | .CodeMirror-gutters { 181 | background: none; 182 | } 183 | 184 | code { 185 | color: #c7254e; 186 | background: #f9f2f4; 187 | } 188 | 189 | .CodeMirror { 190 | /* Set height, width, borders, and global font properties here */ 191 | font-family: 'Inconsolata', 'Monaco', 'Consolas', 'Courier New', 'Courier'; 192 | font-size: 14px; 193 | height: 44vh; 194 | color: black; 195 | } 196 | 197 | 198 | iframe { 199 | border: none; 200 | width: 80%; 201 | } 202 | 203 | .output { 204 | margin: 20px; 205 | border: 3px solid black; 206 | } 207 | 208 | ng-md-icon svg { 209 | transform: translate3d(0, 25%, 0); 210 | display: inline-block; 211 | } 212 | 213 | #logo svg{ 214 | transform: translate3d(0, 5%, 0); 215 | display: inline-block; 216 | } 217 | 218 | .menuBardemoBasicUsage .page-container { 219 | background-color: #f1f1f1; 220 | padding: 32px; 221 | } 222 | 223 | .menuBardemoBasicUsage .page { 224 | margin: 0 auto; 225 | background-color: white; 226 | padding: 24px; 227 | max-width: 680px; 228 | box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25); 229 | } 230 | 231 | .menuBardemoBasicUsage .page h1 { 232 | text-align: center; 233 | font-size: 1.8rem; 234 | margin-top: 0; 235 | font-weight: normal; 236 | } 237 | 238 | .menuBardemoBasicUsage .page p { 239 | line-height: 1.6rem; 240 | } 241 | 242 | .CodeMirror-scroll { 243 | /*background-color: rgba(245,246,247, 0.4);*/ 244 | /*width: 100%;*/ 245 | height: 100%; 246 | /*margin: 0;*/ 247 | } 248 | 249 | .CodeMirror { 250 | /*height: 100%;*/ 251 | background-color: rgba(237,237,237, 0.4); 252 | } 253 | 254 | .CodeMirror-focused { 255 | background-color: rgba(255,255,255, 0.4); 256 | } 257 | 258 | /*.md-sidenav-backdrop { 259 | opacity: 0 !important; 260 | }*/ 261 | 262 | /*md-sidenav.md-closed-add, 263 | md-sidenav.md-closed-remove { 264 | -webkit-transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important; 265 | transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important; 266 | }*/ 267 | 268 | #headers{ 269 | /*background: black;*/ 270 | height: 6vh; 271 | } 272 | 273 | md-toolbar { 274 | height: 6vh; 275 | } 276 | 277 | footer { 278 | height: 6vh; 279 | } 280 | 281 | h5 { 282 | margin: 0; 283 | } 284 | 285 | 286 | 287 | 288 | md-sidenav.md-closed-add, 289 | md-sidenav.md-closed-remove { 290 | -webkit-transition: none !important; 291 | transition: none !important; 292 | } 293 | -------------------------------------------------------------------------------- /dist/app.js: -------------------------------------------------------------------------------- 1 | "use strict";angular.module("app",["nzTour","ngMaterial","ui.codemirror","ngMdIcons"]).config(["$mdThemingProvider",function(e){e.theme("default").primaryPalette("blue").accentPalette("orange")}]).directive("menuKey",function(){return function(e,n,t){n.bind("keydown keypress",function(n){var r=n.which||n.keyCode;27===r&&(e.$apply(function(){e.$eval(t.menuKey)}),n.preventDefault())})}}); -------------------------------------------------------------------------------- /dist/controllers/editors/appController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function e(e,n){function t(n){n.setValue("(function() {\n \n}());"),e.app=n.getValue(),e.render(),n.on("change",function(t,o){e.app=n.getValue(),e.render()})}var o=this;o.codemirrorLoaded=t,o.editorOptions={lineWrapping:!0,lineNumbers:!0,mode:"text/javascript"}}angular.module("app").controller("AppController",e),e.$inject=["output","lineFactory"]}(); -------------------------------------------------------------------------------- /dist/controllers/editors/controllerController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function e(e,n){function o(e){e.setValue("(function() {\n \n}());"),n.controller=e.getValue(),n.render(),e.on("change",function(o,r){n.controller=e.getValue(),n.render()})}var r=this;r.codemirrorLoaded=o,r.editorOptions={lineWrapping:!0,lineNumbers:!0,mode:"text/javascript"}}angular.module("app").controller("ControllerController",e),e.$inject=["lineFactory","output"]}(); -------------------------------------------------------------------------------- /dist/controllers/editors/factoryController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function n(n,e){function t(n){n.setValue("(function() {\n function myFactory(){\n var FriendsList = [\n {'name':'Bryan',\n 'age': 30,\n 'pet': 'none'\n },\n {'name': 'Matt',\n 'age': 29,\n 'pet': 'nyan_cat'\n },\n {'name':'Daniel',\n 'age': 25,\n 'pet':'catdog'\n }\n ];\n return FriendsList;\n }\n}());"),e.factory=n.getValue(),e.render(),n.on("change",function(t,a){e.factory=n.getValue(),e.render()})}var a=this;a.codemirrorLoaded=t,a.editorOptions={lineWrapping:!0,lineNumbers:!0,mode:"text/javascript"}}angular.module("app").controller("FactoryController",n),n.$inject=["lineFactory","output"]}(); -------------------------------------------------------------------------------- /dist/controllers/editors/htmlController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function t(t,e,r,n){function a(t){t.setValue('\n \n \n \n \n \n \n \n \n \n\n'),n.html=t.getValue(),n.render(),t.on("change",function(e,r){n.html=t.getValue(),n.render()})}var c=this;c.codemirrorLoaded=a,c.editorOptions={lineWrapping:!0,lineNumbers:!0,mode:"htmlmixed"}}angular.module("app").controller("HtmlController",t),t.$inject=["$http","$scope","lineFactory","output"]}(); -------------------------------------------------------------------------------- /dist/controllers/editors/partialController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function e(e){function r(r){r.setValue("\n "),e.partial=r.getValue(),e.render(),r.on("change",function(n,t){e.partial=r.getValue(),e.render()})}var n=this;n.codemirrorLoaded=r,n.editorOptions={readOnly:"nocursor",lineWrapping:!0,lineNumbers:!0,mode:"text/javascript"}}angular.module("app").controller("PartialController",e),e.$inject=["output"]}(); -------------------------------------------------------------------------------- /dist/controllers/intro/introController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function t(t,e){var o=this,r=window.tour={config:{mask:{clickExit:!0}},steps:[{content:"

Welcome!


Let's get familiar with the application before we start the tutorial.

Use the left/right keys to go to the next/previous step.

"},{target:"#html",content:"This is the HTML editor where you will be coding the V in the MVC model."},{target:"#app",content:"This is the app.js where you'll build the foundation of your application."},{target:"#controller",content:"This is the controller.js where you'll be creating your controller, the C in the MVC model."},{target:"#factory",content:"This is the factory.js where you'll be storing data."},{target:"#outputBox",content:"This is where you'll be witnessing Angular 'magic'."},{target:"#toggleLine",content:"This is where you can toggle the lines on or off."},{target:"#test",content:"Click here to see the history of the prompts as you go through the tutorial."},{target:"#test1",content:"Click here to get started!

Tip: press the esc key as a shortcut to display your current tutorial prompt.

"}]};o.start=function(){t.start(r)},e(function(){o.start()},2e3)}angular.module("app").controller("IntroController",t),t.$inject=["nzTour","$timeout"]}(); -------------------------------------------------------------------------------- /dist/controllers/modal/NewModalCtrl.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function e(e,n){var l=this,o=1;l.openModal=function(c){var a=(n("sm")||n("xs"))&&l.customFullscreen;e.show({controller:t,templateUrl:"htmltemplates/prompt"+o+".html",parent:angular.element(document.body),targetEvent:c,clickOutsideToClose:!0,fullscreen:a}),o++}}function t(e){var t=this;t.hide=function(){e.hide()},t.cancel=function(){e.cancel()},t.answer=function(t){e.hide(t)}}e.$inject=["$mdDialog","$mdMedia"],t.$inject=["$mdDialog"],angular.module("app").controller("NewModalCtrl",e)}(); -------------------------------------------------------------------------------- /dist/controllers/modal/modalCtrl.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){angular.module("app").controller("ModalCtrl",["$modal","$log",function(t,e){var n=this;n.items=["item1","item2","item3"],n.open=function(l){var o=t.open({templateUrl:"tutorialContent.html",controller:"ModalInstanceCtrl",size:l,resolve:{items:function(){return n.items}}});o.result.then(function(t){n.selected=t},function(){e.info("Modal dismissed at: "+new Date)})}}]),angular.module("app").controller("ModalInstanceCtrl",["$modalInstance","items",function(t,e){var n=this;n.items=e,n.selected={item:n.items[0]},n.ok=function(){t.close(n.selected.item)},n.cancel=function(){t.dismiss("cancel")}}])}(); -------------------------------------------------------------------------------- /dist/controllers/output/urlController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function e(e){function n(){e.url=t.userInput,console.log("im here",e),e.render()}var t=this;t.changeLink=n,t.userInput="http://www.localhost:3000/"}angular.module("app").controller("EmbeddedPage",e),e.$inject=["output"]}(); -------------------------------------------------------------------------------- /dist/controllers/prompts/historyController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function t(t,o,n,i){function r(){n("historyRight").close()}function a(i){s.template.historyUrl="htmltemplates0/prompt"+(i+1)+".html",o(function(){t.$apply(),n("historyRight").toggle()},250)}function e(t,o){i.counter<1?s.poossiblePrompts=s.promptNames.slice(0,1):s.poossiblePrompts=s.promptNames.slice(0,i.counter),t(o)}var s=this;s.template={},s.template.getHistory=a,s.openMenu=e,s.close=r,s.template.historyUrl="htmltemplates0/prompt1.html",s.promptNames=["Starting Angular & Two-Way Data Binding (Part 1)","-- Input Box","-- Angular Expression","-- What are Angular Expressions?","Naming Your Angular Application","Creating the Foundation for Your Application","-- Explanation","Using $scope in Your Controller","-- Linking the Controller","Two-Way Data Binding (Part 2) & 'controllerAs' syntax","-- Data binding using 'this'","-- Data binding using 'this' part 2","Introduction to factories","-- Factory injection in the controller.js","-- Passing in myFactory after the injection","-- Bringing in data from myFactory","-- Displaying the data from myFactory","-- Displaying just the names from myFactory","Introduction to ng-repeat","-- Using ng-repeat","-- Using Angular Expressions with ng-repeat","Congratulations!"],s.poossiblePrompts=[]}angular.module("app").controller("HistoryController",t),t.$inject=["$scope","$timeout","$mdSidenav","promptFactory"]}(); -------------------------------------------------------------------------------- /dist/controllers/prompts/promptsController.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function t(t,o,e,l,n,s,r,u,i){function c(){d.tutorial?d.tutorial=!1:(d.getTutorial(),d.tutorial=!0),f++}function a(){n("right").close()}function p(){-5===e.counter?(e.counter=1,n("right").toggle()):1===d.shouldUpdate?(d.shouldUpdate=0,e.counter+=1,e.counter%1===0&&(d.template.url="htmltemplates/prompt"+e.counter+".html",console.log(d.template.url),o.$apply(),s(function(){console.log("inhere"),d.success=!1,n("right").toggle()},1300))):(console.log(d.template.url),n("right").toggle()),f%2===0&&(f++,i.stop())}function h(){d.stopLines(),m=l(function(){u.lineHolder()},100)}function g(){l.cancel(m),u.clearLines()}var m,d=this,f=2;d.toggle=c,d.getTutorial=p,d.tutorial=!1,d.template={},d.template.url="htmltemplates/prompt1.html",d.shouldUpdate=0,d.shouldStart=!0,d.currentTutorial="",d.close=a,d.progress=0,d.switchStatus=!0,d.success=!1,d.startLines=h,d.stopLines=g,l(function(){d.progress+=15,d.progress>=100&&(d.shouldStart=!1)},100,7),d.toolTip=!1,o.$watch("vm.toolTip",function(t){t&&t.length&&(d.showTooltip=!0)}),o.$on("answer:correct",function(t,o){d.success=!0,d.shouldUpdate=1,d.getTutorial(),d.shouldUpdate=0}),o.$watch("vm.switchStatus",function(){d.switchStatus?d.startLines():d.stopLines()}),d.startLines()}angular.module("app").controller("PromptsController",t),t.$inject=["$http","$scope","promptFactory","$interval","$mdSidenav","$timeout","$mdMedia","lineFactory","nzTour"]}(); -------------------------------------------------------------------------------- /dist/controllers/sidenav/SideNavCtrl.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function t(t,n,e,o){function i(t){return function(){e(t).toggle().then(function(){o.debug("toggle "+t+" is done")})}}t.toggleRight=i("right"),t.isOpenRight=function(){return e("right").isOpen()}}function n(t,n,e,o){t.close=function(){e("right").close().then(function(){o.debug("close RIGHT is done")})}}t.$inject=["$scope","$timeout","$mdSidenav","$log"],n.$inject=["$scope","$timeout","$mdSidenav","$log"],angular.module("app").controller("SideNavCtrl",t).controller("RightCtrl",n)}(); -------------------------------------------------------------------------------- /dist/controllers/sidenav/TESTSideNavCtrl.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){function t(t,n,e,o){function i(t){return function(){e(t).toggle().then(function(){o.debug("toggle "+t+" is done")})}}t.toggleRight=i("right"),t.isOpenRight=function(){return e("right").isOpen()}}function n(t,n,e,o){t.close=function(){e("right").close().then(function(){o.debug("close RIGHT is done")})}}t.$inject=["$scope","$timeout","$mdSidenav","$log"],n.$inject=["$scope","$timeout","$mdSidenav","$log"],angular.module("app").controller("SideNavCtrl",t).controller("RightCtrl",n)}(); -------------------------------------------------------------------------------- /dist/factories/factory.js: -------------------------------------------------------------------------------- 1 | "use strict";function output(t,r,o){var e={html:"",partial:"",app:"",controller:"",factory:"",source:"",url:"http://www.localhost:3000/",prepareSource:function(t){var r=this.html;t&&(r=r.replace(//,""+this.partial+""));var o="";r=r.replace("",o+"");var e="";r=r.replace("",e+"");var c="";return r=r.replace("",c+"")},render:function(){var r=document.querySelector("#output iframe");if(r.remove(),$(" 99 | 100 | 101 |
102 | 103 | 104 | 105 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 177 | 181 | 182 | 183 | 184 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tutorialpage", 3 | "version": "1.0.0", 4 | "engines": { 5 | "node": "5.0.0", 6 | "npm": "3.3.6" 7 | }, 8 | "main": "server.js", 9 | "scripts": { 10 | "start": "node server/server.js", 11 | "test": "echo \"Error: no test specified\" && exit 1", 12 | "postinstall": "bower install" 13 | }, 14 | "author": "", 15 | "license": "ISC", 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/bhtruong93/AngularArrows-Angular.git" 19 | }, 20 | "bugs": { 21 | "url": "https://github.com/bhtruong93/AngularArrows-Angular/issues" 22 | }, 23 | "homepage": "https://github.com/bhtruong93/AngularArrows-Angular#readme", 24 | "description": "", 25 | "dependencies": { 26 | "angular-material": "^1.0.4", 27 | "angular-ui-bootstrap": "^0.14.3", 28 | "babel-preset-es2015": "^6.3.13", 29 | "bootstrap": "^3.3.6", 30 | "bower": "^1.7.0", 31 | "compression": "^1.6.0", 32 | "express": "^4.13.3", 33 | "gulp": "^3.9.0", 34 | "intro.js": "^1.1.1", 35 | "mongo": "^0.1.0", 36 | "mongodb": "^2.1.0", 37 | "mongoose": "^4.2.10", 38 | "nodemon": "^1.8.1", 39 | "path": "^0.12.7" 40 | }, 41 | "devDependencies": { 42 | "browserify": "^12.0.1", 43 | "gulp": "^3.9.0", 44 | "gulp-babel": "^6.1.1", 45 | "gulp-browserify": "^0.5.1", 46 | "gulp-clean": "^0.3.1", 47 | "gulp-concat": "^2.6.0", 48 | "gulp-ng-annotate": "^1.1.0", 49 | "gulp-uglify": "^1.5.1", 50 | "gulp-util": "^3.0.7", 51 | "vinyl-buffer": "^1.0.0", 52 | "vinyl-source-stream": "^1.1.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /server/promptController.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var express = require('express'); 3 | var Prompt = require('./promptModel.js'); 4 | 5 | var promptModel = { 6 | array: [ 7 | "What is AngularJS? - Let's start this project off by understanding what AngularJS is. AngularJS is a client-side JavaScript framework for making dynamic web applications. Angular lets you use HTML as your template language and allows you to extend HTML's syntax to express your application's components clearly. Angular's two-way data binding and dependency injection eliminate much of the code you would otherwise have to write.", 8 | "Let's dive into Angular and look into what Directives are. An Angular Directive extends HTML attributes by placing markers on a HTML tag which tells Angular to run or reference JavaScript code on the marked HTML node and any of that HTML node's children. Directives allow you to write HTML that expresses the behavior of your application. The first directive we will use is 'ng-app', which will initialize your Angular application in the DOM. The 'ng-app' directive is commonly added to either the 'html' tag or the 'body' tag.", 9 | "I'm sure you've heard of how easy two way data binding is in Angular. Let's write some code to see how easy it really is. But before we do… what exactly is two way data binding? To explain this we need to go 'under the hood' of Angular a little.", 10 | "Two-way data binding in Angular apps is the automatic synchronization of data between the model and view components. A bit confusing right? Don't worry, you'll get practice with it so you can visualize what it is.", 11 | "Now onto a bit of coding, write ng-app into the 'html' tag.", 12 | "Congratulations, you've initiated your first Angular application, not too bad right? Next, let's add an input box within your body like so, . What is ng-model you ask? ng-model is an Angular directive and what the ng-model directive does is that it binds things like an input or textarea to your applications data.", 13 | "Right underneath your input, write {{yourName}}, what the heck is that you ask? It's an Angular expression. Let's dig a little into what exactly an Angular expression is.", 14 | "AngularJS expressions are Javascript-like code snippets that usually binds dynamic data to HTML markup by using double curly braces {{data}}.", 15 | "Congratulations, you made an angular app! Enter your name in the input box. Notice how every key you press it shows right next to it? That is essentially two way data binding.", 16 | "Now let's move onto building a bit more complex application using more angular components. Erase the input tags and the angular expression {{yourName}}.", 17 | "First things first, let's give your Angular application a name of 'myApp'. To do this all you need to do is give the value of your ng-app 'myApp'. Like so, ng-app='myApp'. Having declared the ng-app directive in the html tag, we have made all application functionality available to the html element and all of its nested elements.", 18 | "Now let's move onto the App box. In here we're going to create a foundation for our application. Write angular.module('myApp', [ ]), in the next section we're going to discuss what you just wrote.", 19 | "You must be wondering what .module is. A module is a container for different parts of your app. In order to add functionality to our application, we need to build a container for our application. We just wrote angular.module('myApp', [ ]); This is telling angular to create a new container encased in where we defined our ng-app. We will explain in depth why the [ ] is there, but briefly, it's where we do dependency injections so our angular app can do cool things. Note the 2nd parameter of [ ] is only put in when we are initially creating the module or container. Because we created this container, it only needs to be referenced when we want to add functionality to our application. What you just did was create a 'setter' (the defining of your angular module with a second argument) following the style guide. Now we can use the 'getter' syntax (discussed later) for every other time we need to reference it! For more information on getters and setters, please visit https://github.com/johnpapa/angular-styleguide#modules", 20 | "Now that we've built the foundation of our application, let's build a controller using the Angular Style Guide by John Papa.", 21 | "Before we build the controller, you need to understand that it is common practice to keep all Angular componentry modularized by defining only 1 component per file and even more so to have these separate JavaScript files wrapped within an Immediately Invoked Function expression (IIFE). These IIFEs are created as wrappers for our AngularJS components so that variable names do not clutter the global workspace. IIFEs are characterized by wrapping your function in parentheses followed by a pair of parentheses, for example - ( function(){//codeblock} )(); For more information about the single responsibility of files, please visit https://github.com/johnpapa/angular-styleguide#single-responsibility. For more information about using IIFEs, please visit https://github.com/johnpapa/angular-styleguide#iife.", 22 | "First, we need to know the role of the controller. A controller as its basic form manages your applications data. We will be creating a controller in the controller.js. Similar to the structure of how you created the module in the app.js, we will need to build the controller in a similar manner. First we need to create the relationship of the controller to the 'myApp'. In the HTML file, add in
. Next, move to the controller.js, in here you will be doing the same thing you did in the app.js to encapsulate the controller in your app. Start by using the getter syntax to chain onto the main module angular.module('app'). Notice the main difference here being that there is no second argument since we're essentially referring to the main module created in app.js. Now that you've created the relationship, let's tell the Angular App that you want to build a controller. You will be doing this by creating a method after the module (.controller()), the method takes in two parameters. The first parameter is the name of the controller and the second parameter will be a callback function. The callback function will be responsible for managing data. Follow this format: (.controller('myController', myController); function myController(){}).", 23 | "In order to bind the view to our controller, we will use $scope. $scope is the glue between the Controller and the View that helps with all of our data binding needs. First we need to tell Angular that we want to use $scope. In order to do this, we need to put it as the first parameter in our myController function like so function myController($scope){} , now that we glued the controller to the view, let's make the controller do things. Inside the controller write $scope.name = 'Bob'; $scope.age = 30; $scope.occupation = 'hacker';. Now that we're done with that, let's display this information so you can see it.", 24 | "In the HTML file, within the
you created for the ng-controller, write the following Angular Expressions. {{name}} {{age}} {{occupation}}.", 25 | "Great job! But, doesn't it seem like {{name}}, {{age}}, {{occupation}} seem too broad? What if we were creating an application that used those properties a lot? Well we can fix that using john papa's style guide using controllerAs syntax.", 26 | "In the html instead of , we will be using , make this adjustment into your index.html. Using this syntax in the view, angular will force you to use 'dotted' objects in the view, which will prevent reference issues e.g using {{myCtrl.name}} makes it a lot more understandable/readable than {{name}}, you might be using name in a lot more places, but it'll be difficult to catch at first. For more information about this method, please visit https://github.com/johnpapa/angular-styleguide#controllers.", 27 | "In your controller.js let's not use $scope to bind our data, but 'this'. Using 'this', will help avoid defining methods into your controller (they should go into factories, which will be discussed later). For now, take out the $scope as the first parameter in your myController function. Instead write var vm = this; as the first line in your function. Because our controller is binded through 'this', which we set as 'vm', let's change all of our code to vm.name = 'Bob' vm.age = 30 vm.occupation = 'hacker' .", 28 | "As mentioned earlier, since we're using the controllerAs syntax, we can now show these changes in the view using: {{myCtrl.name}} {{myCtrl.age}} {{myCtrl.occupation}} This will also create two-way binding between our view and our controller, meaning that one change to either will affect the other." 29 | ], 30 | findPrompts: function(req, res) { 31 | Prompt.findOne({}, function(error, prompts) { 32 | res.send(prompts); 33 | }); 34 | }, 35 | postPrompts: function(req, res) { 36 | Prompt.findOne({}, function(error, prompts) { 37 | console.log('this is prompts' + prompts); 38 | if(prompts === null) { 39 | Prompt.create({0: JSON.stringify(promptModel.array)}, function(error, a, b) { 40 | if(error) { 41 | console.log('oh no' + error); 42 | } else { 43 | console.log('works!' + a + b); 44 | } 45 | }); 46 | } 47 | }); 48 | } 49 | }; 50 | 51 | 52 | module.exports = promptModel; 53 | -------------------------------------------------------------------------------- /server/promptModel.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var Schema = mongoose.Schema; 3 | 4 | var prompt = new Schema({ 5 | 0: { 6 | type: String 7 | } 8 | }); 9 | 10 | module.exports = mongoose.model('Prompt', prompt); 11 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var compression = require('compression'); 3 | var path = require('path'); 4 | var mongoose = require('mongoose'); 5 | var Prompt = require('./promptController.js'); 6 | var app = express(); 7 | // var mongoURI = 'mongodb://' + process.env.ID + ':' + process.env.PASS + '@ds029615.mongolab.com:29615/promptsv2'; 8 | // mongoose.connect(mongoURI); 9 | // mongoose.connection.once('open', function() { 10 | // console.log('Connected with MongoLab'); 11 | // }); 12 | app.use(compression()); 13 | app.get("/prompts", Prompt.findPrompts); 14 | // app.post("/prompts", Prompt.postPrompts); 15 | console.log(path.join(__dirname, "../")); 16 | app.use(express.static(path.join(__dirname, "../"))); 17 | 18 | app.listen(process.env.PORT || 5000); 19 | 20 | // @ds027835.mongolab.com:27835/prompts 21 | // mongodb://:@ds029615.mongolab.com:29615/promptsv2 22 | --------------------------------------------------------------------------------