So I referred to this link http://demo.jankuri.com/ngGallery/ to make image gallery.
I did everything as directed but nothing shows up as in no images are shown.
Here is my Controller
var check123 = function() {
for (var i = 0; i < z; i++) {
var a = {thumb: '../images/offers/'+'123456789/thumbnails/' + objectidphoto[i], img: '../images/offers/'+'123456789/' + objectidphoto[i]};
arr.push(a);
}
console.log(arr);
console.log(arr[0]);
}
This is not my complete controller only the significant part.
This is my front end code
<body ng-app="fileUpload" ng-controller="MyCtrl">
<div>
<div class="content">
<ng-gallery images="MyCtrl.arr"></ng-gallery>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="controller14.js"></script>
<script src="ng-infinite-scroll.js"></script>
<script src="ng-infinite-scroll.min.js"></script>
<script type="text/javascript" src="src/js/ngGallery.js"></script>
</body>
The angular code executes without any errors and I am getting proper response in return for that console.log(arr).
What am I doing wrong?
Updated Segment
Controller
var app = angular.module('fileUpload', ['jkuri.gallery']).
controller('MyCtrl', function($scope, $document)
{
var self = this;
self.images = [
{thumb: 'images/offers/'+'123456789/thumbnails/' + '1445524452873_491676259.jpg', img: '../images/offers/'+'123456789/' + '1445524452873_491676259.jpg'},
{thumb: 'images/offers/'+'123456789/thumbnails/' + '1445524894340_7a668c73cddcd2050821f83be901832a_1426070017.jpg', img: '../images/offers/'+'123456789/' + '1445524894340_7a668c73cddcd2050821f83be901832a_1426070017.jpg'}
];
});
HTML
<body ng-app="fileUpload" ng-controller="MyCtrl">
<div>
<ng-gallery images="MyCtrl.images"></ng-gallery>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="controller14.js"></script>
<script src="ng-infinite-scroll.js"></script>
<script src="ng-infinite-scroll.min.js"></script>
<script type="text/javascript" src="src/js/ngGallery.js"></script>
</body>
Now I have exactly replicated what the module's demo looks like. Still the problem is there. There is no change on the front end.
You reference Myctrl.arr , you do not need to prefix the controller name. Just arr should work, that is, if you're correctly assigning arr to the scope. $scope.arr.push ...
I'm going to take a guess you're doing neither of the above.
UDATED:
Your controller:
var app = angular.module('fileUpload', ['jkuri.gallery']). controller('MyCtrl', function($scope, $document) { $scope.images = [ {thumb: 'images/offers/'+'123456789/thumbnails/' + '1445524452873_491676259.jpg', img: '../images/offers/'+'123456789/' + '1445524452873_491676259.jpg'}, {thumb: 'images/offers/'+'123456789/thumbnails/' + '1445524894340_7a668c73cddcd2050821f83be901832a_1426070017.jpg', img: '../images/offers/'+'123456789/' + '1445524894340_7a668c73cddcd2050821f83be901832a_1426070017.jpg'} ]; });
Your html
<body ng-app="fileUpload" ng-controller="MyCtrl"> <div> <ng-gallery images="images"></ng-gallery> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> <script src="controller14.js"></script> <script src="ng-infinite-scroll.js"></script> <script src="ng-infinite-scroll.min.js"></script> <script type="text/javascript" src="src/js/ngGallery.js"></script> </body>
Note the $scope assignment and the lack of the controller name.
Related
I am new to AngularJS and I am experimenting with particular javascript file which I am trying to integrate into the angularJS.
my index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://docs.handsontable.com/0.16.1/scripts/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript"src="https://docs.handsontable.com/0.16.1/bower_components/handsontable/dist/handsontable.full.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/0.16.1/bower_components/handsontable/dist/handsontable.full.min.css">
</head>
<body >
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" dragResize></div>
</body>
</html>
My app.js
angular.module('myApp',[]).directive('dragResize',function(){
return{
restrict: 'EA',
controller: function($scope, $timeout){
//document.addEventListener("DOMContentLoaded", function() {
var
container = document.getElementById('example1'),
hot;
hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(200, 10),
rowHeaders: true,
colHeaders: true,
colWidths: [55, 80, 80, 80, 80, 80, 80],
rowHeights: [50, 40, 100],
manualColumnResize: true,
manualRowResize: true
});
function bindDumpButton() {
if (typeof Handsontable === "undefined") {
return;
}
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
var element = e.target || e.srcElement;
if (element.nodeName == "BUTTON" && element.name == 'dump') {
var name = element.getAttribute('data-dump');
var instance = element.getAttribute('data-instance');
var hot = window[instance];
console.log('data of ' + name, hot.getData());
}
});
}
bindDumpButton();
$timeout(dragResize,0);
//});
}
};
});
I am not sure whether I am doing it right. I tried to run the file but it displayed nothing. I have couple of queries:-
1. How to call the controller in my index.html?
2. Is there the better way to embed the javascript file?
3. Which would be better choice creating a factory and exposing the dependency or creating custom directive?
Would appreciate some knowledge sharing on the problem.
thanks..
Angular is two way binding. So you don't need to inflate any view say DIV with id example1 in your code.
You can create scope to reflect your output using $scope or $rootScope.
And If you want to do this using document.getElementById("") then better go with normal js file instead controller in AngularJS.
And as you have asked :: MultiController in index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
First Name:
<input type="text" ng-model="firstName">
<br> Last Name:
<input type="text" ng-model="lastName">
<br>
<br> Full Name: {{firstName + " " + lastName}}
</div>
<div ng-controller="myCtrl2">
First Name:
<input type="text" ng-model="firstName2">
<br> Last Name:
<input type="text" ng-model="lastName2">
<br>
<br> Full Name: {{firstName + " " + lastName}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
app.controller('myCtrl2', function($scope) {
$scope.firstName2 = "asdf";
$scope.lastName2 = "asdfdsf";
});
</script>
</body>
</html>
jsp page
<!DOCTYPE html>
<html data-ng-app="myApp">
<head><title>Sample JSP Page</title></head>
<body>
<div data-ng-contoler="mainController" >
<input type="text" data-ng-model="greeting">
This is from angular {{greeting}}
</div>
<button data-ng-click="test()">doSomething</button>
</body>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/toast.js"></script>
<script src="app/app.js"></script>
<script src="app/mainController.js"></script>
<script src="app/services.js"></script>
</html>
My module myApp
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($logProvider){
$logProvider.debugEnabled(true);
});
My mainController.js
myApp.controller('mainController',function($scope, $http, myAppFactory) {
$scope.greeting = null;
$scope.greeting = "Jo jo jo it worked!!!!";
$scope.test = function test(){
var v= "asddas";
myAppFactory.test().success(function(date){
var a = data;
})
}
});
My service.js myAppFactory
myApp.factory('myAppFactory', function($http) {
var factory = {};
factory.test = function(){
return "test";
}
return factory;
});
When i press the doSomething button it should go to scope.test
The problem is that the controller is not available.
When i start eclipse, and go to the page on chrome, press f12
i can find the contoller with my code in it, but it never runs.
On start the "greeting" is set to be:
$scope.greeting = null;
$scope.greeting = "Jo jo jo it worked!!!!";
But on the page it is blank, on f12 i see with breakpoints that the code
never worked.
The input field with the data-ng-model="greeting"
is working fine. When i go to the page and write something in it
it is instantly displayed on change.
All files are loaded on the debug window. app, mainController and service.
On load the pages gets all files with status 200 OK
But i cant enter with breakpoints in the mainController.
change typing mistake
<div data-ng-contoler="mainController" >
to
<div data-ng-controller="mainController" >
Hope it will work.
I've got two items in a data object which should subsitute two expressions within my html file. However this is somehow not working. Do you guys know what I am doing wrong?
<head>
<script src="jquery-1.11.3.js"></script>
<script src="handlebars-v4.0.5.js"></script>
</head>
<body>
<script type="text/x-handlebars-template">
var source = $("#template").html();
var template = Handlebars.compile(source);
var data = {
title:"The Earth seen from Apollo 11",
author:"Ed g2s",
};
var html = template(data);
</script>
<script id="template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<h3>{{author}}</h3>
</script></body>
I have a non-AngularJS based page - basic.html which works fine as expected.
basic.html
<!doctype html>
<html>
<head>
</head>
<body>
<div class="tab-container" >
<div id="piechart" style="width:1000px;height:470px;"></div>
</div>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Device', 'Hits (in millions)'],
['A', 89],
['B', 13],
['C', 21],
]);
var options = { title: '' };
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
Then I tried to reorganize the code (a bit naively) to put into AngularJS framework as follows:
basic.html
<!doctype html>
<html ng-app = "Analytics-App" ng-controller="MainController">
<head>
</head>
<body>
<div class="tab-container" >
<div id="piechart" style="width:1000px;height:470px;"></div>
</div>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="scripts/base.js"></script>
</body>
</html>
base.js
var myApp = angular.module('Analytics-App', []);
myApp.controller('MainController', function($scope, $interval) {
var e = document.createElement("script");
e.src = "https://www.google.com/jsapi";
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Device', 'Hits (in millions)'],
['A', 89],
['B', 13],
['C', 21],
]);
var options = {
title: ''
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
Apparently, when loaded, the page DOM changes completely (when viewed using chrome debugger) as:
<html><head><script src="https://www.google.com/uds/?file=visualization&v=1&packages=corechart" type="text/javascript"></script><link href="https://www.google.com/uds/api/visualization/1.0/d90be93871e947a274f6a5157bd75fb0/ui+en.css" type="text/css" rel="stylesheet"><script src="https://www.google.com/uds/api/visualization/1.0/d90be93871e947a274f6a5157bd75fb0/format+en,default+en,ui+en,corechart+en.I.js" type="text/javascript"></script></head></html>
I am trying to understand why controller script failed to add elements into page DOM and why rest of the page elements are removed.
Please use this following.
google.setOnLoadCallback(function () {
angular.bootstrap(document.body, ['Analytics-App']);
});
google.load('visualization', '1', {packages: ['corechart']});
var googleChart = googleChart || angular.module("google-chart",[]);
var myApp = myApp || angular.module("Analytics-App",["google-chart"]);
googleChart.directive("googleChart",function(){
return{
restrict : "A",
link: function($scope, $elem, $attr){
var dt = $scope[$attr.ngModel].dataTable;
var options = {};
if($scope[$attr.ngModel].title)
options.title = $scope[$attr.ngModel].title;
var googleChart = new google.visualization[$attr.googleChart]($elem[0]);
googleChart.draw(dt,options)
}
}
});
myApp.controller("IndexCtrl",function($scope){
$scope.data1 = {};
$scope.data1.dataTable = new google.visualization.DataTable();
$scope.data1.dataTable.addColumn("string","Name")
$scope.data1.dataTable.addColumn("number","Qty")
$scope.data1.dataTable.addRow(["Test",89]);
$scope.data1.dataTable.addRow(["Test2",13]);
$scope.data1.dataTable.addRow(["Test3",21]);
$scope.data1.title="My Pie"
});
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script.js"></script>
<style type="text/css">
.bigGraph {width:500px;height:500px;float:left;}
.mediumGraph {width:400px;height:400px;float:left;}
.smallGraph {width:200px;height:200px;float:left;}
</style>
</head>
<body ng-controller="IndexCtrl">
<div google-chart="PieChart" ng-model="data1" class="bigGraph"></div>
</body>
</html>
Plunker URL http://plnkr.co/edit/5guBqC0upuCVgBtY6076?p=preview
Further help http://gavindraper.com/2013/07/30/google-charts-in-angularjs/
and http://jrrera.github.io/angularjs/2014/04/05/a-better-way-to-integrate-angularjs-and-google-charts/
I'm just getting started with Handlebars.js and I'm already confused by what should be included in my HTML.
I set up a minimal helloworl HTML file that looks like:
<html>
<body>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
document.write(html);
</script>
</body>
</html>
and I get the following error:
[Error] TypeError: undefined is not a function (evaluating 'Handlebars.compile(source)')
global code (index.html, line 17)
What other dependency should be included for this minimal example to work?
Versions used:
jQuery 2.1.4
handlebars 4.0.2
Your call to bower_components/handlebars/handlebars.runtime.js overwrites what bower_components/handlebars/handlebars.js sets up.
Using handlebars.runtime.js implies that your templates are already compiled and thus the Handlebars object you get does not include a compile function.
Remove <script src="bower_components/handlebars/handlebars.runtime.js"></script>and you should be good to go : http://jsfiddle.net/nikoshr/dr3gwh7u/
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
$('body').append(html)
</script>