JSFiddle not recognizing Angular

Question

This JSfiddle does not seem to be recognizing Angular, even though that library has been selected in the JS pane. http://jsfiddle.net/knot22/rxqh8jtc/12/

Why isn't it working?

Code is posted below, as required by SO; however, it is probably most beneficial to navigate to the fiddle to see all the settings.

Here is the HTML:

<html ng-app="myApp">
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js"></script>
<div ng-controller="formulaCtrlr as vm" >
<form name="vm.formContainer.form" autocomplete="off">
                          <div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid}">
                            <label for="FatA" class="col-sm-2 control-label">Fat A</label>
                            <input name="FatA" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[0]" /><span>%</span>
                            <span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid">Invalid entry.</span>
                            <span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
                            <span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
                        </div>
                        <div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid}">
                            <label for="FatB" class="col-sm-2 control-label">Fat B</label>
                                <input name="FatB" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[1]" /><span>%</span>
                                <span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid">Invalid entry.</span>
                                <span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
                                <span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
                        </div>
                            <div class="col-sm-offset-2">
                                <input type="reset" value="Clear" class="btn btn-default" ng-click="vm.clear()" ng-disabled="vm.formContainer.form.$pristine" />
                            </div>                        
</form>
        <div>formula input: {{vm.formulaInput}}</div>
</div>        
</html>

Here is the JS:

angular.module('myApp', ['ui.validate'])
    .controller("formulaCtrlr", ['$scope', function ($scope) {
            var vm = this;

        vm.formContainer = {
            form: {}
        }

        var originalFormContainer = angular.copy(vm.formContainer); //used for clear function below (to clear form)

        vm.formulaInput = {};
        vm.formulaInput.Fats = [];

        vm.clear = function () {            
            //vm.formulaInput.Fats = [];
            //vm.formContainer.form.$setPristine();
            vm.formContainer = angular.copy(originalFormContainer);
        }

        vm.errorMessages = {
            numberCheck: 'Value must be a number.',
            fatRangeCheck: 'Number must be between 0 and 100.'
        }

        vm.numberCheck = function (value) {
            var result = !(isNaN(parseFloat(value)));
            return result;
            //return !(isNaN(parseFloat(value)));
        }       

        vm.fatRangeCheck = function (value) {
            var result = (value && value > 0.0 && value < 100.0);
            return result;
            //return (value && value > 0.0 && value < 100.0);
        }               

  }]);

There is a detailed error message in the console Module 'ui.validate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. — 2pha
– 2pha, Commented Jul 24, 2018 at 14:20
@2pha I thought <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js"></script> would provide the module but apparently that's not working. I did try adding validate.min.js as a Resource instead, but to no avail. Got any ideas? — knot22
– knot22, Commented Jul 24, 2018 at 14:29

knot22 · Accepted Answer · 2018-07-25 15:21:21Z

1

After adding <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-validate/1.2.3/validate.min.js"></script> to the HTML it worked.

answered Jul 25, 2018 at 15:21

knot22

2,7985 gold badges36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSFiddle not recognizing Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related