I am facing a peculiar issue while incorporating angularjs as front end for spring boot mvc project. I cant figure out the root cause of why this is happening. My angularjs template and angular controller codes are listed below.As long as I have angularjs script/controller within 'script' tags of the template file the code works fine and I get the desired result.However as soon as I create a seperate javascript file for the controller in resource/static/app folder of Spring Boot project directory and import using src(as shown below) then the angularjs stops working. Would be great if someone can help me understand why is this happening. Is there some other configuration that needs to be done for importing javascript file in Spring boot templates?
1. spring boot html template file
<!DOCTYPE html>
<html data-ng-app="myapp">
<head>
<meta charset="ISO-8859-1"></meta>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Spring MVC+Angular</title>
<!-- <script type="text/javascript" src="../static/app/controller.js"></script> -->
<script type="text/javascript" src="../static/app/controller.js"></script>
<!-- <script type="text/javascript">
var app = angular.module('myapp', []);
app.controller("mycontroller" , function($scope){
$scope.name = "myapp controller456...." ;
});
</script>-->
</head>
<body>
<div>
<div data-ng-controller="mycontroller" >
<p>Input something in the input box:</p>
<p>Name : <input type="text" data-ng-model="name" placeholder="Enter name here123456..."></input></p>
<h1>Hello {{name}}</h1>
</div>
</div>
</body>
</html>
2. angularjs controller
// please note that the same controller when included within script tag of template file works however if included as separate javascript file does not work//
var app = angular.module('myapp', []);
app.controller("mycontroller" , function($scope){
$scope.name = "myapp controller456...." ;
});
Related
I'm creating a sailsJS application and using AngularJS for the front-end.
This is my index.ejs file
<!DOCTYPE html ng-app="myApp">
<head>
<title>Title</title>
<!-- load socket.io, angularjs, filters, special fonts, jquery, bootstrap -->
<!-- Application JavaScript -->
<script src='/js/app.js'></script>
<script src='/js/controllers/indexCtrl.js'></script>
</head>
<body ng-controller="indexController">
<div ui-view></div>
</body>
</html>
and this is my app.js file
var myApp = angular.module('myApp', ['ui.router', 'angular.filter']);
console.log('this is executing');
and this is my indexCtrl.js file
angular.module('myApp').controller('indexController', ['$scope', '$http', function($scope, $http) {
console.log('check if its executing');
}]);
I'm not getting a console log from indexCtrl.js file but I am from the app.js file
This is my folder structure
- Api
- Assets
--> images
--> js
--> controllers
-->indexCtrl.js
--> dependencies
--> directives
--> services
--> app.js
--> styles
--> templates
--> views
- Config
- node_modules
- tasks
- views
-->index.ejs
Something about your opening html tag doesn't feel right. I've never seen the DOCTYPE tag and <html> tag fused together like that. Try something like this instead :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Title</title>
...
...
</html>
A few other things you can check :
In your browser's developper console, check to make sure the request for /js/app.js and /js/controllers/indexCtrl.js went through and didn't return any 404 (Network tab in Chrome and Firefox)
Make sure there are no Javascript errors in the console
Note : the fact that you were seeing the console.log from App.js only means the Javascript file was being downloaded and interpreted, but not necessarily that your Angular app was starting correctly (because the console.log is placed outside of any Angular function).
newbie here,
(this is important to me as i often don't have access to the internet.)
i have this strange problem where this code works fine on jsfiddle:
fiddle here ->https://jsfiddle.net/w4g71ea8/2/
but not when i try it on my own computer breaking it into seperate files (in same directory) and view with chrome.
Also I had to set no wrap-in on js fiddle for that to work.
test3.html :
<!doctype html>
<html>
Angular JS Tutorial
<head>
<script src= "file:///home/chronos/user/Downloads/angular/angular.js" > </script>
</head>
<body ng-app="myapp">
<script>
src= "script3.js"
</script>
<div ng-controller="HelloController" >
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
script3.js :
var app = angular.module('myapp', []);
app.controller("HelloController", function($scope) {
$scope.speak = "Joe";
});
I'm not sure where did you copy this html, but it's wrong. Try like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script3.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
And, since you said you're a newbie, it'd be a good habit to start using your code ready for future minifications:
// script3.js
var app = angular.module('myapp', []);
app.controller('HelloController', ['$scope', function($scope) {
$scope.speak = 'Joe';
}]);
On the other hand, I don't agree with some comments above; you don't have to install any webserver or something to see it's working. Just create your html and js files, drop it to the browser. Only thing you need to keep in your mind is file:// usage is not valid here. Either use full url from any CDN, or download the file and enter local path like /js/angular.js. I'm not talking about ng-view and ng-include of course, since they are making AJAX calls, you'll need some sort of webserver. But in this example, you don't need at all.
I am working on a Firefox add-on that uses AngularJS.
The issue is with 'ng-src'. It does not load the referenced image.
When I switch to 'src' the image loads fine.
Example.html and 'icon-32.png' are within same folder.
Appreciate your help in making sense of this issue.
Below are the code snippets.
Example.html
<html ng-app="MyAddon" ng-csp>
<head>
</head>
<body ng-controller="MainCtrl" dir="{{dirr}}">
<div border="0">
<img ng-src="{{logo}}" width="32" align="center">
<input id="textbox" type="text"> </input>
<button id="textboxbutton" type="button"> {{ButtonText}}</button>
</div>
<script src="lib/angular.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
app.js:
function MainController($scope) {
$scope.ButtonText= 'Hit me!';
$scope.dirr = 'rtl';
$scope.logo= 'icon-32.png';
};
var MyModule = angular.module('MyAddon', [])
.controller('MainCtrl', MainController)
It is because angular keeps adding unsafe: to your image url. I think this is the solution, please try: Angular changes urls to "unsafe:" in extension page
and whitelist the resource:// urls. without unsafe: it works.
I saw this from using DOM Inspector:
I use IntelliJ IDEA 13.1.6. I try to compile a simple angular app. I make a new project - Static web.
I just make 2 files - hello.html and controller.js.
hello.html:
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Right click on hello.html and Debug hello.html - or Open in Browser - Chrome and it shows {{greeting.text}}, World.
I installed in File - Settings - Plugins - AngularJS and NodeJS, also installed in Settings - Javascript - Libraries - AngularJS - pointing to the folder where I downloaded and unzipped the AngularJS.
What to do to see the "Hello World" in my browser?
Thanks!
It looks like you aren't creating a module with your app's name, and then you aren't registering your controller as an angular controller.
<html ng-app> Isn't doing anything without <html ng-app="myApp">.
myApp is the module that angular will look for when it is loaded. Once it finds that module it will look for anything else that it should register for that module.
Here is a working fiddle for what you're trying to do: https://jsfiddle.net/gf1fa3sx/
The jist is that you need to declare your angular app with angular.module('myApp', []); before angular knows anything about what it should be doing. Then you need to declare your controller on that module with:
angular.module('myApp')
.controller('HelloController', ['$scope',function($scope){
//doStuff
}]);
I hope this helps!
you're missing Angular Library.
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js
Good luck.
The solution is:
hello.html:
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
$scope.greeting = { text: 'Hello' };
});
Thanks for your answers! hope my book won't put me in difficulties again :)
I've set up a small AngularJS/Firebase (AngularFire) page that updates the DOM with a textbox (the classic example). The code works fine in Chrome and Firefox, but not IE10. I've tried the recommended fixes for IE7 and lower but they haven't worked.
HTML:
<!DOCTYPE html>
<html ng-app="myModule">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script src="https:/cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body ng-controller="myApp">
<div>
<input type="text" ng-model="name" /> Hi {{name}}
</div>
</body>
main.js
angular.module('myModule', ['firebase']).controller('myApp', ['$scope', 'angularFire',
function($scope, angularFire) {
var url = new Firebase('https://myaccount.firebaseio.com/example');
angularFire(url, $scope, 'name', '');
}
]);
What could be causing the problem?
Thanks.
I assume and hope you've solved this already, but anyway: you have one slash ('/') missing from the URL pointing to firebase.js which makes IE to trip over. Interestingly, other browsers seem to be able to load the script.
You are also missing the starting <head> element.