Search code examples
angularjsangularjs-service

Angular Factory Not Working

I am working on an AngularJs project where a user may select a number of ingredients. The ingredients fall under different categories which I have hard-coded into the model and use as drop-down lists to filter results in the view. To provide all the category lists to the controller that controls this view, I have created a number of CategoryFactories.

They are as follows: DishCategoryFactory.js, IngredientCategoryFactory.js

I also have a factory which brings in the full list of ingredients from a $http call (IngredientFactory.js). Neither the IngredientCategoryFactory nor the IngredientFactory are providing the lists I need in my view's controller, but the DishFactory is. I am sure there is one key piece of code I am missing, but I can't figure out where it is.

All of my factories are properly defined as scopes and injected into the controller. The paths to these factories are laid out in my index.html file. I will include my code an hope that someone will be able to point out my error.

index.html:

 <!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>Water App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <link href="styles/app.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/createDish.css">
    <!-- endbuild -->
  </head>
  <body ng-app="WaterApp">
    <ng-include src='views/partials/navbar.html'></ng-include>
    <ng-view></ng-view>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->




    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../bower_components/angular-animate/angular-animate.js"></script>
    <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="../bower_components/angular-resource/angular-resource.js"></script>
    <script src="../bower_components/angular-route/angular-route.js"></script>
    <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="../bower_components/angular-touch/angular-touch.js"></script>
    <script src="../bower_components/lodash/dist/lodash.compat.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <!-- app files -->
    <!-- build:js({.tmp,app}) scripts/scripts.js -->
      <script src="scripts/app.js"></script>
      <script src="scripts/constants.js"></script>
      <script src="scripts/routes.js"></script>

      <!-- controllers -->
      <script src="scripts/controllers/navbar.controller.js"></script>
      <script src="scripts/controllers/login.controller.js"></script>
      <script src="scripts/controllers/user.controller.js"></script>
      <script src="scripts/controllers/createUsers.controller.js"></script>
      <script src="scripts/controllers/home.controller.js"></script>
      <script src="scripts/controllers/dish.controller.js"></script>
      <script src='scripts/controllers/createDish.controller.js'></script>
      <script src="scripts/controllers/ingredient.controller.js"></script>

      <!-- services -->
      <script src="scripts/services/auth.factory.js"></script>
      <script src="scripts/services/user.factory.js"></script>
      <script src="scripts/factories/IngredientFactory.js"></script>
      <script src="scripts/factories/DishFactory.js"></script>
      <script src="scripts/factories/IngredientCategoryFactory.js"></script>
      <script src="scripts/factories/DishCategoryFactory.js"></script>

      <!-- directives -->
      <script src="scripts/directives/modal.directive.js"></script>
    <!-- endbuild -->
</body>
</html>

app.js:

'use strict';
angular
  .module('WaterApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ]).run(function(
    $rootScope,
    $location,
    $http,
    $window,
    AuthFactory,
    UserFactory,
    DishFactory,
    IngredientFactory,
    IngredientCategoryFactory,
    DishCategoryFactory
  ) {
  $rootScope.$on('$routeChangeStart', function(event, next) {
    if($location.path() === '/createUsers'){

    } else if (AuthFactory.isAuthenticated()) {
      $http.defaults.headers.common.Authorization = 'Token token=' + $window.sessionStorage.getItem('WaterApp.user');
      UserFactory.fetch();
    } else {
      $location.path('/login');
    }
    DishFactory.fetch();
    IngredientFactory.fetch();

  });
});

createDish.html:

  <ng-include src="'views/partials/navbar.html'"></ng-include>
<div class="container">
  <div ng-controller="CreateDishCtrl">
    <form role="form" name="createDishForm" ng-submit="createDish(dish)">
      <div class="form-group" ng-model="dishCategory">
        <select>
          <option ng-repeat="dish_category in dish_categories">{{dish_category}}</option>
        </select>
      </div>
      <div class="form-group">
        <select ng-model="IngredientCategory">
          <option ng-repeat="ingredient_category in ingredient_categories">{{ingredient_category}}</option>
        </select>
      </div>
      <div class="form-group">
        <select ng-model="IngredientSubCategory">
          <option ng-repeat="ingredient_sub_category in ingredient_sub_categories">{{ingredient_sub_category}}</option>
        </select>
      </div>
      <div class="form-group">
        <div class="checkbox" ng-repeat="ingredient in ingredients | filter: {category:IngredientCategory} | filter: {sub_category:IngredientSubCategory}">
          <label>
            <input type="checkbox" value="{{ ingredient.id }}" ng-checked="hasIngredient(ingredient)" ng-model="ingredient.checked">{{ingredient.name}}
          </label>
        </div>
      </div>
      <div class="form-group">
        <input class="btn" type="submit" class="btn btn-primary" value="Submit">
      </div>
    </form>
  </div>
</div>

createDish.controller.js:

    'use strict';
angular.module('WaterApp').controller('CreateDishCtrl',['$scope','$location','$http','IngredientFactory','IngredientCategoryFactory', 'DishCategoryFactory', function($scope, $location, $http, IngredientCategoryFactory, IngredientFactory, DishCategoryFactory) {

  $scope.dish_categories = DishCategoryFactory.categories;
  $scope.ingredients = IngredientFactory.ingredients;
  $scope.ingredient_categories = IngredientCategoryFactory.categories;
  $scope.ingredient_sub_categories = IngredientCategoryFactory.sub_categories;


  var selectIngredients = function(dish_id){
    _.forEach($scope.ingredients, function(item){
      var isChecked = item.checked;
      //add ingredients
      if(isChecked){
        console.log(item.checked === true)
      }
    });
  };

  $scope.hasIngredient = function(ingredient){
    var found = [];
  }

  $scope.createDish = function(dish) {
    $scope.ingredient_array = [];
    _.forEach($scope.ingredients,function(item){
      var isChecked = item.checked;
      if(isChecked)
        $scope.ingredient_array.push(item)
    });
    console.log($scope.ingredient_array)
  };
}]);

DishCategoryFactory.js:

angular.module('WaterApp').factory('DishCategoryFactory', function(){
  var categories = ['Breakfast', 'Lunch', 'Dinner', 'Dessert',
    'Baked Goods', 'Snacks', 'Drinks', 'Appetizers'];


  return{
    categories: categories
  };

});

IngredientCategoryFactory.js:

angular.module('WaterApp').factory('IngredientCategoryFactory', function(){
  var categories = ['Food', 'Drink', 'Other']
  var sub_categories = ['Vegetable', 'Fruit', 'Meat', 'Alchoholic','Non-Alchoholic', 'Spice','Starch', 'Flour', 'Oil','Condiment', 'Nuts', 'Other']

  return{
    categories: categories,

    sub_categories: sub_categories
  };

});

IngredientFactory.js:

angular.module('WaterApp').factory('DishFactory',['$http',function($http){

  var dishes = [];

  var fetch = function(){
    $http.get('https://urltomyapi.com/dishes').success(function(response){
        angular.copy(response,dishes);
    }).error(function(data,status,headers,config){
      console.log(data,status,headers,config,'youre doing it wrong');
    });
  };

  return {
    fetch: fetch,
    dishes: dishes
  };
}]);

Thank you for your advice.

Solution

  • Looks like you have them flipped around here with your minsafe. 

    angular.module('WaterApp')
.controller('CreateDishCtrl','$scope','$location','$http',
  'IngredientFactory','IngredientCategoryFactory', 'DishCategoryFactory',
function($scope, $location, $http, 
   IngredientCategoryFactory, IngredientFactory, DishCategoryFactory) {