| /** | |
| * @ngdoc directive | |
| * @name ng.directive:ngApp | |
| * | |
| * @element ANY | |
| * @param {angular.Module} ngApp an optional application | |
| * {@link angular.module module} name to load. | |
| * | |
| * @description | |
| * | |
| * Use this directive to **auto-bootstrap** an AngularJS application. The `ngApp` directive | |
| * designates the **root element** of the application and is typically placed near the root element | |
| * of the page - e.g. on the `<body>` or `<html>` tags. | |
| * | |
| * 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 | |
| * {@link angular.bootstrap} instead. AngularJS applications cannot be nested within each other. | |
| * | |
| * You can specify an **AngularJS module** to be used as the root module for the application. This | |
| * module will be loaded into the {@link AUTO.$injector} when the application is bootstrapped and | |
| * should contain the application code needed or have dependencies on other modules that will | |
| * contain the code. See {@link angular.module} for more information. | |
| * | |
| * In the example below if the `ngApp` directive were not placed on the `html` element then the | |
| * document would not be compiled, the `AppController` would not be instantiated and the `{{ a+b }}` | |
| * would not be resolved to `3`. | |
| * | |
| * `ngApp` is the easiest, and most common, way to bootstrap an application. | |
| * | |
| <example module="ngAppDemo"> | |
| <file name="index.html"> | |
| <div ng-controller="ngAppDemoController"> | |
| I can add: {{a}} + {{b}} = {{ a+b }} | |
| </file> | |
| <file name="script.js"> | |
| angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) { | |
| $scope.a = 1; | |
| $scope.b = 2; | |
| }); | |
| </file> | |
| </example> | |
| * | |
| */ | |
| function angularInit(element, bootstrap) { | |
| var elements = [element], | |
| appElement, | |
| module, | |
| names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'], | |
| NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/; | |
| function append(element) { | |
| element && elements.push(element); | |
| } | |
| forEach(names, function(name) { | |
| names[name] = true; | |
| append(document.getElementById(name)); | |
| name = name.replace(':', '\\:'); | |
| if (element.querySelectorAll) { | |
| forEach(element.querySelectorAll('.' + name), append); | |
| forEach(element.querySelectorAll('.' + name + '\\:'), append); | |
| forEach(element.querySelectorAll('[' + name + ']'), append); | |
| } | |
| }); | |
| forEach(elements, function(element) { | |
| if (!appElement) { | |
| var className = ' ' + element.className + ' '; | |
| var match = NG_APP_CLASS_REGEXP.exec(className); | |
| if (match) { | |
| appElement = element; | |
| module = (match[2] || '').replace(/\s+/g, ','); | |
| } else { | |
| forEach(element.attributes, function(attr) { | |
| if (!appElement && names[attr.name]) { | |
| appElement = element; | |
| module = attr.value; | |
| } | |
| }); | |
| } | |
| } | |
| }); | |
| if (appElement) { | |
| bootstrap(appElement, module ? [module] : []); | |
| } | |
| } |
http://stackoverflow.com/questions/13838205/call-angular-function-on-document-ready
angular.element(document).ready(function () {
var $injector = angular.bootstrap(document, ['myApp']);
var $controller = $injector.get('$controller');
var AngularCtrl = $controller('AngularCtrl');
});
For this to work the ng-app directive must be removed from the html.
| /** | |
| * @ngdoc function | |
| * @name angular.bootstrap | |
| * @description | |
| * Use this function to manually start up angular application. | |
| * | |
| * See: {@link guide/bootstrap Bootstrap} | |
| * | |
| * Note that ngScenario-based end-to-end tests cannot use this function to bootstrap manually. | |
| * They must use {@link api/ng.directive:ngApp ngApp}. | |
| * | |
| * @param {Element} element DOM element which is the root of angular application. | |
| * @param {Array<String|Function|Array>=} modules an array of modules to load into the application. | |
| * Each item in the array should be the name of a predefined module or a (DI annotated) | |
| * function that will be invoked by the injector as a run block. | |
| * See: {@link angular.module modules} | |
| * @returns {AUTO.$injector} Returns the newly created injector for this app. | |
| */ | |
| function bootstrap(element, modules) { | |
| var doBootstrap = function() { | |
| element = jqLite(element); | |
| if (element.injector()) { | |
| var tag = (element[0] === document) ? 'document' : startingTag(element); | |
| throw ngMinErr('btstrpd', "App Already Bootstrapped with this Element '{0}'", tag); | |
| } | |
| modules = modules || []; | |
| modules.unshift(['$provide', function($provide) { | |
| $provide.value('$rootElement', element); | |
| }]); | |
| modules.unshift('ng'); | |
| var injector = createInjector(modules); | |
| injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector', '$animate', | |
| function(scope, element, compile, injector, animate) { | |
| scope.$apply(function() { | |
| element.data('$injector', injector); | |
| compile(element)(scope); | |
| }); | |
| }] | |
| ); | |
| return injector; | |
| }; | |
| var NG_DEFER_BOOTSTRAP = /^NG_DEFER_BOOTSTRAP!/; | |
| if (window && !NG_DEFER_BOOTSTRAP.test(window.name)) { | |
| return doBootstrap(); | |
| } | |
| window.name = window.name.replace(NG_DEFER_BOOTSTRAP, ''); | |
| angular.resumeBootstrap = function(extraModules) { | |
| forEach(extraModules, function(module) { | |
| modules.push(module); | |
| }); | |
| doBootstrap(); | |
| }; | |
| } |
If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.
Here is an example of manually initializing Angular:
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<body>
Hello {{'World'}}!
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.module('myApp', []);
angular.bootstrap(document, ['myApp']);
});
</script>
</body>
</html>
Note that we have provided the name of our application module to be loaded into the injector as the second parameter of the api/angular.bootstrap function. Notice that angular.bootstrap will not create modules on the fly. You must create any custom modules before you pass them as a parameter.
This is the sequence that your code should follow:
After the page and all of the code is loaded, find the root element of your AngularJS application, which is typically the root of the document.
Call api/angular.bootstrap to compile the element into an executable, bi-directionally bound application.
When Angular library is loaded it will scan the DOM looking for element with ng-app directive. When it finds one it will begin the bootstrapping proces.
In that process Angular will take the value of ng-app attribute (in your case that's InventoryModule)
and will try to find an angular module with the same name. If it fails it will throw:
Uncaught Error: No module: <module name>.
In your fiddle you have set the "Code Wrap" select box to "onLoad". This drop-down instructs jsFiddle when to initialize the JS code that you've put in JS frame. When it's set to "onLoad", the code will run in onLoad window event.
On the other hand, Angular bootstrapping process will run on
angular.bootstrap() is a manual way of doing the same thing that Angular already does in it's $().ready() handler.
A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. In its simplest form the module consist of collection of two kinds of blocks:
angular.module('myModule', []).
config(function(injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into the config blocks.
}).
run(function(injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into the run blocks
});
There are some convenience methods on the module which are equivalent to the config block. For example:
angular.module('myModule', []).
value('a', 123).
factory('a', function() { return 123; }).
directive('directiveName', ...).
filter('filterName', ...);
// is same as
angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
$provide.value('a', 123);
$provide.factory('a', function() { return 123; });
$compileProvider.directive('directiveName', ...);
$filterProvider.register('filterName', ...);
});
The configuration blocks get applied in the order in which they are registered. The only exception to it are constant definitions, which are placed at the beginning of all configuration blocks.
Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.