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', []);
Related
I have an angularjs 1.5.8 application created using Jhipster.
For my website I want to make a HTML and JAVASCRIPT editor. Need to allow user to write HTML Code but JAVASCRIPT also.
Using this library I know I can achieve the follow.
https://github.com/incuna/angular-bind-html-compile
1: Bind HTML Code.
2: Bind Angular code if present in HTML
Eg: <h1>{{$scope.test}}</h1>
Would render correct value in the scope.
But what about something like this in the html
<script>
console.log($scope);
</script>
I get a $scope not defined error, somehow the $scope value is not available in the script tag.
If anyone curious that why I need to do this because we want to provide users of the application to create there own Angularjs Forms.
I solved using ng-include, here is the example source.
I wanted to do two things.
1: Make ng-include work from a scope variable which will contain html and javascript.
2: In the included string if I have a script tag I wanted it to render correct in the ng-include.
To achieve the #1 I did the following.
Used $templateCache service.
Sample code.
$templateCache.put('template-form', vm.html + vm.script);
For point #2
I made sure the script tag is structured in the following way.
<script>
(function() {
'use strict';
angular.module('myApp').controllerProvider.register('AppTemplateController',AppTemplateController);
AppTemplateController.$inject = ['$scope'];
function AppTemplateController($scope){
// WRITE YOUR CODE IN THIS CONTROLLER
// YOU CAN WRITE YOUR VARIABLES/FUNCTIONS HERE.
// MAKE SURE TO CALL THE method "vm.submitForm", to submit your form and pass the form object.
};
})();
</script>
This way you can inject a controller.
My requirement was very very specific to my projecct, I am not sure if others who did not face this issue even would understand what I am talking about. But for those who do face it, I hope you it helpful
I am trying to get experience with angular by making an app (for my own use) and I ran into an issue.
I decided to try to implement lazy loading (like in the "Complex" part of the answer to this question ) and had that working with my own additions to it.
I wanted to make components more self-contained though and decided to try to make a directive to load any javascript dependencies for me.
This left me with the following template html
<div dependencies="app/components/home/controller.js" ng-controller="HomeCtrl as home">
This is the home page.<br />
{{home.test}}
</div>
When I try to load this page I see the following error
Argument 'HomeCtrl' is not a function, got undefined
If I remove the ng-controller directive then my directive works fine and controller.js is loaded.
Based on the source for ngController I thought that setting the priority for my directive higher than 500 would work but it didnt seem to help.
I also tried moving my directives contents from link to compile.pre. It didnt help either, my directives compile runs before the error but compile.pre does not.
Is there any way to make my directive load/run first, before ngController?
I found this example of dropdown-multi-select.
I try to make code work in plunker:
**http://plnkr.co/edit/lKK6lAhczWNTgDRhPBsN?p=info**
but it not working.
Any idea what I am missing?Why I don't dropdown element on index.html page?
You made a lots mistake over there, Actually the mistakes are more than what I mentioned below.
ng-app="sensorManagement" has been missed
You were added Angular2 reference instead of angular 1.x
angular.module('sensorManagement',[]) has not been created
ng-controller with controllerAs is missing on the page.
Bootstrap styling is missed to add on the page
Script reference to controller.js & directive.js were missing
Working Plunkr
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 do not truly understand why it is necessary to do an angular.bootsrap document, ['MyApp'] at the end of my CoffeeScript code that manages the module and controllers in the following test application:
This is the HTML:
<div ng-app='InventoryModule' ng-controller='InventoryController'>
<ul ng-repeat='item in items'>
<li>{{item.title}}</li>
<li>{{item.price | currency}}</li>
</ul>
</div>
And the CoffeeScript:
inventoryModule = angular.module 'InventoryModule', []
inventoryModule.factory 'Items', ->
items = {}
items.query = () -> [{title: 'Hello', price: '5'}]
items
inventoryModule.controller 'InventoryController', ($scope, Items) ->
$scope.items = Items.query()
angular.bootstrap document, ["InventoryModule"]
If you remove the last line, the applicatoin won't work. Why is that? This is not truly explained anywhere else.
This is a fiddle of the code:
http://jsfiddle.net/dralexmv/8km8x/11/
As you can see the application actually works. If you remove the bootstrap it will stop working.
Tl;dr
Set the second drop-down in jsFiddle to "No wrap - in <head>" and you won't need angular.bootstrap line.
FIDDLE
Explanation
When Angular library is loaded it will scan the DOM looking for element with ng-app directive. When it finds one it will begin the bootstrapping proces.
In that process Angular will take the value of ng-app attribute (in your case that's InventoryModule) and will try to find an angular module with the same name. If it fails it will throw: Uncaught Error: No module: <module name>.
In your fiddle you have set the "Code Wrap" select box to "onLoad".
This drop-down instructs jsFiddle when to initialize the JS code that you've put in JS frame. When it's set to "onLoad", the code will run in onLoad window event.
On the other hand, Angular bootstrapping process will run on $(document).ready(), and because $().ready event is fired before "onLoad" event, Angular will try to init the InventoryModule module before the module is even defined, and that's where the dreaded "No module" error will be thrown.
angular.bootstrap() is a manual way of doing the same thing that Angular already does in it's $().ready() handler.
Take a look at the error console. Your code throws an exception:
Uncaught Error: No module: InventoryModule
I think it has something to do with it. Manually bootstrapping by calling angular.bootstrap seems to workaround the actual problem.