I'm new at Angular JS and I'm having some problems with it. I'm trying to use this module: http://ngmodules.org/modules/angular.treeview but it's not recognizing the Angular code. You can see my plunker here: http://plnkr.co/edit/xigaA37RieS70CwcK834?p=preview
I wish to know where is the error and I also have a question: if I want to use other modules/plugins and stuff like these, how should I code it? I mean, I would have another .js like:
(function(){
angular.module('myApp').controller('CONTROLLER_NAME', function($scope){
...
}
}
and I should retrieve it on app.js by doing:
var myApp = angular.module('myApp', ['angularTreeview','CONTROLLER_NAME']);
Tell me if I missed something..
Thanks in advance,
Lucas.
Related
I am trying adding angular code inside of .jsp file but getting some error like :
"Multiple annotations found at this line:
- Start tag of element
- Undefined attribute name
(ng-app)."
So can anyone help how to proceed with it !
You can add the following code to your JSP/Html file to user angular code:
<script>
var myApp = angular.module('myApp', []);
myApp.controller('anyController', function ($scope, $http)
{
// Write your angular code here
});
</script>
Probably those errors are just from the html validator and can be ignored. I never used it but you could try a plugin like this https://github.com/angelozerr/angularjs-eclipse
I am trying to show the content using pagination so I have used "angularUtils.directives.dirPagination" directive in module as angularJS doesn't support pagination inherently. Along with that I want to use angular strap so I can improve UX. To do so I have to put "mgcrea.ngStrap" directive. But when I use these both directives I don't get anything working out.
This is what I am doing.
var xyz = angular.module('test',
['angularUtils.directives.dirPagination','mgcrea.ngStrap']);
xyz.controller('LoadConnectors', function ($scope) {
....
});
Can any one help me out? I am really stuck. Thanks in advance.
There is one solution for this problem
First make sure your js refrences are correct
Then make sure you include refrences for 'angularUtils.directives.dirPagination','mgcrea.ngStrap' before js file which contains refrence for angular.module
I am working on an AngularJS app. I need to create a module that I can include in other projects. This module has services and directives that are spread across multiple files.
Here is my plunker
From the plunker, you can see that I'm trying to load the module like this:
var app = angular.module('app', ['my.module']);
However, I get an error that says:
Module 'my.module' is not available! You either misspelled the module name or forgot
However, I believe I am referencing it properly. Which makes me think that I'm not bundling the pieces of the module correctly. My directive an service were working fine until I tried putting them into a module. Now, its not working and I'm not sure how to get it working. I would appreciate any help I can get.
I think you had a few things confused here. You were creating the module multiple times, and you were mixing the variable name ("app") with the module name ("my.module"). Also, the plunker code doesn't match the code that you posted.
Anyway, I think this should clean it up (plunker):
var app = angular.module('my.module', []);
app.controller('AppController', ['$scope', function($scope) {
$scope.test = '';
}]);
app.service('myService', ['$timeout', '$q', function($timeout, $q) {
//[etc.
]});
app.directive('myDirective', [function() {
//etc.
}]);
Edit
Ok, I misunderstood your code.
It looks like plunkr loads scripts from bottom to top (?), so I declared the module variable in myService.js, and referenced it in myDirective.js.
New Plunker
I'd like to work with both angularjs and requirejs. Before that, I worked with backbonejs and requirejs. I felt a bit more comfortable with that combination.
I also got the bower-seed from github, but it's too nested for the beginning.
Here's what I don't understand:
Require forces me to bootstrap angular myself.
Therefore I create a module named by my app.
Then I bootstrap that module to the document.
angular.module('app', []);
angular.bootstrap(document, ['app']);
That happens after the document ist ready, which is checked by this function:
angular.element(document).ready(function() { ... bootstraping ... }
So far I get it. But how and at what point do I put the ng-app into the header?
app.js has the function to put all my controllers, routers etc. into the app. By returning all modules I loaded inside the require-module. In my case I only load controllers
///app.js///
define(['angular', 'controller'], function (angular){
return angular.module('app',[
'app.controller',
'app.router'
]);
});
My controller:
define(['index', 'uirouter'], function(controllers){
controllers.controller('homeCtrl', function($scope, $routeParams){
$scope.logId = "testId";
});
});
Each controller puts it's content in a collection inside the index-module
my Index file:
///index///
define(['angular'], function(angular){
return angular.module('app.controllers',[]);
});
The Index file returs the controller-module to every controller-file requiring it. So I have all controllers in one module, by loading different controller-files
Here's my question: is this procedure correct and can I go on loading all angular-modules like this?
Im confused by working with angular-modules and require-modules ... Maybe anyone got a nice instruction in how to set up a angular-require project easily :)
Here's a link to the project:LINK ;)
Maybe anyone could help me a little bit :)
I am experimenting with this example: https://github.com/nikospara/angular-require-lazy
I also mentioned it in this SO question.
It needs work, but it is working; discussion on this topic really interests me.
Is there a way to inject a late dependency to an already bootstrapped angular module? Here's what I mean:
Say that I have a site-wide angular app, defined as:
// in app.js
var App = angular.module("App", []);
And in every page:
<html ng-app="App">
Later on, I'm reopening the app to add logic based on the needs of the current page:
// in reports.js
var App = angular.module("App")
App.controller("ReportsController", ['$scope', function($scope) {
// .. reports controller code
}])
Now, say that one of those on-demand bits of logic also requires their own dependencies (like ngTouch, ngAnimate, ngResource, etc). How can I attach them to the base App? This doesn't seem to work:
// in reports.js
var App = angular.module("App", ['ui.event', 'ngResource']); // <-- raise error when App was already bootstrapped
I realize I can do everything in advance, i.e -
// in app.js
var App = angular.module("App", ['ui.event', 'ngResource', 'ngAnimate', ...]);
Or define every module on its own and then inject everything into the main app (see here for more):
// in reports.js
angular.module("Reports", ['ui.event', 'ngResource'])
.controller("ReportsController", ['$scope', function($scope) {
// .. reports controller code
}])
// in home.js
angular.module("Home", ['ngAnimate'])
.controller("HomeController", ['$scope', '$http', function($scope, $http){
// ...
}])
// in app.js, loaded last into the page (different for every page that varies in dependencies)
var App = angular.module("App", ['Reports', 'Home'])
But this will require I initialize the App everytime with the current page's dependencies.
I prefer to include the basic app.js in every page and simply introduce the required extensions to each page (reports.js, home.js, etc), without having to revise the bootstrapping logic everytime I add or remove something.
Is there a way to introduce dependencies when the App is already bootstrapped? What is considered the idiomatic way (or ways) to do this? I'm leaning towards the latter solution, but wanted to see if the way I described could also be done. thanks.
I solved it like this:
reference the app again:
var app = angular.module('app');
then push your new requirements to the requirements array:
app.requires.push('newDependency');
Simple...
Get an instance of the module using the getter like this:
var app = angular.module("App");
Then add to the "requires" collection like this:
app.requires[app.requires.length] = "ngResource";
Anyway, this worked for me. GOOD LUCK!
According to this proposal on the Angular JS google group this functionality does not exist as of this moment. Hopefully the core team decides to add this functionality, could use it myself.
If you wish to add multiple dependencies at once, you can pass them in push as follows:
<script>
var app = angular.module('appName');
app.requires.push('dependencyCtrl1', 'dependencyService1');
</script>
I realize that this is an old question, however, no working answer has yet been provided, so I decided to share how I solved it.
The solution requires forking Angular, so you can't use CDN anymore. However the modification is very small, so I am surprised why this feature doesn't exist in Angular.
I followed the link to google groups that was provided in one of the other answers to this question. There I found the following code, which solved the issue:
instanceInjector.loadNewModules = function (mods) {
forEach(loadModules(mods), function(fn) { instanceInjector.invoke(fn || noop); });
};
When I added this code to line 4414 in the angular 1.5.0 source code (inside the createInjector function, before the return instanceInjector; statement), it enabled me to add dependencies after bootstrapping like this $injector.loadNewModules(['ngCookies']);.
Since version 1.6.7 it is now possible to lazy load modules after the app has been bootstrapped using $injector.loadNewModules([modules]). Below is an example taken from AngularJS documentation:
app.factory('loadModule', function($injector) {
return function loadModule(moduleName, bundleUrl) {
return getScript(bundleUrl).then(function() { $injector.loadNewModules([moduleName]); });
};
})
Please read full documentation about loadNewModules as there are some gotchas around it.
There's also a very good sample app by omkadiri using it with ui-router.