Why can't I render this angularJS code?

Question

This code is taken from the following tutorial using ZingChart. http://www.zingchart.com/blog/2015/03/05/zingchart-angularjs/

My Code looks like the following:

//my-zingchart.html
<html ng-app="myApp">
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
   <script src="http://cdn.zingchart.com/zingchart.min.js">
   <script src="node_modules/zingchart-angularjs/src/zingchart-angularjs.js">
   <script>
       var app = angular.module('myApp',['zingchart-angularjs']);

        app.controller('MainController', function($scope){
        $scope.myData = [1,4,5,5,10];
});
   </script>
</head>
<body>
 <div ng-controller="MainController">
<zingchart id="chart-1" zc-values="myData"></zingchart>
</div>
 </body>
</html>

When I try to render this in chrome, I get nothing but a blank page, and the following error:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

I've looked for similar errors, but their solutions don't seem to fix my problem.

start by making sure the zingchart angular module is loading — inorganik
– inorganik, Commented Jan 17, 2016 at 20:20
Use development version of angular to get more verbose error output and stack trace. Minified version creates links like that where you have to go to their site to interpret it more — charlietfl
– charlietfl, Commented Jan 17, 2016 at 20:23
look in browser dev tools network to be sure path is correct and file is even loading — charlietfl
– charlietfl, Commented Jan 17, 2016 at 20:24

JMK · Accepted Answer · 2016-01-17 20:33:16Z

5

Close your Script tags!

<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://cdn.zingchart.com/zingchart.min.js"></script>
    <script src="node_modules/zingchart-angularjs/src/zingchart-angularjs.js"></script>
    <script>
        var app = angular.module('myApp', ['zingchart-angularjs']);

        app.controller('MainController', function ($scope) {
            $scope.myData = [1, 4, 5, 5, 10];
        });
    </script>
</head>
<body>
    <div ng-controller="MainController">
        <zingchart id="chart-1" zc-values="myData"></zingchart>
    </div>
</body>
</html>

Result

edited Jan 17, 2016 at 20:33

answered Jan 17, 2016 at 20:28

JMK

28.2k56 gold badges176 silver badges293 bronze badges

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

Collectives™ on Stack Overflow

Why can't I render this angularJS code?

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