hello i'm a beginner in angularjs so i try to do a Custom Components project but it's doesn't work please help me.
this is my index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.27/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<markdown>
# Hello world
- list item
</markdown>
</body>
</html>
and here is the code of app.js
angular.module('myApp', [])
.directive('markdown', function () {
var converter = new showdown.converter();
return{
restrict: 'E',
link: function (scope,element,attrs){
var htmlText =converter.makeHtml(element.text());
element.html(htmlText)
}
}
})
this is what is displayed in the console
ReferenceError: showdown is not defined
Idon't know why !!!
thank's for your help :)
Related
<div ng-app="app" ng-controller="ContactController" >
</div>
Above is my html file and This is controller file.
var app = angular.module('app', []);
app.controller('ContactController', function ($scope, ContactService,$window) {
});
This is my html section to have look. Please let me know if any mistake
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/controller/contactController.js"></script>
<script type="text/javascript" src="/service/contactService.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script type="text/javascript">
//var module = angular.module('app', [ContactService]);
</script>
</head>
I am getting error as Argument 'ContactController' is not a function,got undefined. Please help to resolve the issue.
Maybe you forgot the () in the first line.
Try change order of import js file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"
</script>
<script type="text/javascript" src="/service/contact.service.js"> </script>type="text/javascript"></script>
<script type="text/javascript" src="/controller/contact.controller.js">
I am building an angular single page app using node, bower, and express. But, for some odd reason, I cannot seem to get ngRoute to work. Nothing seems to be appearing in my .ng-view div. Here's my code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Node, NPM and Bower</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
</head>
<body ng-app="app">
<h1>My App</h1>
<div class="ng-view"></div>
<script src="bower_components/angular/angular.js"></script>
<script src="./app/app.js"></script>
</body>
</html>
APP.JS
angular.module("app", ["ngRoute"]).
config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Home</h1>"
})
.when("/about", {
template : "<h1>About</h1>"
});
});
Thanks in advance for any and all help!
I am trying angularjs for the first time and I am having trouble getting it to actually work..I think.
I am doing the exercises on a website and when I run it on the website it works, but when I try to follow along and write it myself in my own files I can't get it to work.
For example: when I type this "{{store.product.name}}" it prints exactly that including the braces, but on the site it prints out "Azurite"
my code:
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="app.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
Your app name is incorrect.
<html ng-app="gemStore"> </html>
gemStore is the name for your app not test.
when you working with angular app .
You need angularJs script first and others should follow.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
let me know if you need any help.
For reference you can see this plunker:
http://plnkr.co/edit/28gANOyhz5mLb7zkhu9W?p=preview
You shuld close the double curly brace
You have
<h3>{{store.product.price}</h3>
Should be
<h3>{{store.product.price}}</h3>
Regards
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.
The demo can be viewed at:
http://plnkr.co/edit/tLiAWIQ3bCAo4z4VFYTc?p=preview
script.js
var app=angular.module('app',[])
app.controller('MyController', function($scope) {
console.log("TEST")
$scope.on("$destroy", function() {console.log("DESTROY")})
})
index.html:
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MyController">
<h1>Hello Plunker!</h1>
</body>
</html>
Does anyone have ideas about why so many errors are throwed in plunkr? Is there a way to deal with this?
There is an error in code:
$scope.on("$destroy", function() {console.log("DESTROY")})
Right:
$scope.$on("$destroy", function() {console.log("DESTROY")})