I want to inject a dependency for example ngMessages into my module but i want this injection from other file (from my validation.js file). then how can i do this,
for clear understanding i am providing a dummy example below
app.js code
angular.module('myApp', ['ngMessages']); //i don't want to inject here
validation.js code
var myApp = angular.module('myApp');
myApp.$inject = ['ngMessages']; //i try like this but not happen
My understanding from your question is :
You have ngMessages injected in validation.js code and you want to use ngMessages functionality inside app.js code.
You can var myApp = angular.module('myApp', ['ngMessages']); inside validation.js code
And can just use like angular.module('myApp');inside app.js code. And use the ngMessages functionality.
Please find the plunker link below :
Angular Ui Router Example
There, I have injected 'ui-router' inside script.js and used the functionality inside config.js without injecting ui-router again.
Hope this help.
Related
I want to get Angular Module name in JavaScript.
Means i want to retrieve module name of angular js application in my javascript file so that i can apply other functionality on that module.
I want to get value of ng-app or data-ng-app
app.controller('TestCtrl', ['$scope','$rootElement',
function($scope, $rootElement) {
console.log($rootElement.attr('ng-app'));
}
]);
DEMO
Does anybody have an idea how to create an angularjs app with modules loginApp and mainApp, login will use login.html and mainApp will use index.html?
Below is the scenario I want to achieve.
Run loginApp
Once authenticated, run mainApp
I am currently doing the above scenario since I want my login page to load faster, so instead of using index.html which has lots of <script> included.
Angular app initialization manually.
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
More information Bootstrap Angular App
You can manually bootstrap app. see here [more][1]
Manually Bootstrapping an AngularJS Application
Let's start by defining our application's main module:
var myApplication = angular.module("myApplication", []);
Now, instead of relying on the ng-app attribute, we can call the angular.bootstrap function manually. We need to hand it both the application root and the name of our main module. Here's how you call it as soon as the DOM has finished loading:
angular.element(document).ready(function() {
angular.bootstrap(document, ["myApplication"]);
});
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp
See also
https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
http://docs.angularjs.org/api/angular.bootstrap
I have this code :
var app = angular.module("malocFeApp",['leaflet-directive']);
app.controller('MainCtrl',[ "$scope", function($scope) { }]);
It prevent the template to show up.
When I remove the requires the template show up:
var app = angular.module("malocFeApp");
app.controller('MainCtrl',[ "$scope", function($scope) { }]);
Why did the requires prevent the module to work correctly?
Ensure you have the angular leaflet.js script referenced in your HTML
Make sure it is referenced after angular.js?
Check your JavaScript console output (F12 in your browser) for errors regarding dependency injection errors
I'm learning AngularJS following an organization inspired by ng-boilerplate. I create different Angular modules for the different parts of my site.
However, I want to create all common elements (services and directives) under the main module, while having them all be in separate source files.
This code works, but is the module in sessionService.js referencing the same module than app.js, or is it creating a new one with the same name?
app.js
var app = angular.module('myApp', [...])
.config(...)
.controller(...);
sessionService.js
angular.module('myApp', [])
.service('SessionService', function() { ... });
If you call angular.module('myApp', []) multiple times on the same page, you will likely run into errors or conflicts. I never tried that.
However, if you already run angular.module('myApp', []) once. Then you can run angular.module('myApp') (note: without []) to retrieve (refer to) the myApp module you defined earlier.
in controller.js file :
var app = angular.module('myApp',['newService']);
in service.js :
angular.module('newService',[])
.service('someService',function(){
return {
// return something
return null
}
}
});
Do not forget to include both the js files in your HTML:
<script src="controllers/controller.js" type="text/javascript"></script>
<script src="services/service.js" type="text/javascript"></script>
Naming & namespacing is important in any project. Try:
app.js:
var app = angular.module('myApp', ['sessionService', ...])...;
sessionService.js:
angular.module('sessionService', [])
.service('SessionService', ...);
Notice that the module name is in lower camel case while the service object itself is upper camel case. This will help you avoid namespace clashing. Hope that helps.
I was following the angular docs and other links in order to create a "component" with angular inside a rails-based project.
The problem is that I can't correctly initialize the app, and instead I got two identical errors
Uncaught Error: No module: testApp0
Uncaught Error: No module: testApp0
In the following jsfiddle I try to show you my point http://jsfiddle.net/d8Lyu/
I'm pretty new in angular and the official documentation isn't very helpful
You are almost here! Just remember angular is modular and every module need to be declared with an angular.module('my_module_name', ['my_modules_dependency']).
Just refactor your code like that :
angular.module( //this is your app module
'testApp0',
['testApp0.controllers'] //your app need your controller as a dependency to works
);
angular.module( //this is your controller module
'testApp0.controllers',
[]
).controller('sliderCtrl', ['$scope', function($scope) {
$scope.greeting = "hellow" //you pass a gretting variable to your template
}
])
An other thing : you declare a gretting variable in your controller but acces it with user.hellow in your template. Just put {{ gretting }}.
One last thing, in the
frameworks and extensions
of fiddle change 'onLoad' to 'in body', you don't want your angular app to be ready before the DOM.
If you plan to use angular, look at : angular-app. The tutorial app can't be trusted for serious angular developement.
Use this jsfiddle as a reference: http://jsfiddle.net/joshdmiller/HB7LU/
You need to add an external resource, change settings in the 'fiddle options' section and the 'frameworks and extensions' section.
Once everything is setup you can create your angular in the javascript pane likeso:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}