I'm new to Ext Js. I have following file structure.
And I'm testing following code -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Ext Js Page</title>
<link rel="stylesheet" href="../ext-3.3.1/resources/css/ext-all.css">
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';
Ext.onReady(function (){
alert('done');
});
</script>
</head>
<body>
</body>
</html>
But it is giving me errors as
Ext.onReady is not a function,
Ext.EventManager is undefined, and multiple times
Ext.EventObject is undefined
How can I fix this.
The reason is you included the ext-base-debug.js (debug version) after ext-all.js.
Use either:
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>
or
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../ext-3.3.1/ext-all-debug.js"></script>
ext library has be loaded once only.. If you load these library twice on basic and child page again..you will get this error.
Please remove duplicate js files.
Related
I'm trying to learn the basics on angular. I installed angular via npm.
Just trying to run my first app
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-init="message = 'Hello' ">
<h1>{{message}}</h1>
<script type="text/javascript" scr="node_modules/angular/angular.js"></script>
<script type="text/javascript" scr="scripts/app.js"></script>
</body>
</html>
In my app.js it's just this line of code:
angular.module("ngClassifieds", []);
I ran the below command to start up the server as I had installed http server on my project directory
http-server
I opened up my localhost url which was localhost:8080 but for some reasons it was not showing Hello message but instead it was showing {{message}}
Not sure what I went wrong here.
<script type="text/javascript" scr="node_modules/angular/angular.js"></script>
<script type="text/javascript" scr="scripts/app.js"></script>
it is not scr chenge it to src
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
Below code will solve you problem.
angular.module("ngClassifieds", []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-init="message = 'Hello' ">
<h1>{{message}}</h1>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
I just moved my working AngularJS project into a spring-boot configuration. Spring is not the issue because I am able to locate the index.html file and display "Test test test" in the browser which is written in that file. However all my scripts are returning the following:
In my index.html file I set the base href:
<html lang="en" ng-app="SharpVision">
<head>
<base href="/PersonalSite/src/main/webapp/">
<meta charset="utf-8">
My body in index.html
<body>
Test Test test
<ng-include src="'app/views/structure/navigation.tpl.html'"></ng-include>
<ng-view autoscroll="true"></ng-view>
<ng-include src="'app/views/structure/footer.tpl.html'"></ng-include >
<!--Scripts-->
<!--<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script src="assets/libs/flexslider/jquery.flexslider.js"></script>
<script src="assets/libs/masonry/masonry.pkgd.min.js"></script>
<script src="assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular/angular-route.min.js"></script>
<script src="assets/libs/angular/angular-sanitize.min.js"></script>
<script src="assets/libs/angular/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="assets/libs/angular-flexslider/angular-flexslider.js"></script>
<script src="assets/libs/angular-backstretch/ng-backstretch.min.js"></script>
<script src="assets/libs/angular-parallax/angular-parallax.js"></script>
<script src="assets/libs/angular-fitvids/angular-fitvids.js"></script>
<script src="assets/libs/angular-masonry/angular-masonry.min.js"></script>
<script src="assets/libs/momentjs/moment-with-locales.min.js"></script>
<script src="assets/libs/humanize-duration/humanize-duration.js"></script>
<script src="assets/libs/angular-timer/angular-timer.min.js"></script>
<script src="assets/libs/ng-progress/js/ngprogress.min.js"></script>
<script src="assets/libs/angular-gmaps/angular-google-maps.min.js"></script>
<script src="assets/libs/lodash/lodash.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="app/app.module.js"></script>
<script src="app/app.directives.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.controllers.js"></script>
</body>
In my app.js file I set a constant:
app.constant('ROOT', '/PersonalSite/src/main/webapp/');
Now everything was working fine until I brought in boot. However I just set up a InternalResourceViewResolver to render the index.html which it did so spring-boot is doing its job. For some reason Angularjs cannot find its scripts even though it is given the correct paths to find them.
Directory:
I know asking this is silly but I am stuck and not getting out of it. I am new to Angular.js and have created the following program but it is not running as the program can't find the script sources..I have tried all the possible ways but haven't found the solution.
<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
</head>
<body>
<div ng-controller="EventController">
{{event.name}}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" > </script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/EventController.js"></script>
</body>
</html>
Following is the snapshot of my folder arrangement:
I think you should remove the / before js in the src.if it is not working then check if it is the right path.
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/EventController.js"> </script>
Should Be
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/controllers/EventController.js"></script>
OR
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/EventController.js"></script>
Depending on your location and path of js folder....
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 am receiving the following error when injecting angular-animate.js:
Unknown provider: $animateProvider from ngAnimate
Here is my app.js:
var MyApp = angular.module("MyApp", ["ui.bootstrap", "ngAnimate"])
Here is head of index.html:
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.6.0.min.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<title>My App</title>
</head>
<body ng-controller="AppCtrl" style="padding-bottom: 70px">
Bootstrap alone is loaded fine.
What am I doing wrong?
Here is the plnkr
I got a different error with your code. I got a missing $routeProvider error.
As the first line of your app.js try this:
var MyApp = angular.module("MyApp", ["ngRoute", "ngAnimate", "ui.bootstrap"])
instead of
var MyApp = angular.module("MyApp", ["ngAnimate", "ui.bootstrap"])
And add it your header:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.js"></script>
By the way, using the non-minified version of Angular in plnkr.co gives a more human readable error message in these cases.
You are declaring app.js before the angular-animate library. Try this:
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.6.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<title>My App</title>
</head>
<body ng-controller="AppCtrl" style="padding-bottom: 70px">