I can't for my live figure out why Angular is not working along.
I defined a simple app and controller:
angular.module('weatherApp', [])
.controller("weatherController", function() {
console.log('weather controller created!');
});
In my HTML I have:
<div ng-app="weatherApp" ng-controller="weatherController"></div>
Nothing else. I'm using AngularJS 1.2.28 (constrained by the project I'm working with). Upon loading of the page, my console logs the expected text above. However, immediately following it is the following error:
Error: [ng:areq] http://errors.angularjs.org/1.2.28/ng/areq?p0=weatherController&p1=not%20a%20function%2C%20got%20undefined
Why is it doing this when it's (apparantly) working just fine?
When I'm not using a module or controller and simply define a global weatherController function, everything again works just fine.
I've looked around, but can't find anything about this being specific to 1.2.28 or something.
I figured it out! Apparently the ClientDependency was loading another app.js which does a lot more with AngularJS than my simple controller. The two simply couldn't co-exist!
Since I didn't need the other app in this particular page, I excluded it from the ClientDependency and voilá, fixed!
Related
I'm trying to read a directory to check how many files exists
When I open the app I get this error
ionic.bundle.js:26799 TypeError: Cannot read property
'externalDataDirectory' of undefined
But when I go to another view, and came back, this works fine.
I try to call the same function on
$ionicPlatform.ready and works, but this way is executable only once, I need to call every time I enter on this page.
Anyone had this error before?
I'm using ionic v1 and $cordovaFile extension
Thank you
Wrap your code with $ionicPlatform.ready:
$scope.$on('$ionicView.enter', function() {
$ionicPlatform.ready(function() {
// cordova file code
});
});
I want to create project with using Spring boot + rest + angularJS, I did whole back end with rest, I'm using angular first time and I watched a lot of tutorials for creating UI, so, I did all as in many tutorials but anyway it doesnt work and I cannot understand why because event doesnt exist an error I'm sitting 2 days for solving problem and I'm crushed. I don't know what to do. Please, someone help me to set up routeProvider correct, I downloaded whole angular libs and put in project. So, take a look please.
My app.js
var myApp = angular.module('myApp',['ngRoute']).
config(function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when("/books/", {templateUrl:"/templates/book/list.html"})
}
);
My book.html, I did img because I want you see that tag isn't readable:
book.html
and list.html:
list.html
And when I go to localhost:8080/books/ it gives me Json value from RestController and no any error like 404 or anything.
Try to put a controller for each view. Add this:
$routeProvider.when(
"/books/",
controller: 'YourBooksController',
{templateUrl:"/templates/book/list.html"}
)
However i strongly suggest you to use ui router.
The Spring Boot + AngularJS documentation is pretty good: Spring and Angular JS: A Secure Single Page Application. This tutorial includes a simple router that you can use as an example for resolving your issues.
For full featured application example code try JHipster.
I'm looking to integrate an AngularJS web application into a number of websites. I'd like to be able to provide each website administrator with an HTML code, such as the following:
<div id='angular-integration-app'></div><script src="widget.js"></script>
With this HTML code inserted into the website, the website should load AngularJS and insert an AngularJS application as a child element of the element labeled with the ID of "angular-integration-app."
This Plunker has an implementation, however this implementation isn't working. It fails intermittently, with an error of:
Uncaught ReferenceError: angular is not defined application.js:1
Uncaught Error: [$injector:modulerr] angular.js:38
I've noticed that it usually works fine the first time it's loaded, but when the browser refresh button is pressed, it often fails. This is particularly true when it's not being hosted through Plunker.
Please advise on the best way to create a dynamic AngularJS application integration that works all the time.
This inconsistent behavior is because sometimes the page is cached and the code is executed synchonously, sometimes it does not.
To fix that, you need to wait for angular to be ready, then declare your module, and then bootstrap the document with your module. You cannot use ng-app in the HTML if the bootstrapping is executed "afterwards" (asynchronously, out of angular context). I have made the changes to show you how it should be:
var element = document.querySelector('#angular-integration-app');
angular.element(element).ready(function() {
var app = angular.module('myapp', []);
app.directive('customForm', function() {
return {
restrict: 'A',
template: 'hello world'
};
});
angular.bootstrap(element, ['myapp']);
});
http://plnkr.co/edit/7KbD1Okwx0MwhDIJXIGE?p=preview
Alternatively, if you don't want angular to mess up with your target html (and what happens if he is using another version of angularjs himself?), you could create an iFrame to isolate your angular, style, and code.
The code in this Plunker looks like it solves the problem. I'm now adding AngularJS as a child of the head element (the variable named "script"), and holding off on modifying the DIV or loading the AngularJS application until "script.onload." I incorporated some of the ideas from floribon's post into this Plunker as well.
script.onload = function() {
// code here
};
Just started using Chaps links library - timeline, works fine if I copy any of the examples of Github and paste them in my index.jsp page, I have made sure that I reference the location of timeline.js and timeline.css correctly.
However, when I paste the code in a jsp page that gets launched as a result of a get request going through my controller, I get no timeline showing. The page error says "links is undefined". I am hardcoding the data an exact copy of the example demo so I am not feeding any data. Any idea how to resolve it?
EDIT - ok the problem is with the way I am trying to load Javascript library in Spring MVC. It has nothing to do with the timeline component.
issue resolved. Added in my dispatcher servlet followed by mvc:resource tag inputting mapping and location. mvc annotation was missing
I have the following HTML to route to a different view:
Contact
The route works perfectly fine on Firefox, but gives the following error on Chrome/Safari:
GET http://localhost:55951/Contacts/Create 404 (Not Found)
It looks like WebKit is trying to actually go to the address, whereas in Moz there is no navigation, and AngularJs is handling the routing.
Any ideas what would be causing this?
For any novice AngularJs developer who stubles upon this problem like I did:
After lots of head banging, I read the console log carefully, which had a reference to jQueryMobile.js. Turns out jQueryMobile does not play nice with Angular.Js.
You can do a workaround with http://jacobmumm.com/2011/08/30/angularjs-with-jquery-mobile/. I just ended up removing jQueryMobile.