I trying to load my html page using backbone framework .I am using backbone-marionettejs file.I need to show load my my template while using router functionalty in backbone .could you please tell me where i did wrong ? here is my code
http://goo.gl/cnrE7c
<!DOCTYPE HTML>
<html>
<head>
<title>Tut</title>
<script type="text/javascript" src="lib/jquery-1.11.2.min.js"></script>
<!--script type="text/javascript" src="lib/json2.js"></script-->
<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>
<script type="text/javascript" src="lib/backbone.marionette.js"></script>
<script type="text/javascript" src="router/router.js"></script>
<script type="text/javascript" src="view/first.js"></script>
</head>
<body>
<div>
<div id="header">
</div>
<div id="contend">
<p>Here is static content in the web page. You'll notice that it gets
replaced by our app as soon as we start it.</p>
</div>
<div id="fotter">
</div>
</div>
<script type="text/javascript" src="view/first.js"></script>
</body>
<script>
$(document).ready(function(){
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion:"#contend"
})
ContactManager.on("start", function(){
console.log("ContactManager has started!");
});
ContactManager.start();
})
</script>
</html>
Related
Does anyone know why my jquery won't run? I've tried running on button click or page load but it isn't working. Thanks
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="bing.com">
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
You need to close your iframe tag and put in the complete url like this:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="http://bing.com"></iframe>
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
This code is just supposed to print "Hello world" using an AngularJS directive, but instead of that, the page is blank when I load it in my browser.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">
<hello-world></hello-world>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
</body>
</html>
And the app.js:
angular
.module("ngClassifieds", ["ngMaterial"])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
})
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
The paths in the script elements are correct, there are no typos as far as I'm concerned, and I'm pretty sure nothing is wrong with my port. I'd appreciate any help on what I'm doing wrong!
You are missing the references for the angular-material, because its a dependency,
DEMO
angular
.module("ngClassifieds", ["ngMaterial"])
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
</head>
<body ng-app="ngClassifieds">
<hello-world></hello-world>
</body>
</html>
You are not loading Angular-material.js file
.module("ngClassifieds", ["ngMaterial"])
-------------------------------------^
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
Refere Angular-Material Git-Hub page for more info
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>
Here's what works:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript">
function getElemWidth(){
var x = $( "#menuDiv").width();
alert(x);
}
</script>
</head>
<body onLoad="getElemWidth()" />
<div id="menuDiv" style="width:250px" />
</body>
Here's what doesn't work:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body onLoad="getElemWidth()" />
<div id="menuDiv" style="width:250px" />
</body>
Contents of "common.js":
function getElemWidth(){
var x = $( "#menuDiv").width();
alert(x);
}
It is calling the function in both cases. I can use jquery in both cases, for example:
x = $(window).width();
works just fine. For some reason I can't get the document elements from within the .js included file. Is there something I'm missing?
I even added this right below the "common.js" include:
<script type="text/javascript">
$(document).ready(function(){
alert($('#menuDiv').width());
});
</script>
That works perfectly fine. I can reference #menuDiv from within the same file that menuDiv appears, but not in an included javascript file. Is this normal?
The problem is that the DOM is probably not ready for jQuery to act on it. The safest point at which to operate on the DOM is after the document is ready. The page may be loaded but not fully rendered. Your common.js should really look like this:
function getElemWidth(){
var x = $("#menuDiv").width();
alert(x);
}
$(document).ready(function(){
getElemWidth();
});
And your HTML like this:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body>
<div id="menuDiv" style="width:250px"></div>
</body>
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</script> <-- this is wrong, remove this extra tag
Depending on update question:
you should call the function within jQuery DOM ready
$(function (){
getElemWidth();
});
and HTML should be
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body> <!-- remove onload -->
<div id="menuDiv" style="width:250px" />
</body>
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>