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
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 (){});
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?
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 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';
}