I'm building a web app using mean.io stack. I'm trying to add a 'zingchart-angularjs' dependency and I am getting this error:
[$injector:nomod] Module 'zingchart-angularjs' 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.
I'm new to angular so I'm confused why I could get the 'ngMaterial' dependency working just fine but not the zingchart dependency.
Can someone point me in the right direction/describe what I am doing wrong?
Here is my js file -- dashboard.js
(function() {
'use strict';
/* jshint -W098 */
function DashboardController($scope, Global, Dashboard, $stateParams) {
$scope.global = Global;
$scope.package = {
name: 'dashboard'
};
}
angular
.module('mean.dashboard', ['ngMaterial', 'zingchart-angularjs'])
.controller('DashboardController', DashboardController);
DashboardController.$inject = ['$scope', 'Global', 'Dashboard', '$stateParams'];
})();
index.html
<!DOCTYPE html>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript" src="angular-aria.js"></script>
<script type="text/javascript" src="angular-material.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>
<script type="text/javascript" src="dashboard.js"></script>
</head>
<body ng-app="mean.dashboard" layout="row" ng-cloak>
<div class="container" layout="row" flex>
<md-sidenav layout="column" class="md-whiteframe-10dp" md-is-locked-open='true'>
<md-list>
<md-list-item>
<md-button>
Dashboard
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<md-content id="content" flex>
<ng-view>
<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
</ng-view>
</md-content>
</div>
</body>
</html>
In your index.html you need to include the zingchart-angularjs script before the dashboard.js one;
Also, I don't see the angular-material scripts in your index.html for ngMaterial:
I added this to index.html and it works perfect:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript" src="angular-aria.js"></script>
<script type="text/javascript" src="angular-material.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>
<script type="text/javascript" src="dashboard.js"></script>
https://github.com/angular/material
Related
I am working on a simple application of AngularJs. I use cloud9 as an Ide and install Angular through bower in my project, but still get an error "angular not defined" in my .js file.
Here is my code please help me.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Welcome to BlogIt!";
})
You are not able to load angular.min.js on your page.
Try by changing like this:
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Welcome to BlogIt!";
})
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
You are missing ng-app
<body ng-app="myApp" ng-controller="myCtrl">
Add ng-app in your program.
It's the starting point of the application.
I basically copied this code from a video tutorial from the official site. I wish '4' were shown on the screen, but it keeps showing '{{ totalTodos }}'.
Here index.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
And here index.html:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div ng-controller="TodoCtrl">
{{ totalTodos }}
</div>
</body>
</html>
It's good practice to start correctly if you are newbie in angularJs. Start by creating module and give it any name. I used app as a module name and then your controller and so on ..
angular.module("app", []).controller("TodoCtrl", function ($scope) {
$scope.totalTodos = 4;
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div ng-controller="TodoCtrl">
{{ totalTodos }}
</div>
</body>
</html>
my controller.js has the following code:
var myController = angular.module('myApp.controllers', [])
My Services.js has the following code:
angular.module('myApp.services', [])
When I run my application, the code "var myController = angular.module('myApp.controllers', [])" gives me the following exception:
0x800a1391 - JavaScript runtime error: 'angular' is undefined.
Can anyone please tell me what goes wrong? Your help will be appreciated :)
Btw, here is the html code of my web app
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PathFinding.js</title>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./lib/themes/jquery.ui.all.css" />
<script src="./js/angular.js"></script>
<script type="text/javascript" src="path/to/bower_components/pathfinding/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./lib/raphael-min.js"></script>
<script type="text/javascript" src="./lib/es5-shim.min.js"></script>
<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./lib/state-machine.min.js"></script>
<script type="text/javascript" src="./lib/async.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.draggable.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.accordion.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="./lib/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
<script type="text/javascript" src="./js/controller.js"></script>
<script type="text/javascript" src="./js/Services.js"></script>
<script type="text/javascript" src="./js/mainApp.js"></script>
<script type="text/javascript" src="./js/panel.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<ion-modal-view>
<ion-content>
<ion-scroll zooming="true" overflow-scroll="false" direction="xy" style="width: 100%; height:100%;"
scrollbar-x="false" scrollbar-y="false">
<div class="scroll-container" id="draw_area" style="width: 100%; height:100%; background: url('PathFindingMap.png') no-repeat ">
</div>
</ion-scroll>
</ion-content>
</ion-modal-view>
<button style="margin-bottom:10px;margin-left:30px;margin-right:30px;" id="button1" class="control_button" type="button">Search!</button>
<div style="visibility: hidden;" id="algorithm_panel" class="panel right_panel">
<div class="accordion">
<h3 id="astar_header"></h3>
<div id="astar_section" class="finder_section">
</div>
</div>
</div>
<div style="visibility: hidden;" id="play_panel" class="panel right_panel">
</div>
<div id="stats"></div>
</body>
</html>
Wrong approach of building your angular app
This is how you need to define your module
var app = angular.module('myApp',[])
This is how you need to add your controller in your controller.js
As you have already define your module,no need to give dependency
var app = angular.module('myApp')
app.controller('myController',function(){
// Here is your controller content
})
Here is how you need to add your service in service.js
var app = angular.module('myApp')
app.service('myService',function(){
// Here is your service content (this.method);
})
Your code gives you error because you have defined your module 2 times, ie defining its dependency []
On your controller.js try to reference the angular.js script.
Simply drag the angular.js to you controller.js file. You code will look like this.
/// <reference path="../../../scripts/angular.js" />
On your html code. Include the angular.js and put it into first hierarchy then add your controller.js or else your code will not work.
<script src="scripts/angular.js"></script>
<script src="scripts/controller.js"></script>
I used an angular-route.js file and data-ng-app="angular-app". app.js:
'use strict';
var angular_app = angular.module('angular_app', ['ngRoute']).config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
index.html:
..
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body data-ng-app="angular_app">
..
Why https://validator.w3.org/check display errors:
Line 32, Column 20: there is no attribute "data-ng-app"
<div data-ng-app="angular_app" class="container">
Thank you:
I already linked the script to my html file for the angularjs,sanitize and animate:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
and when i added the ngAnimate as a dependency to my module just like this:
var nameSpace = angular.module("OscarApp", ["ngSanitize","ngAnimate"]);
all my variables inside my expression were displayed as it is not on what was initialized on the variable, just like this:
{{item.award_title}}
what seems to be the problem? I just want to follow this tutorial (https://www.youtube.com/watch?v=Bcv46xKJH98).
Works for me...
This prints 2 to the screen
index.html
<!DOCTYPE html>
<html ng-app="OscarApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-sanitize.min.js"></script>
<script type="text/javascript" src="angular-animate.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
app.js
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
Angular version 1.3.0-rc.3 (latest download from angularjs.org)
This snippet shows that there is no problem with the unit.
maybe you have a problem elsewhere.
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
nameSpace.controller('OscarCtrl',['$scope',function($scope) {
$scope.item={ 'award_title' : 'The Lord of The Rings' };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.min.js"></script>
<div ng-app="OscarApp" ng-controller="OscarCtrl">
{{item.award_title}}
</div>