From cda517043a9472b9b74aaa2246afb4f0efdd287d Mon Sep 17 00:00:00 2001 From: Parsa Alipour Date: Wed, 24 Jun 2015 14:14:33 -0400 Subject: [PATCH 1/2] merged config with app, switch to controller as and vm syntax, lots of refactoring with regards to best practices --- app.js | 237 ++++++++++++++++++++++++++++++++++++++--------------- index.html | 2 +- 2 files changed, 174 insertions(+), 65 deletions(-) diff --git a/app.js b/app.js index 5ee176b..73d3432 100644 --- a/app.js +++ b/app.js @@ -1,18 +1,99 @@ -var app = angular.module("mainApp", ['ngRoute', 'ngCookies', 'yaru22.angular-timeago', 'angular-loading-bar', 'flash']); - -app.controller('navbarController', ['$scope', 'Auth', function($scope, Auth) { - $scope.firstName = Auth.getFirstName; - $scope.isLoggedIn = function(){ - return Auth.getToken().length > 0; - }; - $scope.logout = function(){ - Auth.logout(); - }; -}]); - -app.controller("loginFormController", function ($scope, $location, Auth, flash) { +/* +Use ng-annotate for build to add Dependency Injection +Annotations. This allows for reduced verbosity in dev. +https://github.com/olov/ng-annotate +*/ + +/* +$scope is replaced with vm (view model); +ContollerAs syntax is used; +Controllers start with caps; +For more information on best practices: +https://github.com/toddmotto/angularjs-styleguide +*/ + +(function () { + angular.module("mainApp", [ + 'ngRoute', + 'ngCookies', + 'yaru22.angular-timeago', + 'angular-loading-bar', + 'flash' + ]); + +function config($routeProvider) { + $routeProvider.when('/login', { + templateUrl: 'login-form.html', + controller: 'LoginFormCtrl as LoginForm', + title: 'Login to Waterloo Answers' + }); + + $routeProvider.when('/signup', { + templateUrl: 'signup.html', + controller: 'SignUpCtrl as SignUp', + title: 'Sign Up for Waterloo Answrs' + }); + + $routeProvider.when('/', { + templateUrl: 'questions.html', + controller: 'QuestionsCtrl as Questions', + title: 'View Questions' + }); + + $routeProvider.when('/ask', { + templateUrl: 'askquestion.html', + controller: 'AskCtrl as Ask', + title: 'Ask a Question' + }); + + $routeProvider.when('/question/:questionId', { + templateUrl: 'singlequestion.html', + controller: 'QuestionCtrl as Question', + title: 'Waterloo Answers' + }); + + $routeProvider.when('/categories', { + templateUrl: 'category.html', + controller: 'CategoryCtrl as Category', + title: 'Waterloo Answers' + }); + + $routeProvider.when('/profile', { + templateUrl: 'profile.html', + controller: 'ProfileCtrl as Profile', + title: 'Your Profile' + }); + + $routeProvider.otherwise({ + redirectTo: '/' + }); +} + +function run ($location, $rootScope) { + $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { + if (current.hasOwnProperty('$$route')) { + $rootScope.title = current.$$route.title; + } + }); +} + +function NavbarCtrl ($scope, Auth) { + var vm = this; + + vm.firstName = Auth.getFirstName; + vm.isLoggedIn = function(){ + return Auth.getToken().length > 0; + }; + vm.logout = function(){ + Auth.logout(); + }; +}; + +function LoginFormCtrl ($scope, $location, Auth, flash) { + var vm = this; + $scope.submit = function() { - Auth.setToken($scope.username, $scope.password, function (error) { + Auth.setToken(vm.username, vm.password, function (error) { if (!error) { flash("You've logged in!"); $location.path("/questions"); @@ -21,11 +102,13 @@ app.controller("loginFormController", function ($scope, $location, Auth, flash) } }); }; -}); +}; + +function SignUpCtrl ($scope, $location, Auth, API, flash) { + var vm = this; -app.controller("signUpController", function ($scope, $location, Auth, API, flash) { $scope.submit = function () { - API.signUp($scope.email, $scope.password, $scope.firstName).success(function (data) { + API.signUp(vm.email, vm.password, vm.firstName).success(function (data) { flash("You've signed up!"); Auth.storeToken(data.token); Auth.storeFirstName(data.firstName); @@ -34,78 +117,82 @@ app.controller("signUpController", function ($scope, $location, Auth, API, flash flash("danger", data.error); }); } -}); +}; + +function QuestionsCtrl ($scope, API, $location, Auth) { + var vm = this; -app.controller('questionsController', function ($scope, API, $location, Auth) { if (Auth.getToken().length < 1) { $location.path("/login"); } var currentTab = 1; - $scope.questions = []; - $scope.categories = []; + vm.questions = []; + vm.categories = []; API.getQuestions().success(function (data) { - $scope.questions = data; + vm.questions = data; }); - $scope.switchTab = function(tab) { + vm.switchTab = function(tab) { if(currentTab != tab){ currentTab = tab; if (currentTab === 3) { API.getCategories().success(function (data) { - $scope.categories = data; + vm.categories = data; $rootScope.categories = data; - $scope.questions = []; + vm.questions = []; }); } else { API.getQuestions().success(function (data) { - $scope.questions = data; - $scope.categories = []; + vm.questions = data; + vm.categories = []; }); } } }; - $scope.isActive = function(tab) { + vm.isActive = function(tab) { return currentTab == tab; } -}); +}; + +function CategoryCtrl ($scope, $rootScope, $routeParams, API, $location, Auth) { + var vm = this; -app.controller('categoryController', function ($scope, $rootScope, $routeParams, API, $location, Auth) { if (Auth.getToken().length < 1) { $location.path("/login"); } - $scope.categoryName = $routeParams.categoryName; + vm.categoryName = $routeParams.categoryName; if ($rootScope.categories == null) { API.getCategories().success(function (data) { $rootScope.categories = data; console.log(data); - $scope.questions = []; + vm.questions = []; var result = $.grep($rootScope.categories, function (e) { - return e.categoryName == $scope.categoryName; + return e.categoryName == vm.categoryName; })[0].categoryId; console.log(result); API.getQuestionsForCategory(result).success(function (data) { - $scope.questions = data; + vm.questions = data; }); }); } else { - $scope.questions = []; + vm.questions = []; var result = $.grep($rootScope.categories, function (e) { - return e.categoryName == $scope.categoryName; + return e.categoryName == vm.categoryName; })[0].categoryId; API.getQuestionsForCategory(result).success(function (data) { - $scope.questions = data; + vm.questions = data; }); } +}; +function QuestionCtrl($scope, $routeParams, API, Auth, flash) { + var vm = this; -}); - -app.controller('questionController', function ($scope, $routeParams, API, Auth, flash) { function onLoad() { API.getQuestion($routeParams.questionId).success(function (data) { - $scope.question = data; + vm.question = data; console.log(data); }).error(function (data) { //TODO handle error @@ -115,55 +202,77 @@ app.controller('questionController', function ($scope, $routeParams, API, Auth, onLoad(); - $scope.submitAnswer = function () { - API.postAnswer($scope.question.questionId, $scope.answerBody, Auth.getToken()).success(function () { + vm.submitAnswer = function () { + API.postAnswer(vm.question.questionId, vm.answerBody, Auth.getToken()).success(function () { flash("Posted new answer! Thank you!"); onLoad(); - $scope.answerBody = null; + vm.answerBody = null; }).error(function (data) { flash("danger", data.error); }); } -}); +}; -app.controller('askController', function ($scope, Auth, API, flash) { - $scope.submit = function () { +function AskCtrl ($scope, Auth, API, flash) { + var vm = this; + + vm.submit = function () { //TODO assure that each value is selected/filled out correctly - API.postQuestion($scope.title, $scope.description, $scope.categoryChoice, Auth.getToken()).success(function (data, status) { + API.postQuestion(vm.title, vm.description, vm.categoryChoice, Auth.getToken()).success(function (data, status) { //TODO redirect to the individual question with a flash message }).error(function (data) { flash("danger", data.error); }); }; - $scope.categories = []; + vm.categories = []; API.getCategories().success(function (data) { - $scope.categories = data; + vm.categories = data; $rootScope.categories = data; }).error(function () { - $scope.categories.push({categoryId: -1, categoryName: "error, reload page"}); + vm.categories.push({categoryId: -1, categoryName: "error, reload page"}); }); -}); +}; -app.controller('profileController', function ($scope, Auth, API) { +function ProfileCtrl ($scope, Auth, API) { + var vm = this; - $scope.user = {}; - $scope.questions = []; - $scope.answers = []; + vm.user = {}; + vm.questions = []; + vm.answers = []; API.getUser(Auth.getToken()).success(function (data) { - $scope.user.firstName = data.firstName || ""; - $scope.user.email = data.email; - $scope.user.dateJoined = data.dateJoined; - $scope.questions = data.questionsAsked; - $scope.answers = data.answersGiven; + vm.user.firstName = data.firstName || ""; + vm.user.email = data.email; + vm.user.dateJoined = data.dateJoined; + vm.questions = data.questionsAsked; + vm.answers = data.answersGiven; }); -}); +}; -app.directive('navbar', function(){ +function navbar(){ return { restrict: 'E', templateUrl:'navbar.html' }; -}); \ No newline at end of file +}; + +angular + .module("mainApp") + .config(config) + .run(run) + + .controller('NavbarCtrl', NavbarCtrl) + .controller('LoginFormCtrl', LoginFormCtrl) + .controller('SignUpCtrl', SignUpCtrl) + .controller('QuestionsCtrl', QuestionsCtrl) + .controller('CategoryCtrl', CategoryCtrl) + .controller('QuestionCtrl', QuestionCtrl) + .controller('AskCtrl', AskCtrl) + .controller('ProfileCtrl', ProfileCtrl) + + .directive('navbar', navbar); +}(); + + diff --git a/index.html b/index.html index a279e61..88636f1 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ -
+
From 02e4e365b2ed5af9ec8aa417b90fccede4490c1e Mon Sep 17 00:00:00 2001 From: Parsa Alipour Date: Wed, 24 Jun 2015 14:40:59 -0400 Subject: [PATCH 2/2] deleted config file and merged it to the bottom of app.js --- AppConfig.js | 60 -------------------------- app.js | 120 +++++++++++++++++++++++++++------------------------ 2 files changed, 64 insertions(+), 116 deletions(-) delete mode 100644 AppConfig.js diff --git a/AppConfig.js b/AppConfig.js deleted file mode 100644 index 416183d..0000000 --- a/AppConfig.js +++ /dev/null @@ -1,60 +0,0 @@ -/** - * Created by Sahil Jain on 16/08/2014. - */ -var app = angular.module("mainApp"); - -app.config(function ($routeProvider) { - $routeProvider.when('/login', { - templateUrl: 'login-form.html', - controller: 'loginFormController', - title: 'Login to Waterloo Answers' - }); - - $routeProvider.when('/signup', { - templateUrl: 'signup.html', - controller: 'signUpController', - title: 'Sign Up for Waterloo Answrs' - }); - - $routeProvider.when('/', { - templateUrl: 'questions.html', - controller: 'questionsController', - title: 'View Questions' - }); - - $routeProvider.when('/ask', { - templateUrl: 'askquestion.html', - controller: 'askController', - title: 'Ask a Question' - }); - - $routeProvider.when('/question/:questionId', { - templateUrl: 'singlequestion.html', - controller: 'questionController', - title: 'Waterloo Answers' - }); - - $routeProvider.when('/categories', { - templateUrl: 'category.html', - controller: 'categoryController', - title: 'Waterloo Answers' - }); - - $routeProvider.when('/profile', { - templateUrl: 'profile.html', - controller: 'profileController', - title: 'Your Profile' - }); - - $routeProvider.otherwise({ - redirectTo: '/' - }); -}); - -app.run(['$location', '$rootScope', function ($location, $rootScope) { - $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { - if (current.hasOwnProperty('$$route')) { - $rootScope.title = current.$$route.title; - } - }); -}]); \ No newline at end of file diff --git a/app.js b/app.js index 73d3432..62af95d 100644 --- a/app.js +++ b/app.js @@ -21,62 +21,6 @@ https://github.com/toddmotto/angularjs-styleguide 'flash' ]); -function config($routeProvider) { - $routeProvider.when('/login', { - templateUrl: 'login-form.html', - controller: 'LoginFormCtrl as LoginForm', - title: 'Login to Waterloo Answers' - }); - - $routeProvider.when('/signup', { - templateUrl: 'signup.html', - controller: 'SignUpCtrl as SignUp', - title: 'Sign Up for Waterloo Answrs' - }); - - $routeProvider.when('/', { - templateUrl: 'questions.html', - controller: 'QuestionsCtrl as Questions', - title: 'View Questions' - }); - - $routeProvider.when('/ask', { - templateUrl: 'askquestion.html', - controller: 'AskCtrl as Ask', - title: 'Ask a Question' - }); - - $routeProvider.when('/question/:questionId', { - templateUrl: 'singlequestion.html', - controller: 'QuestionCtrl as Question', - title: 'Waterloo Answers' - }); - - $routeProvider.when('/categories', { - templateUrl: 'category.html', - controller: 'CategoryCtrl as Category', - title: 'Waterloo Answers' - }); - - $routeProvider.when('/profile', { - templateUrl: 'profile.html', - controller: 'ProfileCtrl as Profile', - title: 'Your Profile' - }); - - $routeProvider.otherwise({ - redirectTo: '/' - }); -} - -function run ($location, $rootScope) { - $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { - if (current.hasOwnProperty('$$route')) { - $rootScope.title = current.$$route.title; - } - }); -} - function NavbarCtrl ($scope, Auth) { var vm = this; @@ -258,6 +202,70 @@ function navbar(){ }; }; + +/* +config and run placed last in the app file +as to not cause cluttering for other necessary +functions +*/ + + +function config($routeProvider) { + $routeProvider.when('/login', { + templateUrl: 'login-form.html', + controller: 'LoginFormCtrl as LoginForm', + title: 'Login to Waterloo Answers' + }); + + $routeProvider.when('/signup', { + templateUrl: 'signup.html', + controller: 'SignUpCtrl as SignUp', + title: 'Sign Up for Waterloo Answrs' + }); + + $routeProvider.when('/', { + templateUrl: 'questions.html', + controller: 'QuestionsCtrl as Questions', + title: 'View Questions' + }); + + $routeProvider.when('/ask', { + templateUrl: 'askquestion.html', + controller: 'AskCtrl as Ask', + title: 'Ask a Question' + }); + + $routeProvider.when('/question/:questionId', { + templateUrl: 'singlequestion.html', + controller: 'QuestionCtrl as Question', + title: 'Waterloo Answers' + }); + + $routeProvider.when('/categories', { + templateUrl: 'category.html', + controller: 'CategoryCtrl as Category', + title: 'Waterloo Answers' + }); + + $routeProvider.when('/profile', { + templateUrl: 'profile.html', + controller: 'ProfileCtrl as Profile', + title: 'Your Profile' + }); + + $routeProvider.otherwise({ + redirectTo: '/' + }); +} + +function run ($location, $rootScope) { + $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { + if (current.hasOwnProperty('$$route')) { + $rootScope.title = current.$$route.title; + } + }); +} + angular .module("mainApp") .config(config)