this is link of my code
http://plnkr.co/edit/8muxhJmvFiIqRJgzuT0O?p=preview
I am getting error
Uncaught Error: Unknown provider: $controllerProvider from productsApp
and I can't view json file in console
index.html
<!DOCTYPE html>
<html data-ng-app="productsApp" >
<head>
<meta charset="utf-8">
<script data-require="angularjs#1.3.6" data-semver="1.3.6" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<script type="text/javascript" src="http://demos.amitavroy.com/learningci/assets/js/xml2json.js" charset="UTF-8"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<script type='text/javascript' src="script.js"></script>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
</head>
<body >
<div ng-controller="products">
<div ng-repeat="product in products">
<div ng-repeat="platform in product ">
{{platform._type}}
</div>
</div>
</div>
</body>
</html>
product_js.js - js file for x2js
var productApp = angular.module("productsApp",[]);
productApp.factory('productFactory',function($http){
var factory = [];
factory.getProducts = function(){
return $http.get("operations_mapping.xml");
}
return factory;
});
productApp.controller('products',function($scope,productFactory){
$scope.products = [];
loadProducts();
function loadProducts(){
productFactory.getProducts().success(function(data){
mappingss = x2js.xml_str2json(data);
console.log(mappingss.mappings.platform);
$scope.products =mappingss.mappings.platform;
});
}
});
Looks like you have included multiple version of angular.js script on your page, retain the latest one(mentioned below) and remove the rest of the references.
<script data-require="angularjs#1.3.14" data-semver="1.3.14" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
Here is the Updated Plunker
product_js.js is not included in your html. Add <script type='text/javascript' src="product_js.js"></script>
Related
I am setting up the app.js file in my angular application but i am getting n error in the console. I have all the files following the each other as recommended and icluded. How do i solve this error "
Error: "[$compile:tpload] http://errors.angularjs.org/1.6.9/$compile/tpload?p0=main.html&p1=404&p2=Not%20Found"?
Below is the code i am using.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="content/css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body class="main_bg" ng-app="Travelapp">
<div class="container">
</div>
<div ng-view></div>
</div>
</body>
</html>
var app = angular.module('Travelapp', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl: "main.html",
controller: "mainController"
})
.otherwise({
template: "<h1>Request error</h1><br/><p>Error in your request, Could not be handled</p>"
});
});
app.controller("mainController", function($scope){
});
The error says that your main.html "Not Found".
The cause of it can be that this file does not exist
Hi I am new in reactjs when i am running server.js file from terminal it show blank page on browser. The code of index.html file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/babel-
core/5.8.23/browser.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-
dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
Thanks in advance.
This is a working example.
In your code, the wrong part is the CDN link to babel-core. You may always check your console when working with JS (on Google Chrome: Ctrl + shift + J on Windows, Cmd + Opt + J on IOS).
On the other hand, I thought this was a good opportunity to also introduce components (see ).
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="hello"></div>
<script src="https://unpkg.com/react#15.0.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.0.0/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello World</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('hello')
);
</script>
</body>
</html>
I have a html page with that is to call JSON data from a js file.
The html is below:
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
{{albums.title}}
</li>
</ul>
</div>
</body>
</html>
The "app.js" file that it calls is below:
**
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
alert("test");
return [{"artist": "Kid 606","title:":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
**
There are nor errors in the console when I run it, just nothing appears.
The alert box "test" appears when I load the page so the function is getting called, it just doesn't display the JSON. Thank you for any replies.
change this:
{{albums.title}}
to
{{album.title}}
It is OK now, thank you very much.
HTML is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
Artist is "{{album.artist}} " and title is {{album.title}}
</li>
</ul>
</div>
</body>
</html>
JS is
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
return [{"artist": "Kid 606","title":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
Hi i would like to get the Price of a Steam Item unfortunately it doesn't work with the url.
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$.getJSON('http://steamcommunity.com/market/priceoverview/?country=DE¤cy=3&appid=730&market_hash_name=P90%20%7C%20Asiimov%20%28Factory%20New%29', function(fbResults) {
document.write(fbResults.lowest_price);
});
});
</script>
</head>
<body>
</body>
i am using SAP UI5 and don't know why is it showing object expected in line 347 while running index.html file in ie.
<html>
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<script src="resources/sap-ui-core.js"
type="text/javascript"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.ux3"
data-sap-ui-theme="sap_goldreflection" >
</script>
<script type="text/javascript" src="OPM_CM.js"></script>
<script>
sap.ui.localResources("opm");
var view = sap.ui.view({id:"OPM_CM1", viewName:"opm.OPM_CM", type:sap.ui.core.mvc.ViewType.JS});
//view.placeAt("content");
buildShell();
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
thanks in advance.
This may be happening because the sap object is not available.
<script>
function init(){
sap.ui.localResources("opm");
var view = sap.ui.view({id:"OPM_CM1", viewName:"opm.OPM_CM", type:sap.ui.core.mvc.ViewType.JS});
//view.placeAt("content");
buildShell();
}
window.addEventListener('load',init);
</script>
adding your code to a function and calling it on body onload may do the trick.
Note: please also give more details about the error you are getting.