1

I am begineer learning AngularJS from angularJS documentation and tried to work on Service using Factory Method. I am getting angular Injector error when trying to inject custom service. Error Error: $injector:modulerr Module Error I have worked on it for hours and still can't figure a way to fix the issue.

Script.js

angular.module('myApp',['repeater']).controller('FormController',['ageGenderController',function FormController(ageGenderController){
this.ageOptions = ageGenderController.ageArrays;
this.genderOptions  = ageGenderController.genderArrays;
 var submit = function()
 {
   this.result = "has been submitted";  
 };
}]);

repeater.js

angular.module('repeater', []).factory('ageGenderController',function(){
  var ageArray = new Array(100);
  for(var i= 17; i <ageArray.length; i++)
    {
        ageArray.push(i);
    }
  var genderArray = ['Male','Female','Other'];

  return
  {
    ageArrays: ageArray,
    genderArrays: genderArray
  };
});

index.html

<div ng-app="myApp" ng-controller="FormController as myForm">
            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" ng-model="myForm.name" placeholder="Enter your Name" required>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" ng-model="myForm.email" placeholder="Enter your Email" required>
            </div>
            <div class="form-group">
                <label>Phone</label>
                <input type="number" minlenght="10" maxlength="10" class="form-control" placeholder="Enter your Phone Number" ng-model="myForm.phone" required>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" placeholder="Password" ng-model="myForm.password" required>
            </div>
            <div class="form-group">
                <label>Select your age</label>
                <select ng-model="myForm.ageSelect">
                    <option ng-repeat="c in myForm.ageOptions">{{c}}</option>
                </select>
            </div>
            <div class="form-group">
                <label>Gender</label>
                <select ng-model="myForm.genderSelect">
                    <option ng-repeat="d in myForm.genderOptions">{{d}}</option>
                </select>
            </div>
            <div class="form-group">
                <button ng-click="myForm.submit()" class="btn-primary">Submit</button>
            </div>
            {{myForm.result}}
      </div>
Phil
  • 157,677
  • 23
  • 242
  • 245
aj12
  • 288
  • 3
  • 17
  • 1
    What is the rest of the error message? You can click the link in your console to the Angular error description and paste that link in your question – Phil Jan 30 '17 at 23:38
  • 2
    Regarding the duplicate... your problem is due to a syntax error where you have a newline after `return` in your factory which is keeping `repeater.js` from loading correctly – Phil Jan 30 '17 at 23:43
  • 1
    @Phil I have fixed the return issue. I am getting memory ran out error in browser(Chrome) when using an array of 100 elements but It works If i assign 5-10 values to array. What would be the issue? I though there is no memory limit for JavaScript file. – aj12 Jan 31 '17 at 16:22
  • Please update your question to reflect your current code and I'll re-open it, or just open a new question – Phil Jan 31 '17 at 22:07

0 Answers0