Using angularjs routing, sometimes I get
template/home.html Failed to load resource:
the server responded with a status of 404 (Not Found)
But I declared template/home.html inline
<script type="text/ng-template" id="template/home.html">
...template stuff...
</script>
Unexpectedly I don't get 404 every times, but sometimes.
I've already read this stackoverflow, where they remember this rule https://docs.angularjs.org/api/ng/service/$templateCache
Note: the script tag containing the template does not need to be included in the head of the document, but it must be a descendent of the $rootElement (IE, element with ng-app attribute), otherwise the template will be ignored.
I've declared my angularjs app without ng-app, but through bootstrap
angular.bootstrap(document, ['myapp']);
So my $rootElement is the document. Indeed I don't get the 404 errors every times. Is there some race conditions: sometimes $routerProvider is set before $templateCache is set with my inline template.
I'm using requirejs. Could it be the cause?
Any helps?
I think you may accidentally put your ng-template script outside of the tag where you define your main angular app.
<body ng-app="myApp">
// Your Template shuld stay here
<script type="text/ng-template" id="template/home.html">
...template stuff...
</script>
</body>
Related
I'm working on a website using AngularJS. I'm trying to add turbolinks but it loads angular more than once.
I call turbolinks.js in the Head tag <script src="/scripts/turbolinks.js"></script> and angular files in the footer.
I declare my app with angular.module('myApp', [myServices]) and myApp is the name of my application <body ng-app="myApp" ng-controller="ApplicationController">.
I tried to use Turbolinks without AngularJS in my project and it's working but when I added AngularJS, this warning appears WARNING: Tried to load angular more than once..
How can I use Turbolinks and AngularJS in the same project?
There's a discussion of a workaround on this page to have turbolinks not interact with a div or it's contents. I'm guessing you could apply the same logic to your angularjs app container.
https://github.com/turbolinks/turbolinks/issues/155
In their case, they wrapped the content in a div with id="container", then some javascript to handle it.
HTML:
<div id="permanent">...stuff...</div>
And the Javascript:
$(document).on('turbolinks:click',function (){
def turbolink_permanent(id, &block)
anchor = content_tag(:div, "permanent #{id}", "data-turbolinks-permanent": true, id: id)
return anchor if request.env["HTTP_TURBOLINKS_REFERRER"]
html = capture(&block)
anchor << javascript_tag("document.getElementById('#{id}').innerHTML = #{html.inspect};")
end
}
I call turbolinks.js in the Head tag and angular files in the footer.
To prevent Angular JS from loading twice, you will need to include your Angular files in the <head> (not just turbolinks.js).
When a page is loaded via Turbolinks, it evaluates script tags in the body, so if your Angular files are included in the footer on various pages, it will load them more than once.
I'm experimenting with using angularjs in a .NET MVC environment. I have placed the usual Razor statement #Scripts.Render("~/bundles/angular") in the head of my _layout.cshtml, and yes it does produce the desired element, as I see when I do a 'View Page Source' on the resultant page. The tag I'm trying to use angularjs on is simply a run-of-the-mill tag. I don't see any errors, and everything else is working fine, but it doesn't appear that the browser is calling the controller before it renders my element.
When does the browser execute the controller code associated with the ng-controller attribute? Does it matter where I place the definition of the controller? I'm simply using the usual angular.module method inside a element to define it, like so:
angular.module('app',[]).controller("FredCtrl",
function($scope){ $scope.message = "- - -"; })
Yet $scope.message seems to be empty. Any suggestions?
Do I need to bundle something else other than just ~/Scripts/angular.js for something so simple?
Thanks for any assistance.
No, the console tab in the Firefox F12 tools doesn't show any errors. Here is the simple h2 element I'm trying to apply angularjs to
<h2 ng-constroller="FredCtrl">Getting started {{message}}</h2>
<script type="text/javascript">
angular.module('app',[]).controller("FredCtrl",
function($scope){ $scope.message = "- - - -"; })
</script>
and yes I do have the ng-app attribute set in my body tag, like so:
<body ng-app="app">
Oh, and I tried it in Chrome as well, with the same result. Everything seems to be working just fine. No errors show up in the Console tab for Chrome as well. I just don't see my $scope.message show up in the display.
When I try to use the attribute async on my script tags, I keep getting this error:
Uncaught ReferenceError: angular is not defined
Module 'app.main' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
When looking on the docs, I saw the recommendation to bootstrap it manually, so I did this:
<script async type="text/javascript" src="dist/js/angular.min.js"></script>
<script async type="text/javascript" src="dist/js/app.min.js"></script>
<script async>
angular.element(document).ready(function() {
angular.bootstrap(document, ['app.main']);
});
</script>
</body>
I know async should be used when the script is at the beggining of the page, but in both situations I had the same error.
As you can see, I tried to manually bootstrap my application at the end. I also tried using that same code inside my app.min.js file, at the end of the file, but both scenarios gave me the same results.
If I remove the attr async, everything gets back to normal and work again, but how am I supposed to solve this problem?
Just so you know
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Thanks :)
I'm new to angularjs and ui-bootstrap 13 and need some help.
I'm getting a unresolved from thew angularjs injector and can't figure out why.
The module definition looks like this:
var app = angular.module('MobileCOP', [
"ngRoute",
"ngTouch",
"mobile-angular-ui",
"ui.bootstrap"]);
The controller looks like this:
app.controller('CDRserver',['$rootScope','$scope','$location','serverList','$modal',
function($rootScope, $scope, $location, serverList, $modal ){
All I need to do to cause the error is inject $modal into the controller. I don't reference the modal in the code, just adding the modal service to the controller causes the issue. When the service is removed the error stops.
I'm assuming I'm missing something obvious.
Edit" As per request showing the controller assignment into the html:
.when('/cdrquery', {
templateUrl: '/MobileCOP/tmpl/CDRlist.html',
controller: 'CDRList'
})
Error:
[$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24modal
z/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
Zb/l.$injector<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:34:1
c#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
Zb/q.$injector<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:35:57
c#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
d#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:300
Zb/q.$injector<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:35:75
c#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
d#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:300
f/<.instantiate#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:464
Md/this.$get</<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:484
z/<.link#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:7:248
J#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:492
h#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28
ba/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:45:200
Z/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:431
q#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:50:162
v#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:6:357
Wd/this.$get</h.prototype.$broadcast#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:110:279
l/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:11:177
ve/e/l.promise.then/H#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:96:513
ve/e/l.promise.then/H#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:96:513
ve/f/<.then/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:98:173
Wd/this.$get</h.prototype.$eval#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:36
Wd/this.$get</h.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:105:323
Wd/this.$get</h.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:368
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:71:118
C#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:75:241
re/</y.onreadystatechange#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:76:280
<ng-view class="app-content ng-scope">
Loading scripts code:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.min.js"></script>
<script src="/MobileCOP/libs/mobile-angular-ui.min.js"></script>
<script src="/MobileCOP/libs/ui-bootstrap-0.13.0.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="/MobileCOP/libs/mobile-angular-ui.gestures.min.js"></script>
<script src="/MobileCOP/libs/xml2json.min.js"></script>
It appears that you are not using a template enabled version of the ui-bootstrap libraries. From the ui-bootstrap FAQ:
The dist files with the -tpls- in their name come with the templates bundled inside $templateCache . You can check how this bundling works by inspecting this file. The important point here is that templates are part of the distribution file so you don't need to download them separately. Also, those templates are pre-loaded with JS file so a browser won't request them on run-time.
bottom line, for template enabled modules like modal to work, you need to be loading the script ui-bootstrap-tpls-0.13.0.js.
The error you are getting is coming from the templateRequestProvider when it looks for a template for $modal that isn't in the template cache.
OK cleared up the issue.. ui-bootstrap-tpls-0.13.0.js is incompatible with angularjs 1.2.15. Upgraded to 1.3.14, the error is gone.
Preface: As I am new to both AngularJS and Brunch, I want to learn the basics and build and app from scratch (i.e. from the dead-simple Brunch skeleton). I am well aware that there exist skeletons that specifically deal with bootstrapping an AngularJS/Brunch app and I have been studying their code in order to find out what "makes them work". But being the newbie I am, I don't see the solution to my problem...
The Problem: As long as I add ng-app (without any value) to the html element, AngularJS works just fine. But as soon as I add a value (i.e. ng-app="MyApp") to this attribute, AngularJS stops working. The console in Chrome tells me that it encountered an "Uncaught object" in line 1695 of angular.js.
It seems that the javascript added by Brunch is causing this: If I remove the code at the very top generated by Brunch in the app.js file of the public folder, again it works. But clearly that can't be the solution to my problem.
Here is the code of my app/assets/index.html:
<html ng-app="myApp">
<head>
<title>Test</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
That's the code in my app/app.coffee (which is concatenated with Brunch and AngularJS code in the resulting public/app.js):
angular.module("myApp", [])
The question: What am I missing? I see that in the specific skeletons the index.html file contains a <script>require('MyApp')</script>, but adding it doesn't solve the problem.
Any hint for a Brunch-rookie like me is very appreciated. Thanks!
Okay, I finally figured it out. Indeed there needs to be the additional <script>require('app');</script> snippet. However, make sure the parameter for this require() call matches the file name in which your Angular application is created.
Example:
Your HTML tag uses ng-app="myAwesomeApp". The corresponding Javascript code needs to reference that with angular.module("myAwesomeApp", []).
If your Javascript file (in which the Angular module is created) is simply called app.js, then the corresponding <script>require('app');</script> should reflect that. If you also choose to name your Javascript file myAwesomeApp.js, then match it with <script>require('myAwesomeApp');</script>.