I'm trying to use these c3 angular charts, but nothing seems to be showing up on the page. THere are no console errors I can find and I've followed the tutorial but nothing appears still.
I've pulled the git repo and referencing the files I think I need.
Why can't I see anything?
Charts:
https://github.com/jettro/c3-angular-directive
Tutorial:
http://jettro.github.io/c3-angular-directive/
Code:
<!DOCTYPE html>
<html ng-app="chart_test" xmlns="http://www.w3.org/1999/html">
<head>
</head>
<body ng-controller="ChartController">
<h1>Line Graph</h1>
<div id="chart1"></div>
<c3chart bindto-id="chart1" show-labels="true">
<chart-column column-id="line1"
column-name="Line 1"
column-color="green"
column-values="30,200,100,400,150,250"
column-type="line"/>
<chart-points point-radius="5"
show-point="true"
point-expand-enabled="true"
point-expand-radius="10"/>
</c3chart>
<script src="d3.min.js"></script>
<script data-require="angular.js#1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="c3-angular.min.js"></script>
<script src="app.js"></script>
<script src="ChartController.js"></script>
</body>
</html>
App.js:
var app = angular.module("chart_test", []);
Chart Controller:
var myApp = angular.module("chart_test");
myApp.controller("ChartController", ["$scope", function($scope){
$scope.message = "hi";
}]);
I am no expert on the subject, but in the getting started section of the page you provided, it says
You have to add the following libraries and stylesheet.
And then lists the following code:
<link href="css/c3.min.css" rel="stylesheet" type="text/css"/>
<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/c3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/c3-angular.min.js"></script>
<script src="js/app.js"></script>
From what I see, you have included d3.min.js, angular.min.js, c3-angular.min.js, app.js but NOT c3.min.css and c3.min.js.
I would advise you to try including them and if it then still doesn't work, update your question with how that went.
Related
i use angularjs module ngAnimate but this does'nt work why i use the same reference for angularjs.org
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-animate.js"></script>
<link rel="style" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<div class="content" ng-controller="PrintCtrl">
<h4>{{title}}</h4>
<p>it's sample content welcome admin in your website</p>
</div>
</body>
var app = angular.module('app', ['ngAnimate']);
app.controller('PrintCtrl',['$scope',function($scope){
$scope.title = "The title";
}]);
I noticed your css tag is linked with rel="style". It should be stylesheet instead of style. If your css is working fine, I think the animate should work
When I use the following static HTML with views, everything works as I expect it would, shown here:
https://embed.plnkr.co/MJYSP01mz5hMZHlNo2HC/
Now what I am asking, is how do I properly get this angular-ui accordion working properly within the ng-view?
See the accordion I am trying to use here:
http://plnkr.co/edit/1ZWBsbO6sQRnZ7CpPrdz?p=info
And my test plunker here, showing that the HTML shows up in the view, but it lacks JS functionality:
https://plnkr.co/edit/I3myvfH5KUkpfV1aWh72?p=info
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script data-require="angular-route#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="Test">
<div ng-include='"header.html"'></div>
<div ng-view></div>
<div ng-include='"footer.html"'></div>
</body>
</html>
You have to define a controller with the name(PageCtrl) you defined.
app.controller('PageCtrl', [function(){
// Your business logic
alert("In am controller");
}])
I have just started to learn angular.js but ng-init is not working in my code. I searched through internet but wasn't able to find any answer.
Here is my code thanks in advance !!
<!DOCTYPE html>
<html lang="en">
<head>
<title>ngClassifieds</title>
</head>
<body ng-app = "ngClassifieds" ng-init="message='hello, World!'">
<h1 ng-model="message">{{ message }}</h1>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
Add the code below in your app.js
var ngClassifieds=angular.module("ngClassifieds",[]);
I think the problem is with script loading
<head>
<title>ngClassifieds</title>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</head>
add your scripts in header tag
Html Code
<body ng-controller="DemoCtrl" ng-app="main" ng-init="data='welcome'">
{{data}}
</body>
Script Code
var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope) {
});
trying beginner's Angular using tutorial here: https://www.youtube.com/watch?v=WuiHuZq_cg4. i think files are in proper places, permissions set, yet my index.html shows nothing on my browser, and Chrome dev tools show everything in place, no errors. code is here" https://gist.github.com/9ad771c60d33fc020216.git, but also here: [what am i missing??]
index.html:
<!doctype html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.0.0rc3/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"
</head>
<body>
<div ng-controllers="TodoCtrl">
{{totalTodos}}
</div>
</body>
</html>
todo.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
Try
ng-controller="TodoCtrl"
instead of
ng-controllers="TodoCtrl"
S won't tag with controller
i have this files under my project and i'm encountring some trouble loading them with ajax and applying angular , here is the plunk :
http://plnkr.co/MxXzlenAuGcDy8iljKYX
the problem is that the content of sidebar.html get loaded and the controller gets executed correctly but for products.html the content only gets loaded and the controller doesn't get executed.
i am using this under chrome and i don't get any errors in my localhost console
I put together a modified version of your plnkr to show how I would approach this in general with Angular and dropped out jQuery since it wasn't necessary here:
http://plnkr.co/edit/QgPUk1JMP1vaWtwgXGbw
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular-route.js" data-semver="1.2.14"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="category.js"></script>
<script type="text/javascript" src="products.js"></script>
</head>
<body ng-app="myApp">
<div ng-include="'sidebar.html'"></div>
<div ng-view></div>
</body>
</html>
JS
// Code goes here
var app = angular.module("myApp" , ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/products/:prodId",{templateUrl:"products.html"})
.when("/products",{templateUrl:"products.html"})
.when("/", {templateUrl:"home.html"})
.otherwise({redirectTo:"/"});
})