jeena/Podcast
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Upgrade to angularjs 1.2.0 rc1

Browse source
This commit is contained in:
Colin Frei 2013-08-21 19:46:51 +02:00
parent d223dfd662
commit d6b021bfaf
674 changed files with 79667 additions and 62269 deletions
Download patch file Download diff file Expand all files Collapse all files

99
lib/angular/docs/partials/guide/module.html Normal file → Executable file
View file

@ -1,12 +1,11 @@
<h1><code ng:non-bindable=""></code>
<span class="hint"></span>
<a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/module.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
<div><span class="hint"></span>
</div>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/module.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><h2>What is a Module?</h2>
<div><div class="developer-guide-page developer-guide-modules-page"><h2>What is a Module?</h1>
<p>Most applications have a main method which instantiates, wires, and bootstraps the application.
Angular apps don't have a main method. Instead modules declaratively specify how an application
Angular apps don&#39;t have a main method. Instead modules declaratively specify how an application
should be bootstrapped. There are several advantages to this approach:</p>
<ul>
<li>The process is more declarative which is easier to understand</li>
<li>In unit-testing there is no need to load all modules, which may aid in writing unit-tests.</li>
@ -15,24 +14,19 @@ configuration and help end-to-end test the application</li>
<li>Third party code can be packaged as reusable modules.</li>
<li>The modules can be loaded in any/parallel order (due to delayed nature of module execution).</li>
</ul>
<h2>The Basics</h2>
<p>Ok, I'm in a hurry. How do I get a Hello World module working?</p>
<h1>The Basics</h1>
<p>Ok, I&#39;m in a hurry. How do I get a Hello World module working?</p>
<p>Important things to notice:</p>
<ul>
<li><a href="api/angular.Module"><code>Module</code></a> API</li>
<li>Notice the reference to the <code>myApp</code> module in the <code>&lt;html ng-app="myApp"&gt;</code>, it is what
<li>Notice the reference to the <code>myApp</code> module in the <code>&lt;html ng-app=&quot;myApp&quot;&gt;</code>, it is what
bootstraps the app using your module.</li>
</ul>
<h3>Source</h3>
<div source-edit="myApp" source-edit-deps="angular.js script.js" source-edit-html="index.html-69" source-edit-css="" source-edit-js="script.js-68" source-edit-unit="" source-edit-scenario=""></div>
<h3>Source</h2>
<div source-edit="myApp" source-edit-deps="angular.js script.js" source-edit-html="index.html-234" source-edit-css="" source-edit-js="script.js-233" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-69" ng-html-wrap="myApp angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-69">
<pre class="prettyprint linenums" ng-set-text="index.html-234" ng-html-wrap="myApp angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-234">
<div>
{{ 'World' | greet }}
@ -40,8 +34,8 @@ bootstraps the app using your module.</li>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-68"></pre>
<script type="text/ng-template" id="script.js-68">
<pre class="prettyprint linenums" ng-set-text="script.js-233"></pre>
<script type="text/ng-template" id="script.js-233">
// declare a module
var myAppModule = angular.module('myApp', []);
@ -55,14 +49,11 @@ bootstraps the app using your module.</li>
</script>
</div>
</div><h3>Demo</h3>
<div class="well doc-example-live animator-container" ng-embed-app="myApp" ng-set-html="index.html-69" ng-eval-javascript="script.js-68"></div>
<h2>Recommended Setup</h2>
</div><h2>Demo</h2>
<div class="well doc-example-live animate-container" ng-embed-app="myApp" ng-set-html="index.html-234" ng-eval-javascript="script.js-233"></div>
<h1>Recommended Setup</h1>
<p>While the example above is simple, it will not scale to large applications. Instead we recommend
that you break your application to multiple modules like this:</p>
<ul>
<li>A service module, for service declaration</li>
<li>A directive module, for directive declaration</li>
@ -70,19 +61,16 @@ that you break your application to multiple modules like this:</p>
<li>And an application level module which depends on the above modules, and which has
initialization code.</li>
</ul>
<p>The reason for this breakup is that in your tests, it is often necessary to ignore the
initialization code, which tends to be difficult to test. By putting it into a separate module it
can be easily ignored in tests. The tests can also be more focused by only loading the modules
that are relevant to tests.</p>
<p>The above is only a suggestion, so feel free to tailor it to your needs.</p>
<h3>Source</h3>
<div source-edit="xmpl" source-edit-deps="angular.js script.js" source-edit-html="index.html-71" source-edit-css="" source-edit-js="script.js-70" source-edit-unit="" source-edit-scenario=""></div>
<h2>Source</h2>
<div source-edit="xmpl" source-edit-deps="angular.js script.js" source-edit-html="index.html-236" source-edit-css="" source-edit-js="script.js-235" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-71" ng-html-wrap="xmpl angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-71">
<pre class="prettyprint linenums" ng-set-text="index.html-236" ng-html-wrap="xmpl angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-236">
<div ng-controller="XmplController">
{{ greeting }}!
@ -90,8 +78,8 @@ that are relevant to tests.</p>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-70"></pre>
<script type="text/ng-template" id="script.js-70">
<pre class="prettyprint linenums" ng-set-text="script.js-235"></pre>
<script type="text/ng-template" id="script.js-235">
angular.module('xmpl.service', []).
value('greeter', {
salutation: 'Hello',
@ -128,15 +116,12 @@ that are relevant to tests.</p>
}
</script>
</div>
</div><h3>Demo</h3>
<div class="well doc-example-live animator-container" ng-embed-app="xmpl" ng-set-html="index.html-71" ng-eval-javascript="script.js-70"></div>
<h2>Module Loading &amp; Dependencies</h2>
</div><h2>Demo</h2>
<div class="well doc-example-live animate-container" ng-embed-app="xmpl" ng-set-html="index.html-236" ng-eval-javascript="script.js-235"></div>
<h1>Module Loading &amp; Dependencies</h1>
<p>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:</p>
<ol>
<li><strong>Configuration blocks</strong> - get executed during the provider registrations and configuration
phase. Only providers and constants can be injected into configuration blocks. This is to
@ -145,7 +130,6 @@ prevent accidental instantiation of services before they have been fully configu
application. Only instances and constants can be injected into run blocks. This is to prevent
further system configuration during application run time.</li>
</ol>
<pre class="prettyprint linenums">
angular.module('myModule', []).
config(function(injectables) { // provider-injector
@ -161,12 +145,9 @@ angular.module('myModule', []).
// into the run blocks
});
</pre>
<h3>Configuration Blocks</h3>
<h2>Configuration Blocks</h2>
<p>There are some convenience methods on the module which are equivalent to the config block. For
example:</p>
<pre class="prettyprint linenums">
angular.module('myModule', []).
value('a', 123).
@ -184,41 +165,31 @@ angular.module('myModule', []).
$filterProvider.register('filterName', ...);
});
</pre>
<p>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.</p>
<h3>Run Blocks</h3>
<h2>Run Blocks</h2>
<p>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.</p>
<h3>Dependencies</h3>
<h2>Dependencies</h2>
<p>Modules can list other modules as their dependencies. Depending on a module implies that required
module needs to be loaded before the requiring module is loaded. In other words the configuration
blocks of the required modules execute before the configuration blocks or the requiring module.
blocks of the required modules execute before the configuration blocks of the requiring module.
The same is true for the run blocks. Each module can only be loaded once, even if multiple other
modules require it.</p>
<h3>Asynchronous Loading</h3>
<h2>Asynchronous Loading</h3>
<p>Modules are a way of managing $injector configuration, and have nothing to do with loading of
scripts into a VM. There are existing projects which deal with script loading, which may be used
with Angular. Because modules do nothing at load time they can be loaded into the VM in any order
and thus script loaders can take advantage of this property and parallelize the loading process.</p>
<h2>Unit Testing</h2>
<h1>Unit Testing</h2>
<p>In its simplest form a unit test is a way of instantiating a subset of the application in test and
then applying a stimulus to it. It is important to realize that each module can only be loaded
once per injector. Typically an app has only one injector. But in tests, each test has its own
injector, which means that the modules are loaded multiple times per VM. Properly structured
modules can help with unit testing, as in this example:</p>
<p>In all of these examples we are going to assume this module definition:
<pre class="prettyprint linenums">
angular.module('greetMod', []).
@ -237,8 +208,7 @@ modules can help with unit testing, as in this example:</p>
}
});
</pre>
<p>Let's write some tests:
<p>Let&#39;s write some tests:
<pre class="prettyprint linenums">
describe('myApp', function() {
// load the relevant application modules then load a special
@ -273,4 +243,5 @@ describe('myApp', function() {
});
});
});
</pre></div>
</pre>
</div></div>