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>.
Related
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>
In the tutorial:
http://www.w3schools.com/angular/angular_modules.asp
"A module is created by using the AngularJS function angular.module."
However, the module is already existent in the div tag defined before
<div ng-app="myApp">...</div>
Then what is the significance of the quoted statement above?
Danke / Dhonnobad (I hope it doesn't get deleted :) )
angular.module in fact creates module - your app configuration, so when angular process html and found ng-app directive - it will instantiate your app using that configuration.
In terms of i.e. Java you can say angular.module creates Class,
when <div ng-app="myApp"> creates instance.
The module is a container for the application controllers and directives, in general.
Incase you mention in index.html as,
<div ng-app="myapp"> ..</div>
And you maintain a separate javascript file for controller codes and directive codes, to avoid messing up in html file in between script tags, consider in index.js, You give it as
var app=angular.module("myapp",[])
And then you can add controllers like ,
app.controller("mycontroller",function($scope){
//javascript code
});
This is how controller functions act upon module specified. Hope this suffice.
I'm in the middle of the transition from version 1.2.* to 1.3.* , and I came across a very strange and critical bug.
In my application I have a very simple directive contain a template with ng-class (with condition to scope property) for some reason it's not working with 1.3.* version, and it's work fine with 1.2.* version.
Have a look on this Plunker to illustrates the problem.
This Plunker code is with angular 1.2.* version, and as you can see it's work fine.
Try to change the angular version (index.html)
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-animate.js"></script>
<!--<script src="https://code.angularjs.org/1.2.28/angular.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-animate.js"></script>-->
Refresh the page, and then you can see the bug:
Angular doesn't refresh the ng-class according to the 'active' property changing.
I tried to understand what can causes to this bug, and after a lot of tries I found that 'ngAnimate' module causes to this problem. try to delete the 'ngAnimate' dependency (script.js):
//var app = angular.module('app', ['ngAnimate']);
var app = angular.module('app', []);
And then you can see that everything is fine, so 'ngAnimate' version 1.3.* causes to this problem.
So it's AngularJS bug, am I right?
If not, what I'm doing wrong?
Do you have any specific reason to use the replace option in the directive? If not, you can just remove it and it works fine. Link to working plunker with Angular 1.3.9:
http://plnkr.co/edit/jLIS9uJ1PHC64q6nEmtB?p=preview
V1.3.9 docs tell that replace is deprecated and very rarely needed for directives to work, and apparently in your case it also managed to cause some trouble.
As per the doc replace will be deprecated in version 2. As you are using Angular 1.3.9, that should be fine.
To fix this issue either you can remove replace from directive or still if you want to use replace then wrap directive template content which has ng-transclude in a div like below
<div><div ng-click='click()' ng-class='{\"{{defaultColorClass}}\" : !active, \"{{activeColorClass}}\": active, \"mousePointer\" : !active}' class='k-content-button-inner-style {{effectClass}} {{externalClass}}' ng-transclude></div></div>
For more info refer - https://docs.angularjs.org/api/ng/directive/ngTransclude , Explain replace=true in Angular Directives (Deprecated).
#bensiu: Removing the unused* variable {{effectClass}} in the template will make it work for 1.4.4 in the plunker example linked to the question.
Modified plunk here
*Edit: Probably I should say "using a variable not in scope" rather than "unused variable".
I am trying to experiment with examples and tutorials at http://docs.angularjs.org/guide/expression and the examples are not working in plunker and jsfiddle. I am getting this error in the console
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=App&p1=Error%3A%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A27%3A198)
Is this a known error?
JSFiddle in particular has always been difficult to get working with AngularJS. The HTML section isn't meant to take an entire HTML document. Instead, you need to configure the workspace to work with Angular following these steps:
Under external resources, add the Angular script (remember to click the + icon)
Under Fiddle Options change the body tag to include ng-app like so: <body ng-app>
That should get you started. If you don't mind using an older version of Angular (1.1.1), you can select it from the "Frameworks & Extensions" drop down and change the 2nd drop down from onLoad to No wrap - in <body>.
See here for a working example from the docs: http://jsfiddle.net/jPtb3/
And here for the optional approach using 1.1.1: http://jsfiddle.net/5nA2H/
Update
There's some misinformation in the comments.. The docs ARE actually creating angular.module for you, but they're passing in an empty dependency. So you can either remove ="App" (not best), or you fix the angular.module declaration by removing the empty dependency (best) like so:
angular.module('App', []);
I was starting to work on a simple project and started out with simple one way binding to make sure, the controller is bound so that view can see the variables.
Initially I started out with separate javascript file containing the controller and it was not working so I moved it to the inline script thinking some how angular was not loading the controller script. Either way, it was is not working.
Here is the plunker
Thanks
You had the ng-app directive placed on the <head> element which means that it was also this element (plus its children) being managed by AngularJS.
Move the ng-app to the <html> or <body> element and your application will work:
http://plnkr.co/edit/O1W8HVfeyXS6zl61Qb8I?p=preview