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....
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:
My html codeļ¼
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="mail.js" ></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
My JavaScript code:
var myapp=angular.module('mail', ['ngRoute']);
But I get
Uncaught Error: [$injector:modulerr]
Why?
Please load jquery library first then load angularjs library, then ngRouter library see following line
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="mail.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Load JS files in order jQuery>Bootstrap>angular>route>mail. Also verify the version number of angular, ng-route you are using in your application. If not sure, use cdn.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular-route.min.js
I am using jquery mobile with phonegap and angular JS. When include jquery Mobile, then nothing shown in android mobile and when remove jquery mobile evry thing work but cannot pick jquery-mobile.css. i think there is jquery confliction.
all files are includes as
<script type="text/javascript" src="vendors/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="js/angular-carousel.js"></script>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/lodash.underscore.min.js"></script>
<script type="text/javascript" src="js/angular-google-maps.min.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/ui-map.js"></script>
<script type="text/javascript" src="js/angular-local-storage.js"></script>
<script type="text/javascript" src="js/angular-sanitize.js"></script>
<!-- NVD3 re-usable charting library (based on D3) -->
<script type="text/javascript" src="js/nvd3/d3.min.js"></script>
<script type="text/javascript" src="js/nvd3/nv.d3.min.js"></script>
<script type="text/javascript" src="js/nvd3/angular-nvd3.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<!--- Imager Assets -->
<script type="text/javascript" src="js/custom/jquery.mobile.js"></script>
<script type="text/javascript" src="js/custom/jquery.vintage.js"></script>
<script type="text/javascript" src="js/custom/jquery.cropper.js"></script>
<script type="text/javascript" src="js/custom/spoon.js"></script>
<!--- Images Assets -->
<script type="text/javascript" src="cordova.js"></script>
Whats wrong with this.
any help will be appreciated.
use the phonegap developer app http://app.phonegap.com/, and connect the application using that app, the app have console, so that you can see exactly what wrong.
but as per my experience with PhoneGap+AngularJs+JQueryMobile, we have to choose either AngularJS or JqueryMobile both are not working together as expected. other wise choose appropriate modules of JqueryMobile and use them.
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.