I have written the following code in the HTML file.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Project Tracking Home Page</title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/Site.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>Welcome To Project Tracker</h1>
<p>Addition of Two Numbers (100+100) is - {{100+100}}</p>
</body>
</html>
The binding expressions do not return the value instead they are shown as it is.
When i run this code, i find the error ''Node' is undefined.'
I have used NuGet packages to install the Angular Js and JQuery into the scripts folder.
Make sure that your browser's document mode is greater than IE 8
If it's IE, try this:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Related
I have a nx workspace where I have several react apps. One of them is payment and I want to serve it under mybaseurl.com/payment . The static assets (css, js) are failing to load because they are still pointed at root in the index.html. I cannot seem to change the PUBLIC_URL to "/payment" so that all the static files are served from mybaseurl.com/payment instead of mybaseurl.com.
I have tried putting PUBLIC_URL="mybaseurl.com/payment" in the .env file as well as, PUBLIC_URL="mybaseurl.com/payment" nx build payment --prod but nothing seems to have any result.
How can I change PUBLIC_URL here during build time?
For ref, use of PUBLIC_URL: https://create-react-app.dev/docs/adding-custom-environment-variables/
Example code:
Currently the build is generating the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
But I want the build to generate the follwing in the index.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/payment/styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="/payment/main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="/payment/runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="/payment/polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="/payment/main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
The easiest way to achieve this is to change the base tag by editing apps/payment/src/index.html:
<base href="/payment/">
The browser will then prepend the path to those assets.
i set the "baseHref" property in the production config in the project.json and then it appeared in the generated index.html
This is the code.
(I know that I must type here so many text to post my question, but please ignore this part in the parenthesis. It is due only to the rules of the site.)
I can not find the reason, but on screen only appears "{{adat}}".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://code.angularjs.org/1.8.2/angular.js">
</script>
<script type="text/javascript">
function todoc($scope) {
$scope.adat = "Szia!";
}
</script>
</head>
<body ng-app>
<div ng-controller="todoc">
<h1> {{adat}} </h1>
</div>
</body>
</html>
It turned out that this version of Angular works with a newer syntax.
For this syntax the appropriate version is 1.0.0
I am supposed to use a map showing all specified locations marked in it. It needs be a general map showing all locations and routes along with the markers. However,
when i used dxMap in my web development project nothing showed up. The screen just remained blank.
below is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="Map.js"></script>
</head>
<body>
<div id="mapContainer" style="height:450px;max-width:750px;margin:0px auto"></div>
</body>
</html>
Separate .js file code is as follows:
$(function () {
$('#mapContainer').dxMap({});
});
I have used this approach following the link :
http://js.devexpress.com/Documentation/Tutorial/Data_Visualization/Configure_VectorMap/?version=15_1#Create_a_Vector_Map
The link shows how to configure a DxVectorMap. But this approach doesn't seem to work for dxMap. Please can anyone guide what approach should i use for dxMap?
The above code created a dxmap once the head tag was changed with correct CDNs (which included support for desktop web applications as well)
<head>
<title>Add a Widget - jQuery Approach</title>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
**<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.1.7/js/dx.webappjs.js"></script>**
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
I got a problem when I try to use Angular Material design.
It wont style anything.
This is my HTML:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<link rel="stylesheet" href="./libs/css/angular-material.css"/>
<script src="./libs/js/angular.js"></script>
<script src="./libs/js/angular-aria.js"></script>
<script src="./libs/js/angular-animate.js"></script>
<script src="./libs/js/hammer.js"></script>
<script src="./libs/js/angular-route.js"></script>
<script src="./libs/js/angular-resource.js"></script>
<script src="./libs/js/angular-material.js"></script>
</head>
<body>
<md-button>asd</md-button>
</body>
</html>
Is there anything I'm missing?
angular-material.js is the file from bower install
angular-material.css is also
<html ng-app="app">
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<link rel="stylesheet" href="./libs/css/angular-material.css"/>
<link rel="stylesheet" href="./libs/themes/purple-theme.css">
<link rel="stylesheet" href="./libs/themes/blue-grey-theme.css">
<script src="./libs/js/angular.js"></script>
<script src="./libs/js/angular-aria.js"></script>
<script src="./libs/js/angular-animate.js"></script>
<script src="./libs/js/hammer.js"></script>
<script src="./libs/js/angular-route.js"></script>
<script src="./libs/js/angular-resource.js"></script>
<script src="./libs/js/angular-material.js"></script>
<script>
var app = angular.module('app',
[
"ngAnimate",
"ngSanitize",
"ngMaterial"
]);
</script>
</head>
<body>
<md-button>asd</md-button>
</body>
</html>
If this didn't work, you might have wrong paths or maybe a newer Version. To check it, look in your angular-material folder. Do you have a "theme" folder? The new version does not have one. Remove the newer version and take an earlier version.
If you can handle a bit with shell you can try these :
bower install
bower uninstall angular-material
bower install angular-material
good luck!
I have a AngularJS page that I am attempting to display in IE 8.
Below is my HTML
<html id="ng-app" ng-app="">
<head>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js'></script>
<script src="http://docs.angularjs.org/angular.min.js"></script>
</head>
<BODY ng-app="">
<script type="text/javascript">
function cstScope($scope) {
$scope.LEVEL = "x1 ";
$scope.change = function() {
alert("changed");
};
}
</script>
<div ng-controller="cstScope">
<input type=text ng-model="LEVEL" ng-change="change()"></input>
</div>
</BODY>
</html>
It falls over when the page is loading with
Line: 30
Error: [$sce:iequirks] http://errors.angularjs.org/1.2.14-build.2316+sha.24fe163/$sce/iequirks
I have tried adding JSON3 and ieshiv but no luck.
Add this meta tag in inside of Header tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Look like
<head>
<meta charset="utf-8">
<title>Sample App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
I hopes, it's helps to you. Cheer's...
Just a shot here, but make sure you do not have compatibility mode turned on. I wasted some time on a similar error, and had accidentally clicked the compatibility button when I meant to click on the refresh button.
for Angularjs working correctly in Internet Explorer you also need jQuery version which is under 2.0. Here is the solution which works for me.
<head>
<!--[if lt IE 9]>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="../../js/jquery.1.9.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="../../js/jquery.2.0.min.js"></script>
<!--<![endif]-->
<title>App Title</title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript" src="../../js/jquery.plugin.min.js"></script>