angularjs - Angular Factory Not Working -
i working on angularjs project user may select number of ingredients. ingredients fall under different categories have hard-coded model , use drop-down lists filter results in view. provide category lists controller controls view, have created number of categoryfactories.
they follows: dishcategoryfactory.js, ingredientcategoryfactory.js
i have factory brings in full list of ingredients $http call (ingredientfactory.js). neither ingredientcategoryfactory nor ingredientfactory providing lists need in view's controller, dishfactory is. sure there 1 key piece of code missing, can't figure out is.
all of factories defined scopes , injected controller. paths these factories laid out in index.html file. include code hope able point out 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 , apple-touch-icon.png in 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 using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]--> <!-- google analytics: change ua-xxxxx-x 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 wrong'); }); }; return { fetch: fetch, dishes: dishes }; }]); thank advice.
looks have them flipped around here minsafe.
angular.module('waterapp') .controller('createdishctrl','$scope','$location','$http', 'ingredientfactory','ingredientcategoryfactory', 'dishcategoryfactory', function($scope, $location, $http, ingredientcategoryfactory, ingredientfactory, dishcategoryfactory) {
This is so true, and In order to make use of the features of AngularJS, you need to hire an angular JS developers or a team of developers who have expertise in using this framework. Well, one can hire a professional freelancer from Eiliana.com, which is a global freelancing platform, and all the freelancers are highly skilled.
ReplyDelete