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
Related
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.
I trying to put some code in .run block in my angular application. What i want to do is watch my routes change and flag some links based on permission user have.
here is a structure of my application
this is my main module where I will inject my other modules
angular.module('app', ['app.bms', 'app.core' , 'app.reports']);
this is my core module where i inject all the 3rd party modules
angular.module('app.core',
["ngAnimate","ngTable","angularSpinner",'ui.router',"ui.bootstrap","ngFileUpload", "chart.js"]);
this is where im trying to do .run blovk in my main application
angular
.module("app.bms", [])
.run(['$rootScope', 'authService', function ($rootScope,authService) {
console.log("running");
}
]);
here is my html where i start app
<div ng-app="app">
i never hit my console running.
any idea what am i doing wrong?
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 am very new in angularJs please guide me ,i have created custom directive called testDirective in separate file and my controller and config files are in separate files i want to use my custom directive in my html page but while loading the application that custom element is loading but not able to fetch content of directive i guess m missing some sort of mapping .kindly help me
//this is testDirective.js
var app=angular.module('mytodoApp');
app.directive('testDirective',function(){
return {
restrict:'E',
template:'<h2>This is comes from directive</h2>'
};
});
var app=angular.module('mytodoApp');
app.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
< test-directive>
< /test-directive>
You have to bootstrap the Angular app, otherwise the HTML page does not know that you are using AngularJS and what you app has.
Bootstrapping is done by using ng-app="moduleName".
<div ng-app="mytodoApp">
<test-directive></test-directive>
</div>
As said by #JBNizet, you should add your custom directive code, by adding it trough the script tag in your HTML code.
Since browsers can only load 5 to 10 scripts at the same time, it is nessesary in production to concatenate your files with Grunt or Gulp.
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';
}