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
Related
This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.
I'm attempting to learn angular and I am struggling with a simple button click.
I followed an example which has an identical code to the one below.
The result I am looking for is for the button click to cause an alert. However, there is no response to the button click. Does anybody have any ideas?
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div >
<button my-directive>Click Me!</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
<h1>{{2+3}}</h1>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
You need to move your angular app code below the inclusion of the angular libraries. At the time your angular code runs, angular does not exist yet. This is an error (see your dev tools console).
In this line:
var app = angular.module(`
you are attempting to access a variable called angular. Consider what causes that variable to exist. That is found in the angular.js script which must then be included first.
<h1>{{2+3}}</h1>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
For completeness, it is true that your directive is similar to the already existing directive ng-click, but I believe the point of this exercise is just to practice writing simple directives, so that makes sense.
Use the ng-click directive:
<button my-directive ng-click="alertFn()">Click Me!</button>
// In <script>:
app.directive('myDirective' function() {
return function(scope, element, attrs) {
scope.alertFn = function() { alert('click'); };
};
};
Note that you don't need my-directive in this example, you just need something to bind alertFn on the current scope.
Update:
You also want the angular libraries loaded before your <script> block.
Just to complement m59's correct answer, here is a working jsfiddle:
<body ng-app='myApp'>
<div>
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
As you know angular.module( declared under angular.js file.So before accessing angular.module, you must have make it available by using <script src="lib/angular/angular.js"></script>(In your case) after then you can call angular.module. It will work.
like
<html lang="en">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
</head>
<body ng-app="myApp">
<div >
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
</html>
i forgot to add below line to my HTML code after i add problem has resolved.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
I'm attempting to learn angular and I am struggling with a simple button click.
I followed an example which has an identical code to the one below.
The result I am looking for is for the button click to cause an alert. However, there is no response to the button click. Does anybody have any ideas?
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div >
<button my-directive>Click Me!</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
<h1>{{2+3}}</h1>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
You need to move your angular app code below the inclusion of the angular libraries. At the time your angular code runs, angular does not exist yet. This is an error (see your dev tools console).
In this line:
var app = angular.module(`
you are attempting to access a variable called angular. Consider what causes that variable to exist. That is found in the angular.js script which must then be included first.
<h1>{{2+3}}</h1>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
For completeness, it is true that your directive is similar to the already existing directive ng-click, but I believe the point of this exercise is just to practice writing simple directives, so that makes sense.
Use the ng-click directive:
<button my-directive ng-click="alertFn()">Click Me!</button>
// In <script>:
app.directive('myDirective' function() {
return function(scope, element, attrs) {
scope.alertFn = function() { alert('click'); };
};
};
Note that you don't need my-directive in this example, you just need something to bind alertFn on the current scope.
Update:
You also want the angular libraries loaded before your <script> block.
Just to complement m59's correct answer, here is a working jsfiddle:
<body ng-app='myApp'>
<div>
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
As you know angular.module( declared under angular.js file.So before accessing angular.module, you must have make it available by using <script src="lib/angular/angular.js"></script>(In your case) after then you can call angular.module. It will work.
like
<html lang="en">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
</head>
<body ng-app="myApp">
<div >
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
</html>
i forgot to add below line to my HTML code after i add problem has resolved.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
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>