Develop Reference

How can I execute Angular code without bootstrapping?

All manual bootstrapping examples use the following pattern:
angular.module('myApp', []);
angular.bootstrap(document, ['myApp']);
However, I don't need angular to look at the document, I just need to open a popup using ui-bootstrap module.
The best I managed to do was the following:
$("...").click(function() {
angular.module("pp", ["ui.bootstrap"])
.config(["$modal", function($modal) {
$modal.open({
template: "Hello!"
});
}]);
angular.bootstrap(null, ["pp"]);
});
However, that will re-bootstrap angular every time, re-create the same module over and over, and above all that it doesn't work - configs run alongside provider initialization, thus there is no $module dependency available at that time.
Basically, I am trying to incorporate angular into existing application without creating significant disturbance in current structure. I want angular to manage a single popup, nothing else for now, so normal bootstrap & controller way doesn't seem to be the best option.
Is there some way to run that modal without doing global angular bootstrap?

Have you tried bootstrapping angular to the whole document and simply not using it for anything but the modal call? Unless there are namespace conflicts with your current code, it seems like this would allow you to use Angular functions wherever you please without bootstrapping every time.

Why not use just Bootstrap without the angular wrapper?
The angular directives only wrap the original bootstrap modals with some extra stuff.
Seems to me a bit pointless to include Angular + Bootstrap + UI Bootstrap when you can achieve the same just with Bootstrap itself.

Angular - Creating a new module dynamically, and injecting it into main app's dependencies?

So I'm hoping to do some lazy loading in my angular app -- I want to pull down everything I need to render the landing page, and then subsequently pull down the rest.
The problem is, it seems like I have to define all of my angular module dependencies up-front, when I first run the app...
var myApp = angular.module('myApp', []);
// then, after 1st page render:
var myModule = angular.module('myApp.subModule', []);
How do I now inject myApp.subModule into the dependencies of myApp?
Thanks!
-Daniel

You can use ocLazyLoad for this purpose.
https://github.com/ocombe/ocLazyLoad
The way I understand - you include ocLazyLoad.js in your code.
Then, instead of angular.module('app',['module1','module2']) your code becomes angular.module('app',['oc.lazyLoad']).
Then you inject $ocLazyLoad into your controller and use it like $ocLazyLoad.load({name:'module1', files:['js/controllers/module1.js']},{name:'module2',files:['js/controllers/module2']}).
You can check out the examples on the github page.

AngularJS .ng-enter animation doesn't work on first run

I'm have a strange problem in my AngularJS app; Animation in my tab-slides switching with ng-include, doesn't work for first time, but works good in second or third time.
Here is my test code on plunker: http://embed.plnkr.co/a2x4vkTVgEUEt9mxWaVy/preview
Looks like ng-enter animation class, setting before, template uploads. Please, help.

It looks like the animation isn't working as your templates are getting loaded out of turn. I recommend either using directives for implementing tabs, or ngRoute.
I have made an example with ngRoute here:
http://embed.plnkr.co/RFw3CZwQmPz9doqe7o1u/preview
I'm not entirely sure what your app is supposed to do, so I may have broken your initial setup.
But I see you're using a lot of rootScope. I recommend using a service for storing shared data between the controllers. Like this (using example from here: Passing data between controllers in Angular JS?)
app.service('productService', function() {
var productList = [];
addProduct = function(newObj) {
productList.push(newObj);
};
getProducts = function(){
return productList;
};
});
Update: It is possible to use dynamic templateUrls in the $routeProvider, like this. This is also possible with the controller. That way you don't have to specify a seperate route for every one of your steps.

Ok, i'm found solution for my own question, if you have same problem, you must use a $templateCache service, and here is code on plunker:
http://embed.plnkr.co/mnB6VwXqHSt6L3IEUvCI/preview

How to combine two controllers in Angular.js?

I'm new to Angular, and I've got two seperate controllers that work fine separately, but when I try to combine them in the same page, on of them gets broken. You can check them out here:
http://plnkr.co/edit/RUKCNUsiLLHja5BCsOXi?p=preview
http://plnkr.co/edit/UkGEaquNkXGfUgbuYBki?p=preview
I've tried to combine both controllers like this:
var app = angular.module('App', ['audioPlayer'], [ngSocial]);
But that breaks it as well. Do you think it has anything to do with the Ionic framework I'm using?
Thanks for any help!
EDIT: Here's the working demo http://plnkr.co/edit/0eQZ0O?p=preview

Could you show the third example where it actually breaks. It looks like you should have:
var app = angular.module('App', ['audioPlayer', 'ngSocial']);
If you're actually talking about combining modules. The first parameter to angular.module is the string name of the module you're defining, the second parameter is the array of dependencies.

AngularJS loading controllers from folder

im new in AngularJS, and have question how i can load controller and other js from structured folders?
For example i have structure:
app/
-common
-users
--userController.js
--userService.js
-orders
-app.js
How i should load controller and service from folder user?
And one more small question: what means squre bracerts?
app.config(['someThing'], function($routeProvider)

You can put the your code where you wants to. If you put them into angular modules, angular will find it. So if you have a service in /app/common/services/foo.js like:
angular.module('app').service('foo', function() { ... });
You can do this in the userController:
angular.module('app').controller('UserController', function($scope, foo) { ... });
Here you see how I injected foo in our controller. Angular Dependency Injection system is smart enough to find your code no matter where you put them.
You can also create different modules than app, you can have:
angular.module('other').service('bar', function() { ... });
And where you define the app module, something like this:
angular.module('app', []);
You just need to add the new module there as a dependency, that is what the [] are for:
angular.module('app', ['other']);
Now you can use the service bar in your controller too :)
On the other hand, the syntax you're talking about is the array notation, something like this:
angular.module('app').controller('FooCtrl', ['$scope', 'foo', function($scope, foo) { ... }]);
This is needed if you mangle your code when you minify it because in the minified code, you could get something like this:
angular.module('app').controller('FooCtrl', ['$scope', 'foo', function(f, g) { ... }]);
As you see, the function parameters are now f and g and Angular doesn't know what to inject based on those names, so it looks on the strings we provided, so it will know that f is $scope and g is foo.
There is no need to use this annotation directly, there are several tools that will do that for you like ngmin.
Cheers.
EDIT: You would need to add every javascript file into a <script> or the won't get loaded and Angular wouldn't find it.
Adding the files one by one is a pain, because you can have 5 or you can have 200.
It is better to concat them and for that I recommend: grunt-concat-sourcemap because it will generate a sourcemap so you will have 1 file with the entire app but in the dev tools you will see them in separate files.
I recommend you to check linemanjs which is a good tool to develop javascript apps and it concat the files for you, source maps, minify, the array notation stuff also...

You will have to link all files in your main HTML page and make sure they are loaded. As pointed out by Dwight above.
An alternative approach would be to use something like Grunt.js to "build" the app. This would include combining all the controller.js files into one – which you then load into your HTML page. This way all the files will be separate for development but will get concocted for deployment.