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:
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 finished an angular app and would like to deploy it to a web server. I'm actually looking for a free solution for now. I'm using
http-server to launch my app so I don't have any other setup such as grunt or yeoman. I thought I could upload the files to my apache server but it shows blank.
This is how my file directory look. index.html
<!doctype html>
<html lang="en" ng-app="musicSearch">
<head>
<meta charset="utf-8">
<title>Angular App</title>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet/less" type="text/css" href="assets/styles/style.less">
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Styles -->
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
<script src="app.js"></script>
<script src="routes.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="directives.js"></script>
I have following code, and try to run in IE11.Can not figure out what is wrong.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
var Todo = Backbone.Model.extend({});
</script>
</body>
</html>
Did you checked if the files exists? Neither underscore and backbone are accessible via the provided links.
Replace the source files with:
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
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'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.