Problems defining two services in modules - angularjs

I try to define angular services of an angular module in serperate files.
While Chrome only mentions an Uncaught Object, Firefox throws this message:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=LaRa&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24injector%2Fnomod%3Fp0%3DLaRa%0AF%2F%3C%40http%3A%2F
This tells me nothing. See my jsfiddle failing here.
I looked up the "recommended Setup" article in the angularjs documentation for modules. When i copy their example to my jsfiddle i get the same error. see jsfiddle here.
Their plunkr example works thou.
Now jsfiddle includes the javascript inline, plunkr uses a file and there are certain other differences. Sure. But is that really it?
I never read anything about angularjs only working if you put your javascript in an external file.
If i copy from their tutorial, it should work instead of giving a weird error shouldn't it?
What am i doing wrong here?
EDIT:
If i change from onLoad to wrap-in-head it works. Yet i do not know why.

Works as expected when you actually attach the angularjs 1.2.1 in head
<div ng-controller="myController">
{{ greeting1.value }}!
{{ greeting2.value }}!
</div>
http://jsfiddle.net/Sa95B/4/

Related

Basic create-react-app setup throwing error for react-stripe-elements

I've tried this locally as well and gotten the same error, but as you can see in from this basic code snippet in code sand box instance I'm getting this error:
Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements. If Stripe.js isn't available yet (it's loading asynchronously, or you're using server-side rendering), see https://github.com/stripe/react-stripe-elements#advanced-integrations
This is happening even though I'm simply including the StripeProvider with a key at root. I see that this is clearly not a problem in the jsfiddle example from the docs, which doesn't use create-react-app. Has anyone else run into this issue and found a solution?
You should just need to add a script tag to your index.html:
<script src="https://js.stripe.com/v3/"/>

Ag-Grid Basic AngularJS 1.x Example Not Working

The code from official website is not working, getting blank at Plunker, only two places modified:
script.js, var module = angular.module to var m = angular.module
as Plnkr complains about "Redefinition of module".
index.html, explicitly declare height for gridOptions.
You have <script src="scripts.js"></script> when your file is named script.js
Make sure the file reference is the same as in this plnkr
As a side note, it is best to debug your applications by tackling the errors in the order that they appear, sometimes fixing the 404 not found will fix anything that angular wants to complain about...

Uncaught Error: [$injector:modulerr] - AngularJS module issue

I apologize if this issue has been resolved somewhere, but every other question I looked at with a similar name was unable to resolve my problem. I have a plunker with a barebones layout of a web app I am working on, but for some reason am receiving an Uncaught Error: [$injector:modulerr] when I try to run it.
I have attached the Plunk below, hopefully someone can point out what the issue is, because I cannot find it. I am using ui-router and ui-bootstrap with twitter-bootstrap styling.
Plunk: http://plnkr.co/edit/EbGJAqxdjHRCMjjC6waA?p=info
(Never shared a plunk before, so hopefully I did it correctly.)
You didnt include your app file in the script srcs
forked plnkr
<script src="app.js"></script>
You are never including your app.js file, so your Angular module is never actually defined.
I tried adding this line to your plunk and it worked fine.
<script src="app.js"></script>

Angular ui-bootstrap accordion not working

An example copied directly from
http://angular-ui.github.io/bootstrap/
Does not work at all, neither locally nor in plunker. Don't know why. Bootstrap CSS is loaded, so is ui-bootstrap-tpls.min.js and angular.min.js (angular itself is working just fine though).
Here's the plunker:
http://plnkr.co/edit/15GWWFSUwab4VmaxfFPf
I am getting no js errors in a browser, yet it's not working.
Please help. I need to get this working on my website (i.e. the accordion doesn't work even when I write my own html/js code).
A plunker created from the demo site works flawlessly, just created a plunker from the demo site: http://plnkr.co/edit/z9RQKgNBTRbigyQs7OGW?p=preview
In your plunker you are not declaring dependency on the ui.bootstrap module as described on the very top of the demo page:
As soon as you've got all the files downloaded and included in your
page you just need to declare a dependency on the ui.bootstrap module:
angular.module('myModule', ['ui.bootstrap']);
After adding a dependency on the mentioned module your plunker works as well:
http://plnkr.co/edit/00bK0rNDYIrH9a9TVRk3?p=preview
One more thing - you need at least AngularJS 1.0.5 - there were bugs in earlier versions of AngularJS that prevented this directive from working correctly.

angular.js and phantom.js error

I am getting an error when i try running phantomjs via this stack: rails (3.2.11), rspec (2.12.2), capybara (1.1.4), poltergeist (1.0.2), phantomjs (1.8.1)
and angular.js (1.1.2).
I have many specs that run fine on this stack, without angular. But on a test page where I initiate angular, I get the follow error. When I run the specs using selenium driver, they pass.
{"name"=>"visit", "args"=>["http://127.0.0.1:57124/pages/angular"]}
{"response"=>{"status"=>"success"}}
{"name"=>"find", "args"=>["./descendant-or-self::*[contains(normalize-space(.), 'Hello')]"]}
{"error"=>{"name"=>"Poltergeist.JavascriptError", "args"=>[[{"message"=>"TypeError: 'undefined' is not an object (evaluating '$lastDestination.offset().top')", "stack"=>"TypeError: 'undefined' is not an object (evaluating '$lastDestination.offset().top')
at http://127.0.0.1:57124/assets/application.js:13100
at http://127.0.0.1:57124/assets/application.js:3046
at http://127.0.0.1:57124/assets/application.js:2722"}]]}}
This occurs even on the most bare bones content, only without any other ng directives (no controller instantiated etc), eg
<div ng-app>
<h1>Hello</h1>
</div>
The spec looks like
describe 'ng_posts', type: :request, js: true do
it "should load page" do
visit '/pages/angular'
page.should have_content('Hello')
end
end
This appears to be a phantom.js bug because the page loads in the browser (no errors in js console) and the specs run with Selenium. Is this a known issue? Can i get past it? Thanks.
Jon
nevermind.
Turns out it was a bug in another library, zurb-foundation (alternative to twitter bootstrap) which was fixed a week ago but the gem update didnt have it yet. Updating Gemfile as follows fixed it.
gem 'zurb-foundation', github: 'zurb/foundation'

Resources