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?
Related
I don't know when to use app.register.controller and app.controller to create controller after module is created. I have googled but I didn't find clear difference between two scenarios. please post sample example.
Simple Answer
You can use app.controller to register providers before the app run (i.e., before bootstrap or ng-app, at config time). And app.register.controller is used to register a new provider when the app has already been bootstrapped (i.e., it's running).
A More Elaborated Explanation
AngularJs loads all providers that were registered before the module gets bootstrapped, once your module gets bootstrapped, angular won't look for registered providers anymore. It's fine for most apps, but, in some cases, you will have to load new providers at run time (i.e., after the app gets bootstrapped), that's called lazy loading. Therefore, provided that angular won't look for registered components anymore, you will have too register it manually.
For example:
var app = angular.module('myApp', []);
app.controller('myController1', function (){});
angular.element(documento).ready(function () {
// equivalent to ng-app attribute
angular.bootstrap(document, ['myApp']);
});
At this point, angularjs will load all providers registered before the bootstrap phase. However, if you try to register a controller again, it won't get loaded on your application, because angularjs loads it just when bootstrapping the app.
So, to register a provider at run time, you have to expose the angularjs' provider and component factories on your module like so:
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
component: $compileProvider.component,
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
});
Check this answer for more info: https://stackoverflow.com/a/20922872/4488121
Finally, now it allow you to register a provider after the app bootstrap (i.e., at run time).
app.register.controller('myController2', function (){});
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 doing angular project,i have a situation that i need to load "ngSanitize" module.The problem is i don't need this module when index page loading.I want to load it only when required.Please help to find out.
Create a seperate module file (app.module.js) in application depends on your requiement...
angular.module("SampleOne", []);
angular.module('SampleTwo', []);
angular.module("SampleThree", []);
angular.module("SampleFour", []);
angular.module('SampleFive', []);
On page loading initialize this module file,
Depends on your requirement call the modules in your application.
Here "SampleFive" is one of the module i have injected ngSanitize.
var app = angular.module('SampleFive', ['ngSanitize'])
app.controller('MyController', function ($scope) {
$scope.Message = "My name is <span><b>Angular Sanitize</b></span>";
});
When we will call "SampleFive" module on a page only ngSanitize module will load.
Refer a below link...
AngularJS Best Practices: Directory Structure
I have this global set up for my angular App module:
var App = angular.module('App', [], function ($interpolateProvider) {
//$interpolateProvider.startSymbol('<%');
//$interpolateProvider.endSymbol('%>');
});
I include it in all pages with angular stuff.
I then have a controller loaded on a page that requires a service called 'angularFileUpload':
App.controller('FileUploadController', ['$scope', 'FileUploader', function ($scope, FileUploader) {
If i place that service inside the module array, it works fine. Is there a way of just attaching it to this controller instead... this means i do not have to load the script files for every page using this module regardless of if the controllers require the angularfileUpload service or not.
Edit: regarding the last comment
If i declare:
var App = angular.module('App');
How do i then add that service to the module?
I am still relatively new to Ionic and AngularJS and I have the following problem: I created a service in the controller.js file and now need this service at loadup (app.js) to detect which start page I will route to. How can I export the service from controller.js into some other js file so that it will become available in both files app.js and controller.js.
Thanks,
EL
You import it using angular's dependency injection.
If your controller.js looks something like:
angular.module('myModule', [])
.service('myService', ['$scope', 'otherDependency', function($scope, otherDependency){
//some service code
}]);
Then the module you want to use the service in would need to import the module where the service is located and then inject the service itself. So something along the lines of:
angular.module('app', ['myModule'])
.controller('appCtrl', ['$scope', 'myService', function($scope, myService){
//some code using your service
}]);
This documentation might help:
AngularJS services - https://docs.angularjs.org/guide/services
AngularJS dependency injection - https://docs.angularjs.org/guide/di