chore(release): cutting the 1.0 temporal-domination release

docs(changelog): release notes for 1.0 temporal-domination release
fix($location): fix URL interception in hash-bang mode
2012-06-14 10:50:22 -07:00 · 2012-06-14 10:50:22 -07:00 · 2012-06-14 10:48:56 -07:00 · 2012-06-13 10:49:05 -07:00 · 2012-06-13 10:46:22 -07:00 · 2012-06-12 01:46:02 -07:00
716 changed files with 158666 additions and 21756 deletions
@@ -1,6 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <launchConfiguration type="org.eclipse.ui.externaltools.ProgramBuilderLaunchConfigurationType">
 <booleanAttribute key="org.eclipse.debug.ui.ATTR_LAUNCH_IN_BACKGROUND" value="false"/>
+<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_BUILDER_ENABLED" value="true"/>
 <stringAttribute key="org.eclipse.ui.externaltools.ATTR_BUILD_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#10;&lt;launchConfigurationWorkingSet editPageId=&quot;org.eclipse.ui.resourceWorkingSetPage&quot; factoryID=&quot;org.eclipse.ui.internal.WorkingSetFactory&quot; id=&quot;1262905463390_2&quot; label=&quot;workingSet&quot; name=&quot;workingSet&quot;&gt;&#10;&lt;item factoryID=&quot;org.eclipse.ui.internal.model.ResourceFactory&quot; path=&quot;/angular.js/test&quot; type=&quot;2&quot;/&gt;&#10;&lt;item factoryID=&quot;org.eclipse.ui.internal.model.ResourceFactory&quot; path=&quot;/angular.js/src&quot; type=&quot;2&quot;/&gt;&#10;&lt;/launchConfigurationWorkingSet&gt;}"/>
 <stringAttribute key="org.eclipse.ui.externaltools.ATTR_LOCATION" value="${workspace_loc:/angular.js}/test.sh"/>
 <stringAttribute key="org.eclipse.ui.externaltools.ATTR_RUN_BUILD_KINDS" value="full,incremental,auto,"/>
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<launchConfiguration type="org.eclipse.ui.externaltools.ProgramBuilderLaunchConfigurationType">
+<booleanAttribute key="org.eclipse.debug.ui.ATTR_LAUNCH_IN_BACKGROUND" value="false"/>
+<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_BUILDER_ENABLED" value="false"/>
+<stringAttribute key="org.eclipse.ui.externaltools.ATTR_BUILD_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#10;&lt;resources&gt;&#10;&lt;item path=&quot;/angular.js/perf&quot; type=&quot;2&quot;/&gt;&#10;&lt;item path=&quot;/angular.js/src&quot; type=&quot;2&quot;/&gt;&#10;&lt;/resources&gt;}"/>
+<stringAttribute key="org.eclipse.ui.externaltools.ATTR_LOCATION" value="${workspace_loc:/angular.js/perf.sh}"/>
+<stringAttribute key="org.eclipse.ui.externaltools.ATTR_RUN_BUILD_KINDS" value="full,incremental,auto,"/>
+<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_TRIGGERS_CONFIGURED" value="true"/>
+<stringAttribute key="org.eclipse.ui.externaltools.ATTR_WORKING_DIRECTORY" value="${workspace_loc:/angular.js}"/>
+</launchConfiguration>
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <launchConfiguration type="org.eclipse.ui.externaltools.ProgramBuilderLaunchConfigurationType">
-<stringAttribute key="org.eclipse.debug.core.ATTR_REFRESH_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#10;&lt;resources&gt;&#10;&lt;item path=&quot;/angular.js/docs&quot; type=&quot;2&quot;/&gt;&#10;&lt;/resources&gt;}"/>
+<stringAttribute key="org.eclipse.debug.core.ATTR_REFRESH_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#10;&lt;resources&gt;&#10;&lt;item path=&quot;/angular.js/build&quot; type=&quot;2&quot;/&gt;&#10;&lt;/resources&gt;}"/>
 <booleanAttribute key="org.eclipse.debug.ui.ATTR_LAUNCH_IN_BACKGROUND" value="false"/>
-<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_BUILDER_ENABLED" value="false"/>
-<stringAttribute key="org.eclipse.ui.externaltools.ATTR_BUILD_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#10;&lt;resources&gt;&#10;&lt;item path=&quot;/angular.js/docs/callback.js&quot; type=&quot;1&quot;/&gt;&#10;&lt;item path=&quot;/angular.js/docs/collect.js&quot; type=&quot;1&quot;/&gt;&#10;&lt;item path=&quot;/angular.js/docs/filter.template&quot; type=&quot;1&quot;/&gt;&#10;&lt;/resources&gt;}"/>
+<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_BUILDER_ENABLED" value="true"/>
+<stringAttribute key="org.eclipse.ui.externaltools.ATTR_BUILD_SCOPE" value="${working_set:&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#10;&lt;resources&gt;&#10;&lt;item path=&quot;/angular.js/docs&quot; type=&quot;2&quot;/&gt;&#10;&lt;item path=&quot;/angular.js/src&quot; type=&quot;2&quot;/&gt;&#10;&lt;/resources&gt;}"/>
 <stringAttribute key="org.eclipse.ui.externaltools.ATTR_LOCATION" value="${workspace_loc:/angular.js/gen_docs.sh}"/>
 <stringAttribute key="org.eclipse.ui.externaltools.ATTR_RUN_BUILD_KINDS" value="full,incremental,auto,"/>
 <booleanAttribute key="org.eclipse.ui.externaltools.ATTR_TRIGGERS_CONFIGURED" value="true"/>
@@ -2,4 +2,14 @@ build/
 angularjs.netrc
 jstd.log
 .DS_Store
-regression/temp.html
+gen_docs.disable
+test.disable
+regression/temp*.html
+performance/temp*.html
+.idea/workspace.xml
+*~
+angular.js.tmproj
+node_modules
+jsTestDriver*.conf
+angular.xcodeproj
+.idea
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
-
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Encoding" useUTFGuessing="true" native2AsciiForPropertiesFiles="false" />
-</project>
-
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DependencyValidationManager">
-    <option name="SKIP_IMPORT_STATEMENTS" value="false" />
-  </component>
-  <component name="ProjectRootManager" version="2" />
-  <component name="SvnBranchConfigurationManager">
-    <option name="mySupportsUserInfoFilter" value="true" />
-  </component>
-</project>
-
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/angular.js.iml" filepath="$PROJECT_DIR$/.idea/angular.js.iml" />
-    </modules>
-  </component>
-</project>
-
@@ -1,68 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CodeStyleSettingsManager">
-    <option name="PER_PROJECT_SETTINGS">
-      <value>
-        <option name="USE_SAME_INDENTS" value="true" />
-        <option name="OTHER_INDENT_OPTIONS">
-          <value>
-            <option name="INDENT_SIZE" value="2" />
-            <option name="CONTINUATION_INDENT_SIZE" value="4" />
-            <option name="TAB_SIZE" value="2" />
-            <option name="USE_TAB_CHARACTER" value="false" />
-            <option name="SMART_TABS" value="false" />
-            <option name="LABEL_INDENT_SIZE" value="0" />
-            <option name="LABEL_INDENT_ABSOLUTE" value="false" />
-          </value>
-        </option>
-        <ADDITIONAL_INDENT_OPTIONS fileType="js">
-          <option name="INDENT_SIZE" value="4" />
-          <option name="CONTINUATION_INDENT_SIZE" value="8" />
-          <option name="TAB_SIZE" value="4" />
-          <option name="USE_TAB_CHARACTER" value="false" />
-          <option name="SMART_TABS" value="false" />
-          <option name="LABEL_INDENT_SIZE" value="0" />
-          <option name="LABEL_INDENT_ABSOLUTE" value="false" />
-        </ADDITIONAL_INDENT_OPTIONS>
-        <ADDITIONAL_INDENT_OPTIONS fileType="jsp">
-          <option name="INDENT_SIZE" value="4" />
-          <option name="CONTINUATION_INDENT_SIZE" value="8" />
-          <option name="TAB_SIZE" value="4" />
-          <option name="USE_TAB_CHARACTER" value="false" />
-          <option name="SMART_TABS" value="false" />
-          <option name="LABEL_INDENT_SIZE" value="0" />
-          <option name="LABEL_INDENT_ABSOLUTE" value="false" />
-        </ADDITIONAL_INDENT_OPTIONS>
-        <ADDITIONAL_INDENT_OPTIONS fileType="sass">
-          <option name="INDENT_SIZE" value="2" />
-          <option name="CONTINUATION_INDENT_SIZE" value="8" />
-          <option name="TAB_SIZE" value="4" />
-          <option name="USE_TAB_CHARACTER" value="false" />
-          <option name="SMART_TABS" value="false" />
-          <option name="LABEL_INDENT_SIZE" value="0" />
-          <option name="LABEL_INDENT_ABSOLUTE" value="false" />
-        </ADDITIONAL_INDENT_OPTIONS>
-        <ADDITIONAL_INDENT_OPTIONS fileType="xml">
-          <option name="INDENT_SIZE" value="4" />
-          <option name="CONTINUATION_INDENT_SIZE" value="8" />
-          <option name="TAB_SIZE" value="4" />
-          <option name="USE_TAB_CHARACTER" value="false" />
-          <option name="SMART_TABS" value="false" />
-          <option name="LABEL_INDENT_SIZE" value="0" />
-          <option name="LABEL_INDENT_ABSOLUTE" value="false" />
-        </ADDITIONAL_INDENT_OPTIONS>
-        <ADDITIONAL_INDENT_OPTIONS fileType="yml">
-          <option name="INDENT_SIZE" value="2" />
-          <option name="CONTINUATION_INDENT_SIZE" value="8" />
-          <option name="TAB_SIZE" value="4" />
-          <option name="USE_TAB_CHARACTER" value="false" />
-          <option name="SMART_TABS" value="false" />
-          <option name="LABEL_INDENT_SIZE" value="0" />
-          <option name="LABEL_INDENT_ABSOLUTE" value="false" />
-        </ADDITIONAL_INDENT_OPTIONS>
-      </value>
-    </option>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </component>
-</project>
-
@@ -1,15 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="gen_docs" type="BashConfigurationType" factoryName="Bash">
-    <option name="INTERPRETER_OPTIONS" value="" />
-    <option name="INTERPRETER_PATH" value="/bin/bash" />
-    <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
-    <option name="PARENT_ENVS" value="true" />
-    <envs />
-    <module name="angular.js" />
-    <option name="SCRIPT_NAME" value="$PROJECT_DIR$/gen_docs.sh" />
-    <option name="PARAMETERS" value="" />
-    <RunnerSettings RunnerId="BashRunner" />
-    <ConfigurationWrapper RunnerId="BashRunner" />
-    <method />
-  </configuration>
-</component>
@@ -1,15 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="rake compile" type="BashConfigurationType" factoryName="Bash">
-    <option name="INTERPRETER_OPTIONS" value="" />
-    <option name="INTERPRETER_PATH" value="/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby" />
-    <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
-    <option name="PARENT_ENVS" value="true" />
-    <envs />
-    <module name="angular.js" />
-    <option name="SCRIPT_NAME" value="/usr/bin/rake" />
-    <option name="PARAMETERS" value="compile" />
-    <RunnerSettings RunnerId="BashRunner" />
-    <ConfigurationWrapper RunnerId="BashRunner" />
-    <method />
-  </configuration>
-</component>
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>
-
@@ -1,500 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" readonly="true" id="2e561485-a685-4e95-bea4-cabeda87d953" name="Default" comment="updated Rakefile to support packaging of the docs">
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/filters.js" afterPath="$PROJECT_DIR$/src/filters.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/docs/docs-scenario.html" afterPath="$PROJECT_DIR$/docs/docs-scenario.html" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
-    </list>
-    <ignored path=".idea/workspace.xml" />
-    <ignored path="angular.js.iws" />
-    <option name="TRACKING_ENABLED" value="true" />
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="ChangesViewManager" flattened_view="true" show_ignored="false" />
-  <component name="CreatePatchCommitExecutor">
-    <option name="PATCH_PATH" value="" />
-    <option name="REVERSE_PATCH" value="false" />
-  </component>
-  <component name="DaemonCodeAnalyzer">
-    <disable_hints />
-  </component>
-  <component name="FavoritesManager">
-    <favorites_list name="angular.js" />
-  </component>
-  <component name="FileColors" enabled="true" enabledForTabs="true" />
-  <component name="FileEditorManager">
-    <splitter split-orientation="horizontal" split-proportion="0.5">
-      <split-first>
-        <leaf>
-          <file leaf-file-name="filters.js" pinned="false" current="false" current-in-tab="false">
-            <entry file="file://$PROJECT_DIR$/src/filters.js">
-              <provider selected="true" editor-type-id="text-editor">
-                <state line="377" column="5" selection-start="12137" selection-end="12137" vertical-scroll-proportion="0.0">
-                  <folding />
-                </state>
-              </provider>
-            </entry>
-          </file>
-          <file leaf-file-name="docs-scenario.html" pinned="false" current="true" current-in-tab="true">
-            <entry file="file://$PROJECT_DIR$/docs/docs-scenario.html">
-              <provider selected="true" editor-type-id="text-editor">
-                <state line="3" column="26" selection-start="119" selection-end="119" vertical-scroll-proportion="0.039173014">
-                  <folding />
-                </state>
-              </provider>
-            </entry>
-          </file>
-          <file leaf-file-name="validators.js" pinned="false" current="false" current-in-tab="false">
-            <entry file="file://$PROJECT_DIR$/src/validators.js">
-              <provider selected="true" editor-type-id="text-editor">
-                <state line="54" column="69" selection-start="1564" selection-end="1611" vertical-scroll-proportion="0.0">
-                  <folding />
-                </state>
-              </provider>
-            </entry>
-          </file>
-          <file leaf-file-name="test.sh" pinned="false" current="false" current-in-tab="false">
-            <entry file="file://$PROJECT_DIR$/test.sh">
-              <provider selected="true" editor-type-id="text-editor">
-                <state line="3" column="13" selection-start="59" selection-end="59" vertical-scroll-proportion="0.0">
-                  <folding />
-                </state>
-              </provider>
-            </entry>
-          </file>
-          <file leaf-file-name="docs-scenario.html" pinned="false" current="false" current-in-tab="false">
-            <entry file="file://$PROJECT_DIR$/build/docs/docs-scenario.html">
-              <provider selected="true" editor-type-id="text-editor">
-                <state line="5" column="44" selection-start="259" selection-end="259" vertical-scroll-proportion="0.0">
-                  <folding />
-                </state>
-              </provider>
-            </entry>
-          </file>
-          <file leaf-file-name="index.html" pinned="false" current="false" current-in-tab="false">
-            <entry file="file://$PROJECT_DIR$/build/docs/index.html">
-              <provider selected="true" editor-type-id="text-editor">
-                <state line="24" column="7" selection-start="1033" selection-end="1033" vertical-scroll-proportion="0.0">
-                  <folding />
-                </state>
-              </provider>
-            </entry>
-          </file>
-          <file leaf-file-name="angular.filter.html.html" pinned="false" current="false" current-in-tab="false">
-            <entry file="file://$PROJECT_DIR$/build/docs/angular.filter.html.html">
-              <provider selected="true" editor-type-id="text-editor">
-                <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="0.0">
-                  <folding />
-                </state>
-              </provider>
-            </entry>
-          </file>
-        </leaf>
-      </split-first>
-      <split-second>
-        <leaf>
-          <file leaf-file-name="FiltersSpec.js" pinned="false" current="false" current-in-tab="true">
-            <entry file="file://$PROJECT_DIR$/test/FiltersSpec.js">
-              <provider selected="true" editor-type-id="text-editor">
-                <state line="89" column="20" selection-start="2996" selection-end="2996" vertical-scroll-proportion="0.7635783">
-                  <folding />
-                </state>
-              </provider>
-            </entry>
-          </file>
-        </leaf>
-      </split-second>
-    </splitter>
-  </component>
-  <component name="FindManager">
-    <FindUsagesManager>
-      <setting name="OPEN_NEW_TAB" value="false" />
-    </FindUsagesManager>
-  </component>
-  <component name="Git.Settings">
-    <option name="GIT_EXECUTABLE" value="/usr/local/git/bin/git" />
-    <option name="CHECKOUT_INCLUDE_TAGS" value="false" />
-  </component>
-  <component name="IdeDocumentHistory">
-    <option name="changedFiles">
-      <list>
-        <option value="$PROJECT_DIR$/lib/nodeserver/server.js" />
-        <option value="$PROJECT_DIR$/Rakefile" />
-        <option value="$PROJECT_DIR$/docs/collect.js" />
-        <option value="$PROJECT_DIR$/src/scenario/dsl.js" />
-        <option value="$PROJECT_DIR$/test.sh" />
-        <option value="$PROJECT_DIR$/test/FiltersSpec.js" />
-        <option value="$PROJECT_DIR$/src/filters.js" />
-        <option value="$PROJECT_DIR$/docs/docs-scenario.html" />
-      </list>
-    </option>
-  </component>
-  <component name="ProjectLevelVcsManager">
-    <OptionsSetting value="true" id="Add" />
-    <OptionsSetting value="true" id="Remove" />
-    <OptionsSetting value="true" id="Checkout" />
-    <OptionsSetting value="true" id="Update" />
-    <OptionsSetting value="true" id="Status" />
-    <OptionsSetting value="true" id="Edit" />
-    <ConfirmationsSetting value="0" id="Add" />
-    <ConfirmationsSetting value="0" id="Remove" />
-  </component>
-  <component name="ProjectReloadState">
-    <option name="STATE" value="0" />
-  </component>
-  <component name="ProjectView">
-    <navigator currentView="ProjectPane" proportions="" version="1" splitterProportion="0.5">
-      <flattenPackages />
-      <showMembers />
-      <showModules />
-      <showLibraryContents />
-      <hideEmptyPackages />
-      <abbreviatePackageNames />
-      <autoscrollToSource />
-      <autoscrollFromSource />
-      <sortByType />
-    </navigator>
-    <panes>
-      <pane id="ProjectPane">
-        <subPane>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="docs" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="build" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="build" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="pkg" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular-0.9.2-a838b3ef" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-          </PATH>
-          <PATH>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="angular.js" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="build" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-            <PATH_ELEMENT>
-              <option name="myItemId" value="docs" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
-            </PATH_ELEMENT>
-          </PATH>
-        </subPane>
-      </pane>
-      <pane id="Favorites" />
-      <pane id="Scope" />
-    </panes>
-  </component>
-  <component name="PropertiesComponent">
-    <property name="options.splitter.main.proportions" value="0.3" />
-    <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="recentsLimit" value="5" />
-    <property name="options.lastSelected" value="project.propVCSSupport.VCSs.Git" />
-    <property name="GoToClass.includeJavaFiles" value="false" />
-    <property name="options.splitter.details.proportions" value="0.2" />
-    <property name="options.searchVisible" value="true" />
-  </component>
-  <component name="RunManager" selected="Bash.gen_docs">
-    <configuration default="false" name="gen_docs.sh" type="BashConfigurationType" factoryName="Bash" temporary="true">
-      <option name="INTERPRETER_OPTIONS" value="" />
-      <option name="INTERPRETER_PATH" value="/bin/bash" />
-      <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
-      <option name="PARENT_ENVS" value="true" />
-      <envs />
-      <module name="angular.js" />
-      <option name="SCRIPT_NAME" value="$PROJECT_DIR$/gen_docs.sh" />
-      <option name="PARAMETERS" value="" />
-      <RunnerSettings RunnerId="BashRunner" />
-      <ConfigurationWrapper RunnerId="BashRunner" />
-      <method />
-    </configuration>
-    <configuration default="false" name="test.sh" type="BashConfigurationType" factoryName="Bash" temporary="true">
-      <option name="INTERPRETER_OPTIONS" value="" />
-      <option name="INTERPRETER_PATH" value="/bin/bash" />
-      <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
-      <option name="PARENT_ENVS" value="true" />
-      <envs />
-      <module name="angular.js" />
-      <option name="SCRIPT_NAME" value="$PROJECT_DIR$/test.sh" />
-      <option name="PARAMETERS" value="" />
-      <RunnerSettings RunnerId="BashRunner" />
-      <ConfigurationWrapper RunnerId="BashRunner" />
-      <method />
-    </configuration>
-    <configuration default="true" type="BashConfigurationType" factoryName="Bash">
-      <option name="INTERPRETER_OPTIONS" value="" />
-      <option name="INTERPRETER_PATH" value="/bin/bash" />
-      <option name="WORKING_DIRECTORY" value="" />
-      <option name="PARENT_ENVS" value="true" />
-      <envs />
-      <module name="angular.js" />
-      <option name="SCRIPT_NAME" value="" />
-      <option name="PARAMETERS" value="" />
-      <method />
-    </configuration>
-    <list size="4">
-      <item index="0" class="java.lang.String" itemvalue="Bash.gen_docs.sh" />
-      <item index="1" class="java.lang.String" itemvalue="Bash.rake compile" />
-      <item index="2" class="java.lang.String" itemvalue="Bash.gen_docs" />
-      <item index="3" class="java.lang.String" itemvalue="Bash.test.sh" />
-    </list>
-  </component>
-  <component name="ShelveChangesManager" show_recycled="false" />
-  <component name="SvnConfiguration" maxAnnotateRevisions="500">
-    <option name="USER" value="" />
-    <option name="PASSWORD" value="" />
-    <option name="LAST_MERGED_REVISION" />
-    <option name="UPDATE_RUN_STATUS" value="false" />
-    <option name="MERGE_DRY_RUN" value="false" />
-    <option name="MERGE_DIFF_USE_ANCESTRY" value="true" />
-    <option name="UPDATE_LOCK_ON_DEMAND" value="false" />
-    <option name="IGNORE_SPACES_IN_MERGE" value="false" />
-    <option name="DETECT_NESTED_COPIES" value="true" />
-    <option name="CHECK_NESTED_FOR_QUICK_MERGE" value="false" />
-    <option name="IGNORE_SPACES_IN_ANNOTATE" value="true" />
-    <option name="SHOW_MERGE_SOURCES_IN_ANNOTATE" value="true" />
-    <configuration useDefault="true">$PROJECT_DIR$/../../.subversion_IDEA</configuration>
-    <myIsUseDefaultProxy>false</myIsUseDefaultProxy>
-    <supportedVersion>125</supportedVersion>
-  </component>
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="2e561485-a685-4e95-bea4-cabeda87d953" name="Default" comment="" />
-      <created>1288738700234</created>
-      <updated>1288738700234</updated>
-    </task>
-    <servers />
-  </component>
-  <component name="ToolWindowManager">
-    <frame x="0" y="22" width="2560" height="1574" extended-state="6" />
-    <editor active="true" />
-    <layout>
-      <window_info id="Changes" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.32943603" sideWeight="0.0" order="7" side_tool="false" content_ui="tabs" />
-      <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
-      <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="true" content_ui="tabs" />
-      <window_info id="Dependency Viewer" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.18020505" sideWeight="0.66574967" order="0" side_tool="false" content_ui="tabs" />
-      <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
-      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.32943603" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
-      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
-      <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
-      <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
-      <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
-      <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
-      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
-      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
-    </layout>
-  </component>
-  <component name="VcsManagerConfiguration">
-    <option name="OFFER_MOVE_TO_ANOTHER_CHANGELIST_ON_PARTIAL_COMMIT" value="true" />
-    <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="true" />
-    <option name="PERFORM_UPDATE_IN_BACKGROUND" value="true" />
-    <option name="PERFORM_COMMIT_IN_BACKGROUND" value="true" />
-    <option name="PERFORM_EDIT_IN_BACKGROUND" value="true" />
-    <option name="PERFORM_CHECKOUT_IN_BACKGROUND" value="true" />
-    <option name="PERFORM_ADD_REMOVE_IN_BACKGROUND" value="true" />
-    <option name="PERFORM_ROLLBACK_IN_BACKGROUND" value="false" />
-    <option name="CHECK_LOCALLY_CHANGED_CONFLICTS_IN_BACKGROUND" value="false" />
-    <option name="ENABLE_BACKGROUND_PROCESSES" value="false" />
-    <option name="CHANGED_ON_SERVER_INTERVAL" value="60" />
-    <option name="FORCE_NON_EMPTY_COMMENT" value="false" />
-    <option name="LAST_COMMIT_MESSAGE" value="updated Rakefile to support packaging of the docs" />
-    <option name="MAKE_NEW_CHANGELIST_ACTIVE" value="true" />
-    <option name="OPTIMIZE_IMPORTS_BEFORE_PROJECT_COMMIT" value="false" />
-    <option name="CHECK_FILES_UP_TO_DATE_BEFORE_COMMIT" value="false" />
-    <option name="REFORMAT_BEFORE_PROJECT_COMMIT" value="false" />
-    <option name="REFORMAT_BEFORE_FILE_COMMIT" value="false" />
-    <option name="FILE_HISTORY_DIALOG_COMMENTS_SPLITTER_PROPORTION" value="0.8" />
-    <option name="FILE_HISTORY_DIALOG_SPLITTER_PROPORTION" value="0.5" />
-    <option name="ACTIVE_VCS_NAME" />
-    <option name="UPDATE_GROUP_BY_PACKAGES" value="false" />
-    <option name="UPDATE_GROUP_BY_CHANGELIST" value="false" />
-    <option name="SHOW_FILE_HISTORY_AS_TREE" value="false" />
-    <option name="FILE_HISTORY_SPLITTER_PROPORTION" value="0.6" />
-    <MESSAGE value="move the output of generation to build" />
-    <MESSAGE value="updated Rakefile to support packaging of the docs" />
-  </component>
-  <component name="XDebuggerManager">
-    <breakpoint-manager />
-  </component>
-  <component name="XSLT-Support.FileAssociations.UIState">
-    <PATH>
-      <PATH_ELEMENT>
-        <option name="myItemId" value="angular.js" />
-        <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
-      </PATH_ELEMENT>
-    </PATH>
-  </component>
-  <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/version.yaml">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="2" column="23" selection-start="50" selection-end="58" vertical-scroll-proportion="0.025559105" />
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/docs/collect.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="78" column="0" selection-start="2539" selection-end="2539" vertical-scroll-proportion="0.99680513">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/Rakefile">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="184" column="5" selection-start="5171" selection-end="5171" vertical-scroll-proportion="0.47603834">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/Resource.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="37" column="1" selection-start="1038" selection-end="1038" vertical-scroll-proportion="0.47284344">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/test/ResourceSpec.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="13" column="35" selection-start="399" selection-end="399" vertical-scroll-proportion="0.16613418" />
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/lib/nodeserver/server.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="37" column="0" selection-start="864" selection-end="864" vertical-scroll-proportion="0.4345048">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/scenario/dsl.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="109" column="11" selection-start="3010" selection-end="3010" vertical-scroll-proportion="-0.021905806">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/validators.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="54" column="69" selection-start="1564" selection-end="1611" vertical-scroll-proportion="0.0">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/test.sh">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="3" column="13" selection-start="59" selection-end="59" vertical-scroll-proportion="0.0">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/build/docs/docs-scenario.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="5" column="44" selection-start="259" selection-end="259" vertical-scroll-proportion="0.0">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/build/docs/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="24" column="7" selection-start="1033" selection-end="1033" vertical-scroll-proportion="0.0">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/build/docs/angular.filter.html.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="0.0">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/test/FiltersSpec.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="89" column="20" selection-start="2996" selection-end="2996" vertical-scroll-proportion="0.7635783">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/filters.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="377" column="5" selection-start="12137" selection-end="12137" vertical-scroll-proportion="0.0">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/docs/docs-scenario.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state line="3" column="26" selection-start="119" selection-end="119" vertical-scroll-proportion="0.039173014">
-          <folding />
-        </state>
-      </provider>
-    </entry>
-  </component>
-</project>
-
@@ -10,6 +10,16 @@
 			<arguments>
 			</arguments>
 		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.ui.externaltools.ExternalToolBuilder</name>
+			<triggers>auto,full,incremental,</triggers>
+			<arguments>
+				<dictionary>
+					<key>LaunchConfigHandle</key>
+					<value>&lt;project&gt;/.externalToolBuilders/docs.launch</value>
+				</dictionary>
+			</arguments>
+		</buildCommand>
 		<buildCommand>
 			<name>org.eclipse.ui.externaltools.ExternalToolBuilder</name>
 			<triggers>auto,full,incremental,</triggers>
@@ -26,7 +36,7 @@
 			<arguments>
 				<dictionary>
 					<key>LaunchConfigHandle</key>
-					<value>&lt;project&gt;/.externalToolBuilders/docs.launch</value>
+					<value>&lt;project&gt;/.externalToolBuilders/JSTD_perf.launch</value>
 				</dictionary>
 			</arguments>
 		</buildCommand>
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <classpath>
 	<classpathentry excluding="test/" kind="src" path="src"/>
-	<classpathentry kind="src" path="docs"/>
-	<classpathentry kind="src" path="src/test"/>
+	<classpathentry excluding="docs-data.js|docs-scenario.js" kind="src" path="docs"/>
 	<classpathentry excluding="test/" kind="src" path="test"/>
 	<classpathentry kind="src" path="test/test"/>
 	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.JRE_CONTAINER"/>
@@ -0,0 +1,16 @@
+#Mon Jan 24 10:31:47 PST 2011
+activeContentFilterList=*.makefile,makefile,*.Makefile,Makefile,Makefile.*,*.mk,MANIFEST.MF
+addNewLine=true
+convertActionOnSaave=AnyEdit.CnvrtTabToSpaces
+eclipse.preferences.version=1
+inActiveContentFilterList=
+javaTabWidthForJava=true
+org.eclipse.jdt.ui.editor.tab.width=2
+projectPropsEnabled=false
+removeTrailingSpaces=true
+replaceAllSpaces=false
+replaceAllTabs=false
+saveAndAddLine=true
+saveAndConvert=true
+saveAndTrim=true
+useModulo4Tabs=false
@@ -1,6 +1,6 @@
 The MIT License

-Copyright (c) 2010 Adam Abrons and Misko Hevery http://getangular.com
+Copyright (c) 2010-2012 Google, Inc. http://angularjs.org

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,5 +1,10 @@
-Angular
-======
+AngularJS
+=========
+
+* Web site: http://angularjs.org
+* Tutorial: http://docs.angularjs.org/#!/tutorial
+* API Docs: http://docs.angularjs.org
+* Developer Guide: http://docs.angularjs.org/#!/guide

 Compiling
 ---------
@@ -7,6 +12,8 @@ Compiling

 Running Tests
 -------------
-    rake server:start
-    rake test
+    ./server.sh                          # start the server
+    open http://localhost:9876/capture   # capture browser
+    ./test.sh                            # run all unit tests
+

@@ -1,43 +1,11 @@
+require 'yaml'
 include FileUtils

-ANGULAR = [
-  'src/Angular.js',
-  'src/JSON.js',
-  'src/Compiler.js',
-  'src/Scope.js',
-  'src/Injector.js',
-  'src/parser.js',
-  'src/Resource.js',
-  'src/Browser.js',
-  'src/sanitizer.js',
-  'src/jqLite.js',
-  'src/apis.js',
-  'src/filters.js',
-  'src/formatters.js',
-  'src/validators.js',
-  'src/services.js',
-  'src/directives.js',
-  'src/markups.js',
-  'src/widgets.js',
-  'src/AngularPublic.js',
-]
-
-ANGULAR_SCENARIO = [
-  'src/scenario/Scenario.js',
-  'src/scenario/Application.js',
-  'src/scenario/Describe.js',
-  'src/scenario/Future.js',
-  'src/scenario/ObjectModel.js',
-  'src/scenario/Describe.js',
-  'src/scenario/Runner.js',
-  'src/scenario/SpecRunner.js',
-  'src/scenario/dsl.js',
-  'src/scenario/matchers.js',
-  'src/scenario/output/Html.js',
-  'src/scenario/output/Json.js',
-  'src/scenario/output/Xml.js',
-  'src/scenario/output/Object.js',
-]
+content = File.open('angularFiles.js', 'r') {|f| f.read }
+files = eval(content.gsub(/\};(\s|\S)*/, '}').
+            gsub(/angularFiles = /, '').
+            gsub(/:/, '=>').
+            gsub(/\/\//, '#'));

 BUILD_DIR = 'build'

@@ -47,6 +15,16 @@ task :default => [:compile, :test]
 desc 'Init the build workspace'
 task :init do
  FileUtils.mkdir(BUILD_DIR) unless File.directory?(BUILD_DIR)
+
+  v = YAML::load( File.open( 'version.yaml' ) )
+  match = v['version'].match(/^([^-]*)(-snapshot)?$/)
+
+  NG_VERSION = Struct.new(:full, :major, :minor, :dot, :codename).
+                      new(match[1] + (match[2] ? ('-' + %x(git rev-parse HEAD)[0..7]) : ''),
+                          match[1].split('.')[0],
+                          match[1].split('.')[1],
+                          match[1].split('.')[2].sub(/\D+.*$/, ''),
+                          v['codename'])
 end


@@ -60,146 +38,158 @@ end
 desc 'Compile Scenario'
 task :compile_scenario => :init do

-  deps = [
-      'lib/jquery/jquery-1.4.2.js',
-      'src/scenario/angular.prefix',
-      ANGULAR,
-      ANGULAR_SCENARIO,
-      'src/scenario/angular.suffix',
-  ]
-
-  concat = 'cat ' + deps.flatten.join(' ')
-
-  File.open(path_to('angular-scenario.js'), 'w') do |f|
-    f.write(%x{#{concat}})
-    f.write(gen_css('css/angular.css') + "\n")
-    f.write(gen_css('css/angular-scenario.css'))
-  end
+  concat_file('angular-scenario.js', [
+      'lib/jquery/jquery.js',
+      'src/ngScenario/angular.prefix',
+      files['angularSrc'],
+      files['angularScenario'],
+      'src/ngScenario/angular.suffix',
+  ], gen_css('css/angular.css') + "\n" + gen_css('css/angular-scenario.css'))
 end

+desc 'Compile JSTD Scenario Adapter'
+task :compile_jstd_scenario_adapter => :init do

-desc 'Generate IE css js patch'
-task :generate_ie_compat => :init do
-  css = File.open('css/angular.css', 'r') {|f| f.read }
+  concat_file('jstd-scenario-adapter.js', [
+      'src/ngScenario/jstd-scenario-adapter/angular.prefix',
+      'src/ngScenario/jstd-scenario-adapter/Adapter.js',
+      'src/ngScenario/jstd-scenario-adapter/angular.suffix',
+  ])

-  # finds all css rules that contain backround images and extracts the rule name(s), content type of
-  # the image and base64 encoded image data
-  r = /\n([^\{\n]+)\s*\{[^\}]*background-image:\s*url\("data:([^;]+);base64,([^"]+)"\);[^\}]*\}/
-
-  images = css.scan(r)
-
-  # create a js file with multipart header containing the extracted images. the entire file *must*
-  # be CRLF (\r\n) delimited
-  File.open(path_to('angular-ie-compat.js'), 'w') do |f|
-    f.write("/*\r\n" +
-            "Content-Type: multipart/related; boundary=\"_\"\r\n" +
-            "\r\n")
-
-    images.each_index do |idx|
-      f.write("--_\r\n" +
-              "Content-Location:img#{idx}\r\n" +
-              "Content-Transfer-Encoding:base64\r\n" +
-              "\r\n" +
-              images[idx][2] + "\r\n")
-    end
-
-    f.write("--_--\r\n" +
-            "*/\r\n")
-
-    # generate a css string containing *background-image rules for IE that point to the mime type
-    # images in the header
-    cssString = ''
-    images.each_index do |idx|
-      cssString += "#{images[idx][0]}{*background-image:url(\"mhtml:' + jsUri + '!img#{idx}\")}"
-    end
-
-    # generate a javascript closure that contains a function which will append the generated css
-    # string as a stylesheet to the current html document
-    jsString = "(function(){ \r\n" +
-               "  var jsUri = document.location.href.replace(/\\/[^\/]+(#.*)?$/, '/') + " +
-               "              document.getElementById('ng-ie-compat').src; \r\n" +
-               "  var css = '#{cssString}' \r\n" +
-               "  var s = document.createElement('style'); \r\n" +
-               "  s.setAttribute('type', 'text/css'); \r\n" +
-               "  if (s.styleSheet) { \r\n" +
-               "    s.styleSheet.cssText = css; \r\n" +
-               "  } else { \r\n" +
-               "    s.appendChild(document.createTextNode(css)); \r\n" +
-               "  } \r\n" +
-               "  document.getElementsByTagName('head')[0].appendChild(s); \r\n" +
-               "})();\r\n"
-
-    f.write(jsString)
+  # TODO(vojta) use jstd configuration when implemented
+  # (instead of including jstd-adapter-config.js)
+  File.open(path_to('jstd-scenario-adapter-config.js'), 'w') do |f|
+    f.write("/**\r\n" +
+            " * Configuration for jstd scenario adapter \n */\n" +
+            "var jstdScenarioAdapter = {\n  relativeUrlPrefix: '/build/docs/'\n};\n")
  end
 end


 desc 'Compile JavaScript'
-task :compile => [:init, :compile_scenario, :generate_ie_compat] do
+task :compile => [:init, :compile_scenario, :compile_jstd_scenario_adapter] do

-  deps = [
-      'src/angular.prefix',
-      ANGULAR,
-      'src/angular.suffix',
-  ]
+  concat_file('angular.js', [
+        'src/angular.prefix',
+        files['angularSrc'],
+        'src/angular.suffix',
+      ], gen_css('css/angular.css', true))

-  File.open(path_to('angular.js'), 'w') do |f|
-    concat = 'cat ' + deps.flatten.join(' ')
-    f.write(%x{#{concat}})
-    f.write(gen_css('css/angular.css', true))
-  end
+  FileUtils.cp_r 'src/ngLocale', path_to('i18n')
+
+  concat_file('angular-loader.js', [
+      'src/loader.prefix',
+      'src/loader.js',
+      'src/loader.suffix'])
+
+
+  concat_module('sanitize', [
+      'src/ngSanitize/sanitize.js',
+      'src/ngSanitize/directive/ngBindHtml.js',
+      'src/ngSanitize/filter/linky.js'])
+
+  concat_module('resource', ['src/ngResource/resource.js'])
+  concat_module('cookies', ['src/ngCookies/cookies.js'])
+  concat_module('bootstrap', ['src/bootstrap/bootstrap.js'])
+  concat_module('bootstrap-prettify', ['src/bootstrap/bootstrap-prettify.js',
+                                       'src/bootstrap/google-prettify/prettify.js'],
+                               gen_css('src/bootstrap/google-prettify/prettify.css', true))
+
+
+  FileUtils.cp 'src/ngMock/angular-mocks.js', path_to('angular-mocks.js')
+
+  closure_compile('angular.js')
+  closure_compile('angular-cookies.js')
+  closure_compile('angular-loader.js')
+  closure_compile('angular-resource.js')
+  closure_compile('angular-sanitize.js')
+  closure_compile('angular-bootstrap.js')
+  closure_compile('angular-bootstrap-prettify.js')

-  %x(java -jar lib/compiler-closure/compiler.jar \
-        --compilation_level SIMPLE_OPTIMIZATIONS \
-        --js #{path_to('angular.js')} \
-        --js_output_file #{path_to('angular.min.js')})
 end


 desc 'Generate docs'
-task :docs do
-  `node docs/collect.js`
+task :docs => [:init] do
+  `node docs/src/gen-docs.js`
+  rewrite_file(path_to('docs/.htaccess')) do |content|
+    content.sub!('"NG_VERSION_FULL"', NG_VERSION.full)
+  end
 end


 desc 'Create angular distribution'
 task :package => [:clean, :compile, :docs] do
-  v = YAML::load( File.open( 'version.yaml' ) )['version']
-  match = v.match(/^([^-]*)(-snapshot)?$/)
-  version = match[1] + (match[2] ? ('-' + %x(git rev-parse HEAD)[0..7]) : '')
+  tarball = "angular-#{NG_VERSION.full}.tgz"

-  tarball = "angular-#{version}.tgz"
-
-  pkg_dir = path_to("pkg/angular-#{version}")
+  pkg_dir = path_to("pkg/angular-#{NG_VERSION.full}")
  FileUtils.rm_r(path_to('pkg'), :force => true)
  FileUtils.mkdir_p(pkg_dir)

-  ['test/angular-mocks.js',
-    path_to('angular.js'),
+  [ path_to('angular.js'),
    path_to('angular.min.js'),
-    path_to('angular-ie-compat.js'),
-    path_to('angular-scenario.js')
+    path_to('angular-loader.js'),
+    path_to('angular-loader.min.js'),
+    path_to('angular-bootstrap.js'),
+    path_to('angular-bootstrap.min.js'),
+    path_to('angular-bootstrap-prettify.js'),
+    path_to('angular-bootstrap-prettify.min.js'),
+    path_to('angular-mocks.js'),
+    path_to('angular-cookies.js'),
+    path_to('angular-cookies.min.js'),
+    path_to('angular-resource.js'),
+    path_to('angular-resource.min.js'),
+    path_to('angular-sanitize.js'),
+    path_to('angular-sanitize.min.js'),
+    path_to('angular-scenario.js'),
+    path_to('jstd-scenario-adapter.js'),
+    path_to('jstd-scenario-adapter-config.js'),
  ].each do |src|
-    dest = src.gsub(/^[^\/]+\//, '').gsub(/((\.min)?\.js)$/, "-#{version}\\1")
+    dest = src.gsub(/^.*\//, '').gsub(/((\.min)?\.js)$/, "-#{NG_VERSION.full}\\1")
    FileUtils.cp(src, pkg_dir + '/' + dest)
  end

-  FileUtils.cp_r path_to('docs'), "#{pkg_dir}/docs-#{version}"
+  FileUtils.cp_r path_to('i18n'), "#{pkg_dir}/i18n-#{NG_VERSION.full}"
+  FileUtils.cp_r path_to('docs'), "#{pkg_dir}/docs-#{NG_VERSION.full}"

-  File.open("#{pkg_dir}/docs-#{version}/index.html", File::RDWR) do |f|
-    text = f.read
-    f.rewind
-    f.write text.sub('angular.min.js', "angular-#{version}.min.js")
+  rewrite_file("#{pkg_dir}/angular-mocks-#{NG_VERSION.full}.js") do |content|
+    content.sub!('"NG_VERSION_FULL"', NG_VERSION.full)
  end

-  File.open("#{pkg_dir}/docs-#{version}/docs-scenario.html", File::RDWR) do |f|
-    text = f.read
-    f.rewind
-    f.write text.sub('angular-scenario.js', "angular-scenario-#{version}.js")
+
+  [ "#{pkg_dir}/docs-#{NG_VERSION.full}/index.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-nocache.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq-nocache.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-debug.html",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/index-jq-debug.html"
+  ].each do |src|
+    rewrite_file(src) do |content|
+      content.gsub!(/'angular(.*)\.js/, '\'angular\1-' + NG_VERSION.full + '.js')
+    end
  end

+
+  rewrite_file("#{pkg_dir}/docs-#{NG_VERSION.full}/docs-scenario.html") do |content|
+    content.sub!('angular-scenario.js', "angular-scenario-#{NG_VERSION.full}.js")
+  end
+
+
+  [ "#{pkg_dir}/docs-#{NG_VERSION.full}/appcache.manifest",
+    "#{pkg_dir}/docs-#{NG_VERSION.full}/appcache-offline.manifest"
+  ].each do |src|
+    rewrite_file(src) do |content|
+      content.sub!('../angular.min.js', "angular-#{NG_VERSION.full}.min.js").
+              sub!('/build/docs/', "/#{NG_VERSION.full}/docs-#{NG_VERSION.full}/")
+    end
+  end
+
+
  %x(tar -czf #{path_to(tarball)} -C #{path_to('pkg')} .)

+  FileUtils.cp path_to(tarball), pkg_dir
+  FileUtils.mv pkg_dir, path_to(['pkg', NG_VERSION.full])
+
  puts "Package created: #{path_to(tarball)}"
 end

@@ -268,7 +258,7 @@ def gen_css(cssFile, minify = false)
  css.gsub! /'/, "\\\\'"
  css.gsub! /\n/, "\\n"

-  return %Q{document.write('<style type="text/css">#{css}</style>');}
+  return %Q{angular.element(document).find('head').append('<style type="text/css">#{css}</style>');}
 end


@@ -278,3 +268,61 @@ end
 def path_to(filename)
  return File.join(BUILD_DIR, *filename)
 end
+
+
+def closure_compile(filename)
+  puts "Compiling #{filename} ..."
+
+  min_path = path_to(filename.gsub(/\.js$/, '.min.js'))
+
+  %x(java -jar lib/closure-compiler/compiler.jar \
+        --compilation_level SIMPLE_OPTIMIZATIONS \
+        --language_in ECMASCRIPT5_STRICT \
+        --js #{path_to(filename)} \
+        --js_output_file #{min_path})
+
+  rewrite_file(min_path) do |content|
+    content.sub!("'use strict';", "").
+            sub!(/\(function\([^)]*\)\{/, "\\0'use strict';")
+  end
+end
+
+
+def concat_file(filename, deps, footer='')
+  puts "Building #{filename} ..."
+  File.open(path_to(filename), 'w') do |f|
+    concat = 'cat ' + deps.flatten.join(' ')
+
+    content = %x{#{concat}}.
+              gsub('"NG_VERSION_FULL"', NG_VERSION.full).
+              gsub('"NG_VERSION_MAJOR"', NG_VERSION.major).
+              gsub('"NG_VERSION_MINOR"', NG_VERSION.minor).
+              gsub('"NG_VERSION_DOT"', NG_VERSION.dot).
+              gsub('"NG_VERSION_CODENAME"', NG_VERSION.codename).
+              gsub(/^\s*['"]use strict['"];?\s*$/, ''). # remove all file-specific strict mode flags
+              sub(/\(function\([^)]*\)\s*\{/, "\\0\n'use strict';") # add single strict mode flag
+
+    f.write(content)
+    f.write(footer)
+  end
+end
+
+
+def concat_module(name, files, footer='')
+  concat_file('angular-' + name + '.js', ['src/module.prefix'] + files + ['src/module.suffix'], footer)
+end
+
+
+def rewrite_file(filename)
+  File.open(filename, File::RDWR) do |f|
+    content = f.read
+
+    content = yield content
+
+    raise "File rewrite failed - No content!" unless content
+
+    f.truncate 0
+    f.rewind
+    f.write content
+  end
+end
@@ -0,0 +1,231 @@
+angularFiles = {
+  'angularSrc': [
+    'src/Angular.js',
+    'src/loader.js',
+    'src/AngularPublic.js',
+    'src/jqLite.js',
+    'src/apis.js',
+
+    'src/auto/injector.js',
+
+    'src/ng/anchorScroll.js',
+    'src/ng/browser.js',
+    'src/ng/cacheFactory.js',
+    'src/ng/compile.js',
+    'src/ng/controller.js',
+    'src/ng/document.js',
+    'src/ng/exceptionHandler.js',
+    'src/ng/interpolate.js',
+    'src/ng/location.js',
+    'src/ng/log.js',
+    'src/ng/parse.js',
+    'src/ng/q.js',
+    'src/ng/route.js',
+    'src/ng/routeParams.js',
+    'src/ng/rootScope.js',
+    'src/ng/sniffer.js',
+    'src/ng/window.js',
+    'src/ng/http.js',
+    'src/ng/httpBackend.js',
+    'src/ng/locale.js',
+    'src/ng/timeout.js',
+
+    'src/ng/filter.js',
+    'src/ng/filter/filter.js',
+    'src/ng/filter/filters.js',
+    'src/ng/filter/limitTo.js',
+    'src/ng/filter/orderBy.js',
+
+    'src/ng/directive/directives.js',
+    'src/ng/directive/a.js',
+    'src/ng/directive/booleanAttrs.js',
+    'src/ng/directive/form.js',
+    'src/ng/directive/input.js',
+    'src/ng/directive/ngBind.js',
+    'src/ng/directive/ngClass.js',
+    'src/ng/directive/ngCloak.js',
+    'src/ng/directive/ngController.js',
+    'src/ng/directive/ngCsp.js',
+    'src/ng/directive/ngEventDirs.js',
+    'src/ng/directive/ngInclude.js',
+    'src/ng/directive/ngInit.js',
+    'src/ng/directive/ngNonBindable.js',
+    'src/ng/directive/ngPluralize.js',
+    'src/ng/directive/ngRepeat.js',
+    'src/ng/directive/ngShowHide.js',
+    'src/ng/directive/ngStyle.js',
+    'src/ng/directive/ngSwitch.js',
+    'src/ng/directive/ngTransclude.js',
+    'src/ng/directive/ngView.js',
+    'src/ng/directive/script.js',
+    'src/ng/directive/select.js',
+    'src/ng/directive/style.js'
+  ],
+
+  'angularSrcModules': [
+    'src/ngCookies/cookies.js',
+    'src/ngResource/resource.js',
+    'src/ngSanitize/sanitize.js',
+    'src/ngSanitize/directive/ngBindHtml.js',
+    'src/ngSanitize/filter/linky.js',
+    'src/ngMock/angular-mocks.js',
+
+    'src/bootstrap/bootstrap.js'
+  ],
+
+  'angularScenario': [
+    'src/ngScenario/Scenario.js',
+    'src/ngScenario/Application.js',
+    'src/ngScenario/Describe.js',
+    'src/ngScenario/Future.js',
+    'src/ngScenario/ObjectModel.js',
+    'src/ngScenario/Describe.js',
+    'src/ngScenario/Runner.js',
+    'src/ngScenario/SpecRunner.js',
+    'src/ngScenario/dsl.js',
+    'src/ngScenario/matchers.js',
+    'src/ngScenario/output/Html.js',
+    'src/ngScenario/output/Json.js',
+    'src/ngScenario/output/Xml.js',
+    'src/ngScenario/output/Object.js'
+  ],
+
+  'angularTest': [
+    'test/testabilityPatch.js',
+    'test/matchers.js',
+    'test/ngScenario/*.js',
+    'test/ngScenario/output/*.js',
+    'test/ngScenario/jstd-scenario-adapter/*.js',
+    'test/*.js',
+    'test/auto/*.js',
+    'test/bootstrap/*.js',
+    'test/ng/*.js',
+    'test/ng/directive/*.js',
+    'test/ng/filter/*.js',
+    'test/ngCookies/*.js',
+    'test/ngResource/*.js',
+    'test/ngSanitize/*.js',
+    'test/ngSanitize/directive/*.js',
+    'test/ngSanitize/filter/*.js',
+    'test/ngMock/*.js'
+  ],
+
+  'jstd': [
+    'lib/jasmine/jasmine.js',
+    'lib/jasmine-jstd-adapter/JasmineAdapter.js',
+    'lib/jquery/jquery.js',
+    'test/jquery_remove.js',
+    '@angularSrc',
+    'src/publishExternalApis.js',
+    '@angularSrcModules',
+    '@angularScenario',
+    'src/ngScenario/jstd-scenario-adapter/Adapter.js',
+    '@angularTest',
+    'example/personalLog/*.js',
+    'example/personalLog/test/*.js'
+  ],
+
+  'jstdExclude': [
+    'test/jquery_alias.js',
+    'src/angular-bootstrap.js',
+    'src/ngScenario/angular-bootstrap.js'
+  ],
+
+  'jstdScenario': [
+    'build/angular-scenario.js',
+    'build/jstd-scenario-adapter-config.js',
+    'build/jstd-scenario-adapter.js',
+    'build/docs/docs-scenario.js'
+  ],
+
+  "jstdModules": [
+    'lib/jasmine/jasmine.js',
+    'lib/jasmine-jstd-adapter/JasmineAdapter.js',
+    'build/angular.js',
+    'src/ngMock/angular-mocks.js',
+    'src/ngCookies/cookies.js',
+    'src/ngResource/resource.js',
+    'src/ngSanitize/sanitize.js',
+    'src/ngSanitize/directive/ngBindHtml.js',
+    'src/ngSanitize/filter/linky.js',
+    'test/matchers.js',
+    'test/ngMock/*.js',
+    'test/ngCookies/*.js',
+    'test/ngResource/*.js',
+    'test/ngSanitize/*.js',
+    'test/ngSanitize/directive/*.js',
+    'test/ngSanitize/filter/*.js'
+  ],
+
+  'jstdPerf': [
+   'lib/jasmine/jasmine.js',
+   'lib/jasmine-jstd-adapter/JasmineAdapter.js',
+   '@angularSrc',
+   '@angularSrcModules',
+   'src/ngMock/angular-mocks.js',
+   'perf/data/*.js',
+   'perf/testUtils.js',
+   'perf/*.js'
+  ],
+
+  'jstdPerfExclude': [
+    'src/ng/angular-bootstrap.js',
+    'src/ngScenario/angular-bootstrap.js'
+  ],
+
+  'jstdJquery': [
+    'lib/jasmine/jasmine.js',
+    'lib/jasmine-jstd-adapter/JasmineAdapter.js',
+    'lib/jquery/jquery.js',
+    'test/jquery_alias.js',
+    '@angularSrc',
+    'src/publishExternalApis.js',
+    '@angularSrcModules',
+    '@angularScenario',
+    'src/ngScenario/jstd-scenario-adapter/Adapter.js',
+    '@angularTest',
+    'example/personalLog/*.js',
+
+    'example/personalLog/test/*.js'
+  ],
+
+  'jstdJqueryExclude': [
+    'src/angular-bootstrap.js',
+    'src/ngScenario/angular-bootstrap.js',
+    'test/jquery_remove.js'
+  ]
+};
+
+// Execute only in slim-jim
+if (typeof JASMINE_ADAPTER !== 'undefined') {
+  // Testacular config
+  var mergedFiles = [];
+  angularFiles.jstd.forEach(function(file) {
+    // replace @ref
+    var match = file.match(/^\@(.*)/);
+    if (match) {
+      var deps = angularFiles[match[1]];
+      if (!deps) {
+        console.log('No dependency:' + file)
+      }
+      mergedFiles = mergedFiles.concat(deps);
+    } else {
+      mergedFiles.push(file);
+    }
+  });
+
+  files = [JASMINE, JASMINE_ADAPTER];
+
+  mergedFiles.forEach(function(file){
+    if (/jstd|jasmine/.test(file)) return;
+    files.push(file);
+  });
+
+
+  exclude = angularFiles.jstdExclude;
+
+  autoWatch = true;
+  autoWatchInterval = 1;
+  logLevel = LOG_INFO;
+  logColors = true;
+}
@@ -0,0 +1,205 @@
+#!/usr/bin/env node
+
+// TODO(vojta): pre-commit hook for validating messages
+// TODO(vojta): report errors, currently Q silence everything which really sucks
+
+var child = require('child_process');
+var fs = require('fs');
+var util = require('util');
+var q = require('qq');
+
+var GIT_LOG_CMD = 'git log --grep="%s" -E --format=%s %s..HEAD';
+var GIT_TAG_CMD = 'git describe --tags --abbrev=0';
+
+var HEADER_TPL = '<a name="%s"></a>\n# %s (%s)\n\n';
+var LINK_ISSUE = '[#%s](https://github.com/angular/angular.js/issues/%s)';
+var LINK_COMMIT = '[%s](https://github.com/angular/angular.js/commit/%s)';
+
+var EMPTY_COMPONENT = '$$';
+var MAX_SUBJECT_LENGTH = 80;
+
+
+var warn = function() {
+  console.log('WARNING:', util.format.apply(null, arguments));
+};
+
+
+var parseRawCommit = function(raw) {
+  if (!raw) return null;
+
+  var lines = raw.split('\n');
+  var msg = {}, match;
+
+  msg.hash = lines.shift();
+  msg.subject = lines.shift();
+  msg.closes = [];
+  msg.breaks = [];
+
+  lines.forEach(function(line) {
+    match = line.match(/Closes\s#(\d+)/);
+    if (match) msg.closes.push(parseInt(match[1]));
+  });
+  
+  match = raw.match(/BREAKING CHANGE:([\s\S]*)/);
+  if (match) {
+    console.log('found!!!')
+    msg.breaks.push(match[1]);
+  }
+  
+
+  msg.body = lines.join('\n');
+  match = msg.subject.match(/^(.*)\((.*)\)\:\s(.*)$/);
+
+  if (!match || !match[1] || !match[3]) {
+    warn('Incorrect message: %s %s', msg.hash, msg.subject);
+    return null;
+  }
+
+  if (match[3].length > MAX_SUBJECT_LENGTH) {
+    warn('Too long subject: %s %s', msg.hash, msg.subject);
+    match[3] = match[3].substr(0, MAX_SUBJECT_LENGTH);
+  }
+
+  msg.type = match[1];
+  msg.component = match[2];
+  msg.subject = match[3];
+
+  return msg;
+};
+
+
+var linkToIssue = function(issue) {
+  return util.format(LINK_ISSUE, issue, issue);
+};
+
+
+var linkToCommit = function(hash) {
+  return util.format(LINK_COMMIT, hash.substr(0, 8), hash);
+};
+
+
+var currentDate = function() {
+  var now = new Date();
+  var pad = function(i) {
+    return ('0' + i).substr(-2);
+  };
+
+  return util.format('%d-%s-%s', now.getFullYear(), pad(now.getMonth() + 1), pad(now.getDate()));
+};
+
+
+var printSection = function(stream, title, section) {
+  var components = Object.getOwnPropertyNames(section).sort();
+
+  if (!components.length) return;
+
+  stream.write(util.format('\n## %s\n\n', title));
+
+  components.forEach(function(name) {
+    var prefix = '-';
+    var nested = section[name].length > 1;
+
+    if (name !== EMPTY_COMPONENT) {
+      if (nested) {
+        stream.write(util.format('- **%s:**\n', name));
+        prefix = '  -';
+      } else {
+        prefix = util.format('- **%s:**', name);
+      }
+    }
+
+    section[name].forEach(function(commit) {
+      stream.write(util.format('%s %s (%s', prefix, commit.subject, linkToCommit(commit.hash)));
+      if (commit.closes.length) {
+        stream.write(', closes ' + commit.closes.map(linkToIssue).join(', '));
+      }
+      stream.write(')\n');
+    });
+  });
+
+  stream.write('\n');
+};
+
+
+var readGitLog = function(grep, from) {
+  var deffered = q.defer();
+
+  // TODO(vojta): if it's slow, use spawn and stream it instead
+  child.exec(util.format(GIT_LOG_CMD, grep, '%H%n%s%n%b%n==END==', from), function(code, stdout, stderr) {
+    var commits = [];
+
+    stdout.split('\n==END==\n').forEach(function(rawCommit) {
+      var commit = parseRawCommit(rawCommit);
+      if (commit) commits.push(commit);
+    });
+
+    deffered.resolve(commits);
+  });
+
+  return deffered.promise;
+};
+
+
+var writeChangelog = function(stream, commits, version) {
+  var sections = {
+    fix: {},
+    feat: {},
+    breaks: {}
+  };
+
+  sections.breaks[EMPTY_COMPONENT] = [];
+
+  commits.forEach(function(commit) {
+    var section = sections[commit.type];
+    var component = commit.component || EMPTY_COMPONENT;
+
+    if (section) {
+      section[component] = section[component] || [];
+      section[component].push(commit);
+    }
+
+    commit.breaks.forEach(function(breakMsg) {
+      sections.breaks[EMPTY_COMPONENT].push({
+        subject: breakMsg,
+        hash: commit.hash,
+        closes: []
+      });
+    });
+  });
+
+  stream.write(util.format(HEADER_TPL, version, version, currentDate()));
+  printSection(stream, 'Bug Fixes', sections.fix);
+  printSection(stream, 'Features', sections.feat);
+  printSection(stream, 'Breaking Changes', sections.breaks);
+}
+
+
+var getPreviousTag = function() {
+  var deffered = q.defer();
+  child.exec(GIT_TAG_CMD, function(code, stdout, stderr) {
+    if (code) deffered.reject('Cannot get the previous tag.');
+    else deffered.resolve(stdout.replace('\n', ''));
+  });
+  return deffered.promise;
+};
+
+
+var generate = function(version, file) {
+  getPreviousTag().then(function(tag) {
+    console.log('Reading git log since', tag);
+    readGitLog('^fix|^feat|Breaks', tag).then(function(commits) {
+      console.log('Parsed', commits.length, 'commits');
+      console.log('Generating changelog to', file || 'stdout', '(', version, ')');
+      writeChangelog(file ? fs.createWriteStream(file) : process.stdout, commits, version);
+    });
+  });
+};
+
+
+// publish for testing
+exports.parseRawCommit = parseRawCommit;
+
+// hacky start if not run by jasmine :-D
+if (process.argv.join('').indexOf('jasmine-node') === -1) {
+  generate(process.argv[2], process.argv[3]);
+}
@@ -0,0 +1,43 @@
+describe('changelog.js', function() {
+  var ch = require('./changelog');
+
+  describe('parseRawCommit', function() {
+    it('should parse raw commit', function() {
+      var msg = ch.parseRawCommit(
+          '9b1aff905b638aa274a5fc8f88662df446d374bd\n' +
+          'feat(scope): broadcast $destroy event on scope destruction\n' +
+          'perf testing shows that in chrome this change adds 5-15% overhead\n' +
+          'when destroying 10k nested scopes where each scope has a $destroy listener\n');
+
+      expect(msg.type).toBe('feat');
+      expect(msg.hash).toBe('9b1aff905b638aa274a5fc8f88662df446d374bd');
+      expect(msg.subject).toBe('broadcast $destroy event on scope destruction');
+      expect(msg.body).toBe('perf testing shows that in chrome this change adds 5-15% overhead\n' +
+          'when destroying 10k nested scopes where each scope has a $destroy listener\n')
+      expect(msg.component).toBe('scope');
+    });
+
+
+    it('should parse closed issues', function() {
+      var msg = ch.parseRawCommit(
+          '13f31602f396bc269076ab4d389cfd8ca94b20ba\n' +
+          'feat(ng-list): Allow custom separator\n' +
+          'bla bla bla\n\n' +
+          'Closes #123\nCloses #25\n');
+
+      expect(msg.closes).toEqual([123, 25]);
+    });
+
+
+    it('should parse breaking changes', function() {
+      var msg = ch.parseRawCommit(
+          '13f31602f396bc269076ab4d389cfd8ca94b20ba\n' +
+          'feat(ng-list): Allow custom separator\n' +
+          'bla bla bla\n\n' +
+          'Breaks first breaking change\nsomething else\n' +
+          'Breaks another breaking change\n');
+
+      expect(msg.breaks).toEqual(['first breaking change', 'another breaking change']);
+    });
+  });
+});
@@ -0,0 +1,80 @@
+<a name="v1.0.0rc3"></a>
+# v1.0.0rc3 (2012-03-27)
+
+
+## Bug Fixes
+
+- **$compile:**
+  - create new (isolate) scopes for directives on root elements ([5390fb37](https://github.com/angular/angular.js/commit/5390fb37d2c01937922613fc57df4986af521787), closes [#817](https://github.com/angular/angular.js/issues/817))
+  - don't touch static element attributes ([9cb2195e](https://github.com/angular/angular.js/commit/9cb2195e61a78e99020ec19d687a221ca88b5900))
+  - Merge interpolated css class when replacing an element ([f49eaf8b](https://github.com/angular/angular.js/commit/f49eaf8bf2df5f4e0e82d6c89e849a4f82c8d414))
+- **$http:**
+  - don't send Content-Type header when no data ([1a5bebd9](https://github.com/angular/angular.js/commit/1a5bebd927ecd22f9c34617642fdf58fe3f62efb), closes [#749](https://github.com/angular/angular.js/issues/749))
+- **$log:**
+  - avoid console.log.apply calls in IE ([15213ec2](https://github.com/angular/angular.js/commit/15213ec212769837cb2b7e781ffc5bfd598d27ca), closes [#805](https://github.com/angular/angular.js/issues/805))
+- **$resource:**
+  - support escaping of ':' in resource url ([6d6f8753](https://github.com/angular/angular.js/commit/6d6f875345e01f2c6c63ef95164f6f39e923da15))
+- **compiler:**
+  - allow transclusion of root elements ([9918b748](https://github.com/angular/angular.js/commit/9918b748be01266eb10db39d51b4d3098d54ab66))
+- **e2e runner:**
+  - fix typo that caused errors on IE8 ([ee5a5352](https://github.com/angular/angular.js/commit/ee5a5352fd4b94cedee6ef20d4bf2d43ce77e00b), closes [#806](https://github.com/angular/angular.js/issues/806))
+- **forEach:**
+  - should ignore prototypically inherited properties ([8d7e6948](https://github.com/angular/angular.js/commit/8d7e6948496ff26ef1da8854ba02fcb8eebfed61), closes [#813](https://github.com/angular/angular.js/issues/813))
+- **forms:**
+  - Remove double registering of form ([1faafa31](https://github.com/angular/angular.js/commit/1faafa31582c4e9413f48dc7d12f5b681f9fe9fd))
+  - Set ng-valid/ng-invalid correctly ([08bfea18](https://github.com/angular/angular.js/commit/08bfea183a850b29da270eac47f80b598cbe600f))
+- **init:**
+  - use jQuery#ready for init if available ([cb2ad9ab](https://github.com/angular/angular.js/commit/cb2ad9abf24e6f855cc749efe3155bd7987ece9d), closes [#818](https://github.com/angular/angular.js/issues/818))
+- **json:**
+  - added support for iso8061 timezone ([5ac14f63](https://github.com/angular/angular.js/commit/5ac14f633a69f49973b5512780c6ec7752405967))
+- **matchers.toHaveClass:**
+  - Correct reference to angular.mock.dump ([f701ce08](https://github.com/angular/angular.js/commit/f701ce08f9d63be05fc3b92f57ad473e1e749b2d))
+- **ng-switch:**
+  - properly destroy child scopes ([2315d9b3](https://github.com/angular/angular.js/commit/2315d9b3610994b36c44e4a97fb1427d59471ce8))
+- **ngDocSpec:**
+  - fix broken tests ([53b6f522](https://github.com/angular/angular.js/commit/53b6f522a56eea314cbd084816e08f24b2c7879f))
+- **ngForm:**
+  - alias name||ngForm ([823adb23](https://github.com/angular/angular.js/commit/823adb231995e917bc060bfa49453e2a96bac2b6))
+- **ngRepeat:**
+  - correct variable reference in error message ([935c1018](https://github.com/angular/angular.js/commit/935c1018da05dbf3124b2dd33619c4a3c82d7a2a))
+- **ngView:**
+  - controller not published ([21e74c2d](https://github.com/angular/angular.js/commit/21e74c2d2e8e985b23711785287feb59965cbd90))
+- **q:**
+  - resolve all of nothing to nothing ([ac75079e](https://github.com/angular/angular.js/commit/ac75079e2113949d5d64adbcf23d56f3cf295d41))
+- **select:**
+  - multiselect failes to update view on selection insert ([6ecac8e7](https://github.com/angular/angular.js/commit/6ecac8e71a84792a434d21db2c245b3648c55f18))
+
+
+## Features
+
+- **$compile:**
+  - do not interpolate boolean attributes, rather evaluate them ([a08cbc02](https://github.com/angular/angular.js/commit/a08cbc02e78e789a66e9af771c410e8ad1646e25))
+- **$controller:**
+  - support controller registration via $controllerProvider ([d54dfecb](https://github.com/angular/angular.js/commit/d54dfecb00fba41455536c5ddd55310592fdaf84))
+- **$route:**
+  - when matching consider trailing slash as optional ([a4fe51da](https://github.com/angular/angular.js/commit/a4fe51da3ba0dc297ecd389e230d6664f250c9a6), closes [#784](https://github.com/angular/angular.js/issues/784))
+- **assertArgFn:**
+  - should support array annotated fns ([4b8d9260](https://github.com/angular/angular.js/commit/4b8d926062eb4d4483555bdbdec4656f585ab40b))
+- **http:**
+  - added params parameter ([73c85930](https://github.com/angular/angular.js/commit/73c8593077155a9f2e8ef42efd4c497eba0bef4f))
+- **injector:**
+  - infer _foo_ as foo ([f13dd339](https://github.com/angular/angular.js/commit/f13dd3393dfb7a33565c9360342c193bc0bddcb6))
+- **input.radio:**
+  - Allow value attribute to be interpolated ([ade6c452](https://github.com/angular/angular.js/commit/ade6c452753145c84884d17027a7865bf4b34b0c))
+- **jqLite:**
+  - make injector() and scope() work with the document object ([5fdab52d](https://github.com/angular/angular.js/commit/5fdab52dd7c269f99839f4fa6b5854d9548269fa))
+  - add .controller() method ([6c5a05ad](https://github.com/angular/angular.js/commit/6c5a05ad49a1e083570c3dfe331403398f899dbe))
+- **ngValue:**
+  - allow radio inputs to have non string values ([09e175f0](https://github.com/angular/angular.js/commit/09e175f02cca0f4a295fd0c9b980cd8f432e722b), closes [#816](https://github.com/angular/angular.js/issues/816))
+- **scope:**
+  - broadcast $destroy event on scope destruction ([9b1aff90](https://github.com/angular/angular.js/commit/9b1aff905b638aa274a5fc8f88662df446d374bd))
+- **scope.$eval:**
+  - Allow passing locals to the expression ([192ff61f](https://github.com/angular/angular.js/commit/192ff61f5d61899e667c6dbce4d3e6e399429d8b))
+
+
+## Breaking Changes
+
+- boolean attrs are evaluated rather than interpolated ([a08cbc02](https://github.com/angular/angular.js/commit/a08cbc02e78e789a66e9af771c410e8ad1646e25))
+- ng-bind-attr directive removed ([55027132](https://github.com/angular/angular.js/commit/55027132f3d57e5dcf94683e6e6bd7b0aae0087d))
+- any app that depends on this service and its fallback to Modernizr, please ([aaedefb9](https://github.com/angular/angular.js/commit/aaedefb92e6bec6626e173e5155072c91471596a))
+
@@ -0,0 +1,5 @@
+#!/bin/bash
+
+rake compile
+gzip -c < build/angular.min.js > build/angular.min.js.gzip
+ls -l build/angular.min.*
@@ -1,86 +1,10 @@
@charset "UTF-8";

-.ng-format-negative {
-  color: red;
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
+.ng-cloak, .x-ng-cloak {
+  display: none;
 }

-.ng-exception {
-  border: 2px solid #FF0000;
-  font-family: "Courier New", Courier, monospace;
-  font-size: smaller;
-}
-
-.ng-validation-error {
-  border: 2px solid #FF0000;
-}
-
-
-/*****************
- * TIP
- *****************/
-#ng-callout {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  font-size: 13px;
-  font-weight: normal;
-  font-family: Verdana, Arial, Helvetica, sans-serif;
-  vertical-align: baseline;
-  background: transparent;
-  text-decoration: none;
-}
-
-#ng-callout .ng-arrow-left{
-  background-image: url("data:image/gif;base64,R0lGODlhCwAXAKIAAMzMzO/v7/f39////////wAAAAAAAAAAACH5BAUUAAQALAAAAAALABcAAAMrSLoc/AG8FeUUIN+sGebWAnbKSJodqqlsOxJtqYooU9vvk+vcJIcTkg+QAAA7");
-  background-repeat: no-repeat;
-  background-position: left top;
-  position: absolute;
-  z-index:101;
-  left:-12px;
-  height:23px;
-  width:10px;
-  top:-3px;
-}
-
-#ng-callout .ng-arrow-right{
-  background-image: url("data:image/gif;base64,R0lGODlhCwAXAKIAAMzMzO/v7/f39////////wAAAAAAAAAAACH5BAUUAAQALAAAAAALABcAAAMrCLTcoM29yN6k9socs91e5X3EyJloipYrO4ohTMqA0Fn2XVNswJe+H+SXAAA7");
-  background-repeat: no-repeat;
-  background-position: left top;
-  position: absolute;
-  z-index:101;
-  height:23px;
-  width:11px;
-    top:-2px;
-}
-
-#ng-callout {
-  position: absolute;
-  z-index:100;
-  border: 2px solid #CCCCCC;
-  background-color: #fff;
-}
-
-#ng-callout .ng-content{
-  padding:10px 10px 10px 10px;
-  color:#333333;
-}
-
-#ng-callout .ng-title{
-  background-color: #CCCCCC;
-  text-align: left;
-  padding-left: 8px;
-  padding-bottom: 5px;
-  padding-top: 2px;
-  font-weight:bold;
-}
-
-
-/*****************
- * indicators
- *****************/
-.ng-input-indicator-wait {
-  background-image: url("data:image/png;base64,R0lGODlhEAAQAPQAAP///wAAAPDw8IqKiuDg4EZGRnp6egAAAFhYWCQkJKysrL6+vhQUFJycnAQEBDY2NmhoaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==");
-  background-position: right;
-  background-repeat: no-repeat;
+ng\:form {
+  display: block;
 }
@@ -1,66 +0,0 @@
-function noop(){}
-
-function chain(delegateFn, explicitDone){
-  var onDoneFn = noop;
-  var onErrorFn = noop;
-  var waitForCount = 1;
-  delegateFn = delegateFn || noop;
-  var stackError = new Error('capture stack');
-
-  function decrementWaitFor() {
-    waitForCount--;
-    if (waitForCount == 0)
-      onDoneFn();
-  }
-
-  function self(){
-    try {
-      return delegateFn.apply(self, arguments);
-    } catch (error) {
-      self.error(error);
-    } finally {
-      if (!explicitDone)
-        decrementWaitFor();
-    }
-  };
-  self.onDone = function(callback){
-    onDoneFn = callback;
-    return self;
-  };
-  self.onError = function(callback){
-    onErrorFn = callback;
-    return self;
-  };
-  self.waitFor = function(callback){
-    if (waitForCount == 0)
-      throw new Error("Can not wait on already called callback.");
-    waitForCount++;
-    return chain(callback).onDone(decrementWaitFor).onError(self.error);
-  };
-
-  self.waitMany = function(callback){
-    if (waitForCount == 0)
-      throw new Error("Can not wait on already called callback.");
-    waitForCount++;
-    return chain(callback, true).onDone(decrementWaitFor).onError(self.error);
-  };
-
-  self.done = function(callback){
-    decrementWaitFor();
-  };
-
-  self.error = function(error) {
-    var stack = stackError.stack.split(/\n\r?/).splice(2);
-    var nakedStack = [];
-    stack.forEach(function(frame){
-      if (!frame.match(/callback\.js:\d+:\d+\)$/))
-        nakedStack.push(frame);
-    });
-    error.stack = error.stack + '\nCalled from:\n' + nakedStack.join('\n');
-    onErrorFn(error);
-  };
-
-  return self;
-}
-
-exports.chain = chain;
@@ -1,210 +0,0 @@
-var fs       = require('fs'),
-    spawn    = require('child_process').spawn,
-    mustache = require('../lib/mustache'),
-    callback = require('./callback'),
-    markdown = require('../lib/markdown');
-
-var documentation = {
-    section:{},
-    all:[]
-};
-
-var SRC_DIR = "docs/";
-var OUTPUT_DIR = "build/docs/";
-
-var work = callback.chain(function () {
-  console.log('Parsing Angular Reference Documentation');
-  mkdirPath(OUTPUT_DIR, work.waitFor(function(){
-    findJsFiles('src', work.waitMany(function(file) {
-      //console.log('reading', file, '...');
-      findNgDoc(file, work.waitMany(function(doc) {
-        parseNgDoc(doc);
-        if (doc.ngdoc) {
-          delete doc.raw.text;
-          var section = documentation.section;
-          (section[doc.ngdoc] = section[doc.ngdoc] || []).push(doc);
-          documentation.all.push(doc);
-          console.log('Found:', doc.ngdoc + ':' + doc.shortName);
-          mergeTemplate(
-                    doc.ngdoc + '.template',
-                    doc.name + '.html', doc, work.waitFor());
-        }
-      }));
-    }));
-  }));
-}).onError(function(err){
-  console.log('ERROR:', err.stack || err);
-}).onDone(function(){
-  mergeTemplate('docs-data.js', 'docs-data.js', {JSON:JSON.stringify(documentation)}, callback.chain());
-  mergeTemplate('docs-scenario.js', 'docs-scenario.js', documentation, callback.chain());
-  copy('docs-scenario.html', callback.chain());
-  copy('index.html', callback.chain());
-  mergeTemplate('docs.js', 'docs.js', documentation, callback.chain());
-  mergeTemplate('wiki_widgets.css', 'wiki_widgets.css', documentation, callback.chain());
-  mergeTemplate('wiki_widgets.js', 'wiki_widgets.js', documentation, callback.chain());
-  console.log('DONE');
-});
-work();
-////////////////////
-
-function noop(){}
-function mkdirPath(path, callback) {
-  var parts = path.split(/\//);
-  path = '.';
-  (function next(){
-    if (parts.length) {
-      path += '/' + parts.shift();
-      fs.mkdir(path, 0777, next);
-    } else {
-      callback();
-    }
-  })();
-}
-
-function copy(name, callback){
-  fs.readFile(SRC_DIR + name, callback.waitFor(function(err, content){
-    if (err) return this.error(err);
-    fs.writeFile(OUTPUT_DIR + name, content, callback);
-  }));
-}
-
-function mergeTemplate(template, output, doc, callback){
-  fs.readFile(SRC_DIR + template,
-    callback.waitFor(function(err, template){
-      if (err) return this.error(err);
-      var content = mustache.to_html(template.toString(), doc);
-      fs.writeFile(OUTPUT_DIR + output, content, callback);
-    }));
-}
-
-
-function unknownTag(doc, name) {
-  var error = "[" + doc.raw.file + ":" + doc.raw.line + "]: unknown tag: " + name;
-  console.log(error);
-  throw new Error(error);
-}
-
-function valueTag(doc, name, value) {
-  doc[name] = value;
-}
-
-function escapedHtmlTag(doc, name, value) {
-  doc[name] = value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-
-function markdownTag(doc, name, value) {
-  doc[name] = markdown.toHTML(value);
-}
-
-var TAG = {
-  ngdoc: valueTag,
-  example: escapedHtmlTag,
-  scenario: valueTag,
-  namespace: valueTag,
-  css: valueTag,
-  see: valueTag,
-  'function': valueTag,
-  description: markdownTag,
-  returns: markdownTag,
-  name: function(doc, name, value) {
-    doc.name = value;
-    doc.shortName  = value.split(/\./).pop();
-  },
-  param: function(doc, name, value){
-    doc.param = doc.param || [];
-    doc.paramRest = doc.paramRest || [];
-    var match = value.match(/^({([^\s=]+)(=)?}\s*)?([^\s]+|\[(\S+)+=([^\]]+)\])\s+(.*)/);
-    if (match) {
-      var param = {
-          type: match[2],
-          name: match[4] || match[5],
-          'default':match[6],
-          description:match[7]};
-      doc.param.push(param);
-      if (!doc.paramFirst) {
-        doc.paramFirst = param;
-      } else {
-        doc.paramRest.push(param);
-      }
-    } else {
-      throw "[" + doc.raw.file + ":" + doc.raw.line +
-            "]: @param must be in format '{type} name=value description' got: " + value;
-    }
-  }
-};
-
-function parseNgDoc(doc){
-  var atName;
-  var atText;
-  var match;
-  doc.raw.text.split(/\n/).forEach(function(line, lineNumber){
-    if (match = line.match(/^@(\w+)(\s+(.*))?/)) {
-      // we found @name ...
-      // if we have existing name
-      if (atName) {
-        (TAG[atName] || unknownTag)(doc, atName, atText.join('\n'));
-      }
-      atName = match[1];
-      atText = [];
-      if(match[3]) atText.push(match[3]);
-    } else {
-      if (atName) {
-        atText.push(line);
-      } else {
-        // ignore
-      }
-    }
-  });
-  if (atName) {
-    (TAG[atName] || unknownTag)(doc, atName, atText.join('\n'));
-  }
-}
-
-function findNgDoc(file, callback) {
-  fs.readFile(file, callback.waitFor(function(err, content){
-    var lines = content.toString().split(/\n\r?/);
-    var doc;
-    var match;
-    var inDoc = false;
-    lines.forEach(function(line, lineNumber){
-      lineNumber++;
-      // is the comment starting?
-      if (!inDoc && (match = line.match(/^\s*\/\*\*\s*(.*)$/))) {
-        line = match[1];
-        inDoc = true;
-        doc = {raw:{file:file, line:lineNumber, text:[]}};
-      }
-      // are we done?
-      if (inDoc && line.match(/\*\//)) {
-        doc.raw.text = doc.raw.text.join('\n');
-        doc.raw.text = doc.raw.text.replace(/^\n/, '');
-        if (doc.raw.text.match(/@ngdoc/))
-          callback(doc);
-        doc = null;
-        inDoc = false;
-      }
-      // is the comment add text
-      if (inDoc){
-        doc.raw.text.push(line.replace(/^\s*\*\s?/, ''));
-      }
-    });
-    callback.done();
-  }));
-}
-
-function findJsFiles(dir, callback){
-  fs.readdir(dir, callback.waitFor(function(err, files){
-    if (err) return this.error(err);
-    files.forEach(function(file){
-      var path = dir + '/' + file;
-      fs.lstat(path, callback.waitFor(function(err, stat){
-        if (err) return this.error(err);
-        if (stat.isDirectory())
-          findJsFiles(path, callback.waitMany(callback));
-        else if (/\.js$/.test(path))
-          callback(path);
-      }));
-    });
-    callback.done();
-  }));
-}
@@ -0,0 +1,7 @@
+@ngdoc overview
+@name API Reference
+@description
+
+Use the API Refference documentation when you need more information about a specific feature. Check out
+{@link guide/ Developer Guide} for AngularJS concepts. If you are new to AngularJS we recomend the
+{@link tutorial/ Tutorial}.
@@ -0,0 +1,5 @@
+@ngdoc overview
+@name ng
+@description
+
+The `ng` is an angular module which contains all of the core angular services.
@@ -0,0 +1,127 @@
+@ngdoc overview
+@name Cookbook: Advanced Form
+@description
+
+Here we extend the basic form example to include common features such as reverting, dirty state
+detection, and preventing invalid form submission.
+
+<doc:example>
+<doc:source>
+   <script>
+   function UserForm($scope) {
+     var master = {
+       name: 'John Smith',
+       address:{
+         line1: '123 Main St.',
+         city:'Anytown',
+         state:'AA',
+         zip:'12345'
+       },
+       contacts:[
+         {type:'phone', value:'1(234) 555-1212'}
+       ]
+     };
+
+     $scope.state = /^\w\w$/;
+     $scope.zip = /^\d\d\d\d\d$/;
+
+     $scope.cancel = function() {
+       $scope.form = angular.copy(master);
+     };
+
+     $scope.save = function() {
+       master = $scope.form;
+       $scope.cancel();
+     };
+
+     $scope.addContact = function() {
+       $scope.form.contacts.push({type:'', value:''});
+     };
+
+     $scope.removeContact = function(contact) {
+       var contacts = $scope.form.contacts;
+       for (var i = 0, ii = contacts.length; i < ii; i++) {
+         if (contact === contacts[i]) {
+           contacts.splice(i, 1);
+         }
+       }
+     };
+
+     $scope.isCancelDisabled = function() {
+       return angular.equals(master, $scope.form);
+     };
+
+     $scope.isSaveDisabled = function() {
+       return $scope.myForm.$invalid || angular.equals(master, $scope.form);
+     };
+
+     $scope.cancel();
+   }
+   </script>
+   <div ng-controller="UserForm">
+
+     <form name="myForm">
+
+       <label>Name:</label><br/>
+       <input type="text" ng-model="form.name" required/> <br/><br/>
+
+       <label>Address:</label> <br/>
+       <input type="text" ng-model="form.address.line1" size="33" required/> <br/>
+       <input type="text" ng-model="form.address.city" size="12" required/>,
+       <input type="text" ng-model="form.address.state" size="2"
+              ng-pattern="state" required/>
+       <input type="text" ng-model="form.address.zip" size="5"
+              ng-pattern="zip" required/><br/><br/>
+
+       <label>Contacts:</label>
+       [ <a href="" ng-click="addContact()">add</a> ]
+       <div ng-repeat="contact in form.contacts">
+         <select ng-model="contact.type">
+           <option>email</option>
+           <option>phone</option>
+           <option>pager</option>
+           <option>IM</option>
+         </select>
+         <input type="text" ng-model="contact.value" required/>
+          [ <a href="" ng-click="removeContact(contact)">X</a> ]
+       </div>
+     <button ng-click="cancel()" ng-disabled="isCancelDisabled()">Cancel</button>
+     <button ng-click="save()" ng-disabled="isSaveDisabled()">Save</button>
+   </form>
+
+   <hr/>
+   Debug View:
+   <pre>form={{form}}</pre>
+   </div>
+</doc:source>
+<doc:scenario>
+  it('should enable save button', function() {
+    expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
+    input('form.name').enter('');
+    expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
+    input('form.name').enter('change');
+    expect(element(':button:contains(Save)').attr('disabled')).toBeFalsy();
+    element(':button:contains(Save)').click();
+    expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
+  });
+  it('should enable cancel button', function() {
+    expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy();
+    input('form.name').enter('change');
+    expect(element(':button:contains(Cancel)').attr('disabled')).toBeFalsy();
+    element(':button:contains(Cancel)').click();
+    expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy();
+    expect(element(':input[ng\\:model="form.name"]').val()).toEqual('John Smith');
+  });
+</doc:scenario>
+</doc:example>
+
+
+#Things to notice
+
+* Cancel & save buttons are only enabled if the form is dirty — there is something to cancel or
+save.
+* Save button is only enabled if there are no validation errors on the form.
+* Cancel reverts the form changes back to original state.
+* Save updates the internal model of the form.
+* Debug view shows the two models. One presented to the user form and the other being the pristine
+copy master.
@@ -0,0 +1,63 @@
+@ngdoc overview
+@name Cookbook: Resources - Buzz
+@description
+
+External resources are URLs that provide JSON data, which are then rendered with the help of
+templates. angular has a resource factory that can be used to give names to the URLs and then
+attach behavior to them. For example you can use the
+{@link http://code.google.com/apis/buzz/v1/getting_started.html#background-operations| Google Buzz
+API}
+to retrieve Buzz activity and comments.
+
+<doc:example>
+ <doc:source>
+    <script>
+    BuzzController.$inject = ['$scope', '$resource'];
+    function BuzzController($scope, $resource) {
+     $scope.userId = 'googlebuzz';
+     $scope.Activity = $resource(
+      'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId/:comments',
+      {alt: 'json', callback: 'JSON_CALLBACK'},
+      { get:     {method: 'JSONP', params: {visibility: '@self'}},
+        replies: {method: 'JSONP', params: {visibility: '@self', comments: '@comments'}}
+      });
+    }
+    BuzzController.prototype = {
+     fetch: function() {
+      $scope.activities = $scope.Activity.get({userId:this.userId});
+     },
+     expandReplies: function(activity) {
+      activity.replies = $scope.Activity.replies({userId: this.userId, activityId: activity.id});
+     }
+    };
+    </script>
+    <div ng-controller="BuzzController">
+     <input ng-model="userId"/>
+     <button ng-click="fetch()">fetch</button>
+     <hr/>
+     <div class="buzz" ng-repeat="item in activities.data.items">
+      <h1 style="font-size: 15px;">
+       <img ng-src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
+       <a ng-href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
+       <a href ng-click="expandReplies(item)" style="float: right;">
+        Expand replies: {{item.links.replies[0].count}}
+       </a>
+      </h1>
+      {{item.object.content | html}}
+      <div class="reply" ng-repeat="reply in item.replies.data.items" style="margin-left: 20px;">
+       <img ng-src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
+       <a ng-href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
+       {{reply.content | html}}
+      </div>
+     </div>
+    </div>
+ </doc:source>
+ <doc:scenario>
+  xit('fetch buzz and expand', function() {
+    element(':button:contains(fetch)').click();
+    expect(repeater('div.buzz').count()).toBeGreaterThan(0);
+    element('.buzz a:contains(Expand replies):first').click();
+    expect(repeater('div.reply').count()).toBeGreaterThan(0);
+  });
+ </doc:scenario>
+</doc:example>
@@ -0,0 +1,151 @@
+@ngdoc overview
+@name Cookbook: Deep Linking
+@description
+
+Deep linking allows you to encode the state of the application in the URL so that it can be
+bookmarked and the application can be restored from the URL to the same state.
+
+While angular does not force you to deal with bookmarks in any particular way, it has services
+which make the common case described here very easy to implement.
+
+# Assumptions
+
+Your application consists of a single HTML page which bootstraps the application. We will refer
+to this page as the chrome.
+Your application is divided into several screens (or views) which the user can visit. For example,
+the home screen, settings screen, details screen, etc. For each of these screens, we would like to
+assign a URL so that it can be bookmarked and later restored. Each of these screens will be
+associated with a controller which define the screen's behavior. The most common case is that the
+screen will be constructed from an HTML snippet, which we will refer to as the partial. Screens can
+have multiple partials, but a single partial is the most common construct. This example makes the
+partial boundary visible using a blue line.
+
+You can make a routing table which shows which URL maps to which partial view template and which
+controller.
+
+# Example
+
+In this example we have a simple app which consist of two screens:
+
+* Welcome: url `welcome` Show the user contact information.
+* Settings: url `settings` Show an edit screen for user contact information.
+
+<example module="deepLinking" deps="angular-sanitize.js">
+ <file name="script.js">
+   angular.module('deepLinking', ['ngSanitize'])
+     .config(function($routeProvider) {
+        $routeProvider.
+          when("/welcome",  {templateUrl:'welcome.html',  controller:WelcomeCntl}).
+          when("/settings", {templateUrl:'settings.html', controller:SettingsCntl});
+     });
+
+   AppCntl.$inject = ['$scope', '$route']
+   function AppCntl($scope, $route) {
+    $scope.$route = $route;
+
+    // initialize the model to something useful
+    $scope.person = {
+     name:'anonymous',
+     contacts:[{type:'email', url:'anonymous@example.com'}]
+    };
+   }
+
+   function WelcomeCntl($scope) {
+    $scope.greet = function() {
+     alert("Hello " + $scope.person.name);
+    };
+   }
+
+   function SettingsCntl($scope, $location) {
+    $scope.cancel = function() {
+     $scope.form = angular.copy($scope.person);
+    };
+
+    $scope.save = function() {
+     angular.copy($scope.form, $scope.person);
+     $location.path('/welcome');
+    };
+
+    $scope.cancel();
+   }
+ </file>
+ <file name="style.css">
+   [ng-view] {
+     border: 1px solid blue;
+     margin: 0;
+     padding:1em;
+   }
+
+   .partial-info {
+      background-color: blue;
+      color: white;
+      padding: 3px;
+    }
+ </file>
+ <file name="index.html">
+    <div ng-controller="AppCntl">
+      <h1>Your App Chrome</h1>
+      [ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ]
+      <hr/>
+      <span class="partial-info">
+        Partial: {{$route.current.template}}
+      </span>
+      <div ng-view></div>
+      <small>Your app footer </small>
+    </div>
+ </file>
+ <file name="settings.html">
+   <label>Name:</label>
+   <input type="text" ng:model="form.name" required>
+
+   <div ng:repeat="contact in form.contacts">
+     <select ng:model="contact.type">
+       <option>url</option>
+       <option>email</option>
+       <option>phone</option>
+     </select>
+     <input type="text" ng:model="contact.url">
+     [ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ]
+   </div>
+   <div>
+     [ <a href="" ng:click="form.contacts.$add()">add</a> ]
+   </div>
+
+   <button ng:click="cancel()">Cancel</button>
+   <button ng:click="save()">Save</button>
+ </file>
+ <file name="welcome.html">
+   Hello {{person.name}},
+   <div>
+     Your contact information:
+     <div ng:repeat="contact in person.contacts">{{contact.type}}:
+       <span ng-bind-html="contact.url|linky"></span>
+     </div>
+   </div>
+ </file>
+ <file name="scenario.js">
+   it('should navigate to URL', function() {
+     element('a:contains(Welcome)').click();
+     expect(element('[ng-view]').text()).toMatch(/Hello anonymous/);
+     element('a:contains(Settings)').click();
+     input('form.name').enter('yourname');
+     element(':button:contains(Save)').click();
+     element('a:contains(Welcome)').click();
+     expect(element('[ng-view]').text()).toMatch(/Hello yourname/);
+   });
+ </file>
+</example>
+
+
+
+# Things to notice
+
+* Routes are defined in the `AppCntl` class. The initialization of the controller causes the
+  initialization of the {@link api/ng.$route $route} service with the proper URL
+  routes.
+* The  {@link api/ng.$route $route} service then watches the URL and instantiates the
+  appropriate controller when the URL changes.
+* The  {@link api/ng.directive:ngView ngView} widget loads the
+  view when the URL changes. It also sets the view scope to the newly instantiated controller.
+* Changing the URL is sufficient to change the controller and view. It makes no difference whether
+  the URL is changed programatically or by the user.
@@ -0,0 +1,114 @@
+@ngdoc overview
+@name Cookbook: Form
+@description
+
+A web application's main purpose is to present and gather data. For this reason angular strives
+to make both of these operations trivial. This example shows off how you can build a simple form to
+allow a user to enter data.
+
+
+<doc:example>
+ <doc:source>
+  <script>
+    function FormController($scope) {
+      var user = $scope.user = {
+        name: 'John Smith',
+        address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
+        contacts:[{type:'phone', value:'1(234) 555-1212'}]
+      };
+      $scope.state = /^\w\w$/;
+      $scope.zip = /^\d\d\d\d\d$/;
+
+      $scope.addContact = function() {
+         user.contacts.push({type:'email', value:''});
+      };
+
+      $scope.removeContact = function(contact) {
+        for (var i = 0, ii = user.contacts.length; i < ii; i++) {
+          if (contact === user.contacts[i]) {
+            $scope.user.contacts.splice(i, 1);
+          }
+        }
+      };
+    }
+  </script>
+  <div ng-controller="FormController" class="example">
+
+    <label>Name:</label><br>
+    <input type="text" ng-model="user.name" required/> <br><br>
+
+    <label>Address:</label><br>
+    <input type="text" ng-model="user.address.line1" size="33" required> <br>
+    <input type="text" ng-model="user.address.city" size="12" required>,
+    <input type="text" ng-model="user.address.state"
+           ng-pattern="state" size="2" required>
+    <input type="text" ng-model="user.address.zip" size="5"
+           ng-pattern="zip" required><br><br>
+
+    <label>Phone:</label>
+    [ <a href="" ng-click="addContact()">add</a> ]
+    <div ng-repeat="contact in user.contacts">
+      <select ng-model="contact.type">
+        <option>email</option>
+        <option>phone</option>
+        <option>pager</option>
+        <option>IM</option>
+      </select>
+      <input type="text" ng-model="contact.value" required>
+       [ <a href="" ng-click="removeContact(contact)">X</a> ]
+    </div>
+    <hr/>
+    Debug View:
+    <pre>user={{user | json}}</pre>
+  </div>
+
+ </doc:source>
+ <doc:scenario>
+  it('should show debug', function() {
+    expect(binding('user')).toMatch(/John Smith/);
+  });
+  it('should add contact', function() {
+    using('.example').element('a:contains(add)').click();
+    using('.example div:last').input('contact.value').enter('you@example.org');
+    expect(binding('user')).toMatch(/\(234\) 555\-1212/);
+    expect(binding('user')).toMatch(/you@example.org/);
+  });
+
+  it('should remove contact', function() {
+    using('.example').element('a:contains(X)').click();
+    expect(binding('user')).not().toMatch(/\(234\) 555\-1212/);
+  });
+
+  it('should validate zip', function() {
+    expect(using('.example').
+      element(':input[ng\\:model="user.address.zip"]').
+      prop('className')).not().toMatch(/ng-invalid/);
+    using('.example').input('user.address.zip').enter('abc');
+    expect(using('.example').
+      element(':input[ng\\:model="user.address.zip"]').
+      prop('className')).toMatch(/ng-invalid/);
+  });
+
+  it('should validate state', function() {
+    expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className'))
+      .not().toMatch(/ng-invalid/);
+    using('.example').input('user.address.state').enter('XXX');
+    expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className'))
+      .toMatch(/ng-invalid/);
+  });
+ </doc:scenario>
+</doc:example>
+
+
+# Things to notice
+
+* The user data model is initialized {@link api/ng.directive:ngController controller} and is
+  available in the {@link api/ng.$rootScope.Scope scope} with the initial data.
+* For debugging purposes we have included a debug view of the model to better understand what
+  is going on.
+* The {@link api/ng.directive:input input directives} simply refer
+  to the model and are data-bound.
+* The inputs validate. (Try leaving them blank or entering non digits in the zip field)
+* In your application you can simply read from or write to the model and the form will be updated.
+* By clicking the 'add' link you are adding new items into the `user.contacts` array which are then
+  reflected in the view.
@@ -0,0 +1,39 @@
+@ngdoc overview
+@name Cookbook: Hello World
+@description
+
+<doc:example>
+ <doc:source>
+  <script>
+    function HelloCntl($scope) {
+      $scope.name = 'World';
+    }
+  </script>
+  <div ng-controller="HelloCntl">
+    Your name: <input type="text" ng-model="name" value="World"/>
+    <hr/>
+    Hello {{name}}!
+  </div>
+ </doc:source>
+ <doc:scenario>
+   it('should change the binding when user enters text', function() {
+     expect(binding('name')).toEqual('World');
+     input('name').enter('angular');
+     expect(binding('name')).toEqual('angular');
+   });
+ </doc:scenario>
+</doc:example>
+
+# Things to notice
+
+Take a look through the source and note:
+
+* The script tag that {@link guide/bootstrap bootstraps} the angular environment.
+* The text {@link api/ng.directive:input input form control} which is
+  bound to the greeting name text.
+* No need for listener registration and event firing on change events.
+* The implicit presence of the `name` variable which is in the root {@link api/ng.$rootScope.Scope scope}.
+* The double curly brace `{{markup}}`, which binds the name variable to the greeting text.
+* The concept of {@link guide/dev_guide.templates.databinding data binding}, which reflects any
+changes to the
+  input field in the greeting text.
@@ -0,0 +1,58 @@
+@ngdoc overview
+@name Cookbook
+@description
+
+Welcome to the angular cookbook. Here we will show you typical uses of angular by example.
+
+
+# Hello World
+
+{@link helloworld Hello World}: The simplest possible application that demonstrates the
+classic Hello World!
+
+
+# Basic Form
+
+{@link form Basic Form}: Displaying forms to the user for editing is the bread and butter
+of web applications. Angular makes forms easy through bidirectional data binding.
+
+
+# Advanced Form
+
+{@link advancedform Advanced Form}: Taking the form example to the next level and
+providing advanced features such as  dirty detection, form reverting and submit disabling if
+validation errors exist.
+
+
+# Model View Controller
+
+{@link mvc MVC}: Tic-Tac-Toe: Model View Controller (MVC) is a time-tested design pattern
+to separate the behavior (JavaScript controller) from the presentation (HTML view). This
+separation aids in maintainability and testability of your project.
+
+
+# Multi-page App and Deep Linking
+
+{@link deeplinking Deep Linking}: An AJAX application never navigates away from the
+first page it loads. Instead, it changes the DOM of its single page. Eliminating full-page reloads
+is what makes AJAX apps responsive, but it creates a problem in that apps with a single URL
+prevent you from emailing links to a particular screen within your application.
+
+Deep linking tries to solve this by changing the URL anchor without reloading a page, thus
+allowing you to send links to specific screens in your app.
+
+
+# Services
+
+{@link api/ng Services}: Services are long lived objects in your applications that are
+available across controllers. A collection of useful services are pre-bundled with angular but you
+will likely add your own. Services are initialized using dependency injection, which resolves the
+order of initialization. This safeguards you from the perils of global state (a common way to
+implement long lived objects).
+
+
+# External Resources
+
+{@link buzz Resources}: Web applications must be able to communicate with the external
+services to get and update data. Resources are the abstractions of external URLs which are
+specially tailored to angular data binding.
@@ -0,0 +1,128 @@
+@ngdoc overview
+@name Cookbook: MVC
+@description
+
+MVC allows for a clean an testable separation between the behavior (controller) and the view
+(HTML template). A Controller is just a JavaScript class which is grafted onto the scope of the
+view. This makes it very easy for the controller and the view to share the model.
+
+The model is a set of objects and primitives that are referenced from the Scope ($scope) object.
+This makes it very easy to test the controller in isolation since one can simply instantiate the
+controller and test without a view, because there is no connection between the controller and the
+view.
+
+
+<doc:example>
+  <doc:source>
+    <script>
+    function TicTacToeCntl($scope, $location) {
+      $scope.cellStyle= {
+        'height': '20px',
+        'width': '20px',
+        'border': '1px solid black',
+        'text-align': 'center',
+        'vertical-align': 'middle',
+        'cursor': 'pointer'
+      };
+
+      $scope.reset = function() {
+        $scope.board = [
+          ['', '', ''],
+          ['', '', ''],
+          ['', '', '']
+        ];
+        $scope.nextMove = 'X';
+        $scope.winner = '';
+        setUrl();
+      };
+
+      $scope.dropPiece = function(row, col) {
+        if (!$scope.winner && !$scope.board[row][col]) {
+          $scope.board[row][col] = $scope.nextMove;
+          $scope.nextMove = $scope.nextMove == 'X' ? 'O' : 'X';
+          setUrl();
+        }
+      };
+
+      $scope.reset();
+      $scope.$watch(function() { return $location.search().board;}, readUrl);
+
+      function setUrl() {
+        var rows = [];
+        angular.forEach($scope.board, function(row) {
+          rows.push(row.join(','));
+        });
+        $location.search({board: rows.join(';') + '/' + $scope.nextMove});
+      }
+
+      function grade() {
+        var b = $scope.board;
+        $scope.winner =
+          row(0) || row(1) || row(2) ||
+          col(0) || col(1) || col(2) ||
+          diagonal(-1) || diagonal(1);
+        function row(row) { return same(b[row][0], b[row][1], b[row][2]);}
+        function col(col) { return same(b[0][col], b[1][col], b[2][col]);}
+        function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);}
+        function same(a, b, c) { return (a==b && b==c) ? a : '';};
+      }
+
+      function readUrl(value) {
+        if (value) {
+          value = value.split('/');
+          $scope.nextMove = value[1];
+          angular.forEach(value[0].split(';'), function(row, col){
+            $scope.board[col] = row.split(',');
+          });
+          grade();
+        }
+      }
+    }
+    </script>
+
+    <h3>Tic-Tac-Toe</h3>
+    <div ng-controller="TicTacToeCntl">
+    Next Player: {{nextMove}}
+    <div class="winner" ng-show="winner">Player {{winner}} has won!</div>
+      <table class="board">
+        <tr ng-repeat="row in board" style="height:15px;">
+          <td ng-repeat="cell in row" ng-style="cellStyle"
+              ng-click="dropPiece($parent.$index, $index)">{{cell}}</td>
+        </tr>
+      </table>
+      <button ng-click="reset()">reset board</button>
+    </div>
+  </doc:source>
+  <doc:scenario>
+    it('should play a game', function() {
+     piece(1, 1);
+     expect(binding('nextMove')).toEqual('O');
+     piece(3, 1);
+     expect(binding('nextMove')).toEqual('X');
+     piece(1, 2);
+     piece(3, 2);
+     piece(1, 3);
+     expect(element('.winner').text()).toEqual('Player X has won!');
+    });
+
+    function piece(row, col) {
+      element('.board tr:nth-child('+row+') td:nth-child('+col+')').click();
+    }
+  </doc:scenario>
+</doc:example>
+
+
+# Things to notice
+
+* The controller is defined in JavaScript and has no reference to the rendering logic.
+* The controller is instantiated by <angular/> and injected into the view.
+* The controller can be instantiated in isolation (without a view) and the code will still execute.
+This makes it very testable.
+* The HTML view is a projection of the model. In the above example, the model is stored in the
+board variable.
+* All of the controller's properties (such as board and nextMove) are available to the view.
+* Changing the model changes the view.
+* The view can call any controller function.
+* In this example, the `setUrl()` and `readUrl()` functions copy the game state to/from the URL's
+hash so the browser's back button will undo game steps. See deep-linking. This example calls {@link
+api/ng.$rootScope.Scope#$watch $watch()} to set up a listener that invokes `readUrl()` when needed.
@@ -0,0 +1,108 @@
+@ngdoc overview
+@name Developer Guide: Bootstrap
+@description
+
+# Overview
+
+This page explains the Angular initialization process and how you can manually initialize Angular
+if necessary.
+
+
+# Angular `<script>` Tag
+
+This example shows the recommended path for integrating Angular with what we call automatic
+initialization.
+
+
+<pre>
+<!doctype html>
+<html xmlns:ng="http://angularjs.org" ng-app>
+  <body>
+    ...
+    <script src="angular.js">
+  </body>
+</html>
+</pre>
+
+  * Place the `script` tag at the buttom of the page. Placing script tags at the end of the page
+    impreves app load time becouse the HTML loading is not blocked by loading of the `angular.js`
+    script. You can get the latest bits from {@link http://code.angularjs.org}. Please don't link
+    your production code to this URL, as it will expose a security hole on your site. For
+    experimental development linking to our site is fine.
+    * Choose: `angular-[version].js` for a human-readable file, suitable for development and
+      debugging.
+    * Choose: `angular-[version].min.js` for a compressed and obfuscated file, suitable for use in
+      production.
+  * Place `ng-app` to the root of your application, typically on the `<html>` tag if you want
+    anugular to auto-bootstrap your application.
+
+        <html ng-app>
+
+  * If you chose to use the old style directive syntax `ng:` then include xml-namespace in `html`
+    to make IE happy. (This is here for historical resons, and we no longer recomend use of
+    `ng:`.)
+
+        <html xmlns:ng="http://angularjs.org">
+
+
+
+# Automatic Initialization
+
+Angular initializes automatically upon `DOMContentLoaded` event, at which point angular looks for
+the {@link api/ng.directive:ngApp `ng-app`} directive which
+designates your application root. If {@link
+api/ng.directive:ngApp `ng-app`} directive is found then Angular
+will:
+
+  * load the {@link guide/module module} associated with the directive.
+  * create the application {@link api/AUTO.$injector injector}
+  * compile the DOM treating the {@link api/ng.directive:ngApp
+    `ng-app`} directive as the root of the compilation. This allows you to tell it to treat only a
+    portion of the DOM as an Angular application.
+
+
+<pre>
+<!doctype html>
+<html ng-app="optionalModuleName">
+  <body>
+    I can add: {{ 1+2 }}.
+    <script src="angular.js"></script>
+  </body>
+</html>
+</pre>
+
+
+
+# Manual Initialization
+
+
+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 the Angular compiles a page.
+
+
+Here is an example of manually initializing Angular. The example is equivalent to using the {@link
+api/ng.directive:ngApp ng-app} directive.
+
+<pre>
+<!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.bootstrap(document);
+       });
+    </script>
+  </body>
+</html>
+</pre>
+
+This sequence that your code should follow:
+
+  1. After the page and all of the code is loaded, find the root of the HTML template, which is
+  typically the root of the document.
+
+  2. Call {@link api/angular.bootstrap} to {@link compiler compile} the template into an
+  executable, bi-directionally bound application.
@@ -0,0 +1,143 @@
+@ngdoc overview
+@name Developer Guide: HTML Compiler
+@description
+
+# Overview
+
+Angular's {@link api/ng.$compile HTML compiler} allows the developer to teach the
+browser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute
+and even create new HTML element or attributes with custom behavior. Angular calls these behavior
+extensions {@link api/ng.$compileProvider.directive directives}.
+
+HTML has a lot of constructs for formatting the HTML for static documents in declarative fashion.
+For example if something needs to be centered, there is no need to provide instructions to the
+browser how the window size needs to be divided in half so that center is found, and that this
+center needs to be aligned with the text's center. Simply add `align="center"` attribute to any
+element to achieve the desired behavior. Such is the power of declarative language.
+
+But the declarative language is also limited, since it does not allow you to teach the browser new
+syntax. For example there is no easy way to get the browser to align the text at 1/3 the position
+instead of 1/2. What is needed is a way to teach browser new HTML syntax.
+
+Angular comes pre-bundled with common directives which are useful for building any app. We also
+expect that you will create directives that are specific to your app. These extension become a
+Domain Specific Language for building your application.
+
+All of this compilation takes place in the web browser; no server side or pre-compilation step is
+involved.
+
+
+# Compiler
+
+Compiler is an angular service which traverses the DOM looking for attributes. The compilation
+process happens into two phases.
+
+  1. **Compile:** traverse the DOM and collect all of the directives. The result is a linking
+  function.
+
+  2. **Link:** combine the directives with a scope and produce a live view. Any changes in the
+  scope model are reflected in the view, and any user interactions with the view are reflected
+  in the scope model. Making the scope model a single source of truth.
+
+Some directives such {@link api/ng.directive:ngRepeat
+`ng-repeat`} clone DOM elements once for each item in collection. Having a compile and link phase
+improves performance since the cloned template only needs to be compiled once, and then linked
+once for each clone instance.
+
+
+# Directive
+
+Directive is a behavior which should be triggered when specific HTML constructs are encountered in
+compilation process. The directives can be placed in element names, attributes, class names, as
+well as comments. Here are some equivalent examples of invoking {@link
+api/ng.directive:ngBind `ng-bind`} directive.
+
+<pre>
+  <span ng-bind="exp"></span>
+  <span class="ng-bind: exp;"></span>
+  <ng-bind></ng-bind>
+  <!-- directive: ng-bind exp -->
+</pre>
+
+Directive is just a function which executes when the compiler encounters it in the DOM. See {@link
+api/ng.$compileProvider.directive directive API} for in depth documentation on how
+to write directives.
+
+Here is a directive which makes any element draggable. Notice the `draggable` attribute on the
+`<span>` element.
+
+<example module="drag">
+  <file name="script.js">
+    angular.module('drag', []).
+      directive('draggable', function($document) {
+        var startX=0, startY=0, x = 0, y = 0;
+        return function(scope, element, attr) {
+          element.css({
+           position: 'relative',
+           border: '1px solid red',
+           backgroundColor: 'lightgrey',
+           cursor: 'pointer'
+          });
+          element.bind('mousedown', function(event) {
+            startX = event.screenX - x;
+            startY = event.screenY - y;
+            $document.bind('mousemove', mousemove);
+            $document.bind('mouseup', mouseup);
+          });
+
+          function mousemove(event) {
+            y = event.screenY - startY;
+            x = event.screenX - startX;
+            element.css({
+              top: y + 'px',
+              left:  x + 'px'
+            });
+          }
+
+          function mouseup() {
+            $document.unbind('mousemove', mousemove);
+            $document.unbind('mouseup', mouseup);
+          }
+        }
+      });
+  </file>
+  <file name="index.html">
+    <span draggable>Drag ME</span>
+  </file>
+</file>
+
+
+The presence of `draggable` attribute an any element gives the element new behavior. The beauty of
+this approach is that we have thought the browser a new trick, we have extended the vocabulary of
+what browser understands in a way, which is natural to anyone who is familiar with HTML
+principles.
+
+
+# Understanding View
+
+There are many templating systems out there. Most of them consume a static string template and
+combine it with data, resulting in a new string. The resulting text is then `innerHTML`ed into
+an element.
+
+<img src="img/One_Way_Data_Binding.png">
+
+This means that any changes to the data, need to be re-merged with the template and then
+`innerHTML`ed into the DOM. Some of the issues are: reading user input and merging it with data,
+clobbering user input by overwriting it, managing the whole update process, and lack of behavior
+expressiveness.
+
+Angular is different. Angular compiler consumes DOM with directives, not string templates. The
+result is a linking function, which when combined with a scope model results in live view. The
+view and scope model bindings are transparent, no action from the developer is needed to update
+the view. And because no `innerHTML` is used there are no issues of clobbering user input.
+Furthermore, angular directives can contain not just text bindings, but behavioral constructs as
+well.
+
+<img src="img/Two_Way_Data_Binding.png">
+
+The Angular approach produces stable DOM. This means that the DOM element instance bound to model
+item instance does not change for the lifetime of the binding. This means that the code can get
+hold of the elements and register event handlers and know that the reference will not be destroyed
+by template data merge.
+
+
@@ -0,0 +1,178 @@
+@workInProgress
+@ngdoc overview
+@name Developer Guide: E2E Testing
+@description
+
+As applications grow in size and complexity, it becomes unrealistic to rely on manual testing to
+verify the correctness of new features, catch bugs and notice regressions.
+
+To solve this problem, we have built an Angular Scenario Runner which simulates user interactions
+that will help you verify the health of your Angular application.
+
+# Overview
+You will write scenario tests in JavaScript, which describe how your application should behave,
+given a certain interaction in a specific state. A scenario is comprised of one or more it  blocks
+(you can think of these as the requirements of your application), which in turn are made of
+**commands** and **expectations**. Commands tell the Runner to do something with the application
+(such as navigate to a page or click on a button), and expectations tell the Runner to assert
+something about the state (such as the value of a field or the current URL). If any expectation
+fails, the runner marks the `it`  as "failed" and continues on to the next one. Scenarios may also
+have **beforeEach** and **afterEach** blocks, which will be run before (or after) each `it`  block,
+regardless of whether they pass or fail.
+
+<img src="img/guide/scenario_runner.png">
+
+In addition to the above elements, scenarios may also contain helper functions to avoid duplicating
+code in the `it` blocks.
+
+Here is an example of a simple scenario:
+<pre>
+describe('Buzz Client', function() {
+it('should filter results', function() {
+  input('user').enter('jacksparrow');
+  element(':button').click();
+  expect(repeater('ul li').count()).toEqual(10);
+  input('filterText').enter('Bees');
+  expect(repeater('ul li').count()).toEqual(1);
+});
+});
+</pre>
+This scenario describes the requirements of a Buzz Client, specifically, that it should be able to
+filter the stream of the user. It starts by entering a value in the 'user' input field, clicking
+the only button on the page, and then it verifies that there are 10 items listed. It then enters
+'Bees' in the 'filterText' input field and verifies that the list is reduced to a single item.
+
+The API section below lists the available commands and expectations for the Runner.
+
+# API
+Source: {@link https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js}
+
+## pause()
+Pauses the execution of the tests until you call `resume()` in the console (or click the resume
+link in the Runner UI).
+
+## sleep(seconds)
+Pauses the execution of the tests for the specified number of `seconds`.
+
+## browser().navigateTo(url)
+Loads the `url` into the test frame.
+
+## browser().navigateTo(url, fn)
+Loads the URL returned by `fn` into the testing frame. The given `url` is only used for the test
+output. Use this when the destination URL is dynamic (that is, the destination is unknown when you
+write the test).
+
+## browser().reload()
+Refreshes the currently loaded page in the test frame.
+
+## browser().window().href()
+Returns the window.location.href of the currently loaded page in the test frame.
+
+## browser().window().path()
+Returns the window.location.pathname of the currently loaded page in the test frame.
+
+## browser().window().search()
+Returns the window.location.search of the currently loaded page in the test frame.
+
+## browser().window().hash()
+Returns the window.location.hash (without `#`) of the currently loaded page in the test frame.
+
+## browser().location().url()
+Returns the {@link api/ng.$location $location.url()} of the currently loaded page in
+the test frame.
+
+## browser().location().path()
+Returns the {@link api/ng.$location $location.path()} of the currently loaded page in
+the test frame.
+
+## browser().location().search()
+Returns the {@link api/ng.$location $location.search()} of the currently loaded page
+in the test frame.
+
+## browser().location().hash()
+Returns the {@link api/ng.$location $location.hash()} of the currently loaded page in
+the test frame.
+
+## expect(future).{matcher}
+Asserts the value of the given `future` satisfies the `matcher`. All API statements return a
+`future` object, which get a `value` assigned after they are executed. Matchers are defined using
+`angular.scenario.matcher`, and they use the value of futures to run the expectation. For example:
+`expect(browser().location().href()).toEqual('http://www.google.com')`
+
+## expect(future).not().{matcher}
+Asserts the value of the given `future` satisfies the negation of the `matcher`.
+
+## using(selector, label)
+Scopes the next DSL element selection.
+
+## binding(name)
+Returns the value of the first binding matching the given `name`.
+
+## input(name).enter(value)
+Enters the given `value` in the text field with the given `name`.
+
+## input(name).check()
+Checks/unchecks the checkbox with the given `name`.
+
+## input(name).select(value)
+Selects the given `value` in the radio button with the given `name`.
+
+## input(name).val()
+Returns the current value of an input field with the given `name`.
+
+## repeater(selector, label).count()
+Returns the number of rows in the repeater matching the given jQuery `selector`. The `label` is
+used for test ouput.
+
+## repeater(selector, label).row(index)
+Returns an array with the bindings in the row at the given `index` in the repeater matching the
+given jQuery `selector`. The `label` is used for test output.
+
+## repeater(selector, label).column(binding)
+Returns an array with the values in the column with the given `binding` in the repeater matching
+the given jQuery `selector`. The `label` is used for test output.
+
+## select(name).option(value)
+Picks the option with the given `value` on the select with the given `name`.
+
+## select(name).option(value1, value2...)
+Picks the options with the given `values` on the multi select with the given `name`.
+
+## element(selector, label).count()
+Returns the number of elements that match the given jQuery `selector`. The `label` is used for test
+output.
+
+## element(selector, label).click()
+Clicks on the element matching the given jQuery `selector`. The `label` is used for test output.
+
+## element(selector, label).query(fn)
+Executes the function `fn(selectedElements, done)`, where selectedElements are the elements that
+match the given jQuery `selector` and `done` is a function that is called at the end of the `fn`
+function.  The `label` is used for test output.
+
+## element(selector, label).{method}()
+Returns the result of calling `method` on the element matching the given jQuery `selector`, where
+`method` can be any of the following jQuery methods: `val`, `text`, `html`, `height`,
+`innerHeight`, `outerHeight`, `width`, `innerWidth`, `outerWidth`, `position`, `scrollLeft`,
+`scrollTop`, `offset`. The `label` is used for test output.
+
+## element(selector, label).{method}(value)
+Executes the `method` passing in `value` on the element matching the given jQuery `selector`, where
+`method` can be any of the following jQuery methods: `val`, `text`, `html`, `height`,
+`innerHeight`, `outerHeight`, `width`, `innerWidth`, `outerWidth`, `position`, `scrollLeft`,
+`scrollTop`, `offset`.  The `label` is used for test output.
+
+## element(selector, label).{method}(key)
+Returns the result of calling `method` passing in `key` on the element matching the given jQuery
+`selector`, where `method` can be any of the following jQuery methods: `attr`, `prop`, `css`. The
+`label` is used for test output.
+
+## element(selector, label).{method}(key, value)
+Executes the `method` passing in `key` and `value` on the element matching the given jQuery
+`selector`, where `method` can be any of the following jQuery methods: `attr`,  `prop`, `css`.  The
+`label` is used for test output.
+
+JavaScript is a dynamically typed language which comes with great power of expression, but it also
+come with almost no-help from the compiler. For this reason we feel very strongly that any code
+written in JavaScript needs to come with a strong set of tests. We have built many features into
+angular which makes testing your angular applications easy. So there is no excuse for not do it.
@@ -0,0 +1,24 @@
+@ngdoc overview
+@name Developer Guide: About MVC in Angular
+@description
+
+While Model-View-Controller (MVC) has acquired different shades of meaning over the years since it
+first appeared, angular incorporates the basic principles behind the original {@link
+http://en.wikipedia.org/wiki/Model–view–controller MVC} software design pattern into its way of
+building client-side web applications.
+
+The MVC pattern greatly summarized:
+
+* Separate applications into distinct presentation, data, and logic components
+* Encourage loose coupling between these components
+
+Along with {@link dev_guide.services services} and {@link di dependency injection}, MVC
+makes angular applications better structured, easier to maintain and more testable.
+
+The following topics explain how angular incorporates the MVC pattern into the angular way of
+developing web applications:
+
+* {@link dev_guide.mvc.understanding_model Understanding the Model Component}
+* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
+* {@link dev_guide.mvc.understanding_view Understanding the View Component}
+
@@ -0,0 +1,278 @@
+@ngdoc overview
+@name Developer Guide: About MVC in Angular: Understanding the Controller Component
+@description
+
+In angular, a controller is a JavaScript function(type/class) that is used to augment instances of
+angular {@link scope Scope}, excluding the root scope. When you or angular create a new
+child scope object via the {@link api/ng.$rootScope.Scope#$new scope.$new} API        , there is an
+option to pass in a controller as a method argument. This will tell angular to associate the
+controller with the new scope and to augment its behavior.
+
+Use controllers to:
+
+- Set up the initial state of a scope object.
+- Add behavior to the scope object.
+
+# Setting up the initial state of a scope object
+
+Typically, when you create an application you need to set up an initial state for an angular scope.
+
+Angular applies (in the sense of JavaScript's `Function#apply`) the controller constructor function
+to a new angular scope object, which sets up an initial scope state. This means that angular never
+creates instances of the controller type (by invoking the `new` operator on the controller
+constructor). Constructors are always applied to an existing scope object.
+
+You set up the initial state of a scope by creating model properties. For example:
+
+function GreetingCtrl($scope) {
+ $scope.greeting = 'Hola!';
+}
+
+The `GreetingCtrl` controller creates a `greeting` model which can be referred to in a template.
+
+# Adding Behavior to a Scope Object
+
+Behavior on an angular scope object is in the form of scope method properties available to the
+template/view. This behavior interacts with and modifies the application model.
+
+As discussed in the {@link dev_guide.mvc.understanding_model Model} section of this guide, any
+objects (or primitives) assigned to the scope become model properties. Any functions assigned to
+the scope are available in the template/view, and can be invoked via angular expressions
+and `ng` event handler directives (e.g. {@link api/ng.directive:ngClick ngClick}).
+
+# Using Controllers Correctly
+
+In general, a controller shouldn't try to do too much. It should contain only the business logic
+needed for a single view.
+
+The most common way to keep controllers slim is by encapsulating work that doesn't belong to
+controllers into services and then using these services in controllers via dependency injection.
+This is discussed in the {@link di Dependency Injection} {@link dev_guide.services
+Services} sections of this guide.
+
+Do not use controllers for:
+
+- Any kind of DOM manipulation — Controllers should contain only business logic. DOM
+manipulation—the presentation logic of an application—is well known for being hard to test.
+Putting any presentation logic into controllers significantly affects testability of the business
+logic. Angular offers {@link dev_guide.templates.databinding} for automatic DOM manipulation. If
+you have to perform your own manual DOM manipulation, encapsulate the presentation logic in
+{@link guide/directive directives}.
+- Input formatting — Use {@link forms angular form controls} instead.
+- Output filtering — Use {@link dev_guide.templates.filters angular filters} instead.
+- Run stateless or stateful code shared across controllers — Use {@link dev_guide.services angular
+services} instead.
+- Instantiate or manage the life-cycle of other components (for example, to create service
+instances).
+
+
+# Associating Controllers with Angular Scope Objects
+
+You can associate controllers with scope objects explicitly via the {@link api/ng.$rootScope.Scope#$new
+scope.$new} api or implicitly via the {@link api/ng.directive:ngController ngController
+directive} or {@link api/ng.$route $route service}.
+
+
+## Controller Constructor and Methods Example
+
+To illustrate how the controller component works in angular, let's create a little app with the
+following components:
+
+- A {@link dev_guide.templates template} with two buttons and a simple message
+- A model consisting of a string named `spice`
+- A controller with two functions that set the value of `spice`
+
+The message in our template contains a binding to the `spice` model, which by default is set to the
+string "very". Depending on which button is clicked, the `spice` model is set to `chili` or
+`jalapeño`, and the message is automatically updated by data-binding.
+
+
+## A Spicy Controller Example
+
+<pre>
+<body ng-controller="SpicyCtrl">
+ <button ng-click="chiliSpicy()">Chili</button>
+ <button ng-click="jalapenoSpicy()">Jalapeño</button>
+ <p>The food is {{spice}} spicy!</p>
+</body>
+
+function SpicyCtrl($scope) {
+ $scope.spice = 'very';
+ $scope.chiliSpicy = function() {
+   $scope.spice = 'chili';
+ }
+ $scope.jalapenoSpicy = function() {
+  $scope.spice = 'jalapeño';
+ }
+}
+
+
+</pre>
+
+Things to notice in the example above:
+
+- The `ngController` directive is used to (implicitly) create a scope for our template, and the
+scope is augmented (managed) by the `SpicyCtrl` controller.
+- `SpicyCtrl` is just a plain JavaScript function. As an (optional) naming convention the name
+starts with capital letter and ends with "Ctrl" or "Controller".
+- Assigning a property to `$scope` creates or updates the model.
+- Controller methods can be created through direct assignment to scope (the `chiliSpicy` method)
+- Both controller methods are available in the template (for the `body` element and and its
+children).
+- NB:  Previous versions of Angular (pre 1.0 RC) allowed you to use `this` interchangeably with
+the $scope method, but this is no longer the case.  Inside of methods defined on the scope
+`this` and $scope are interchangeable (angular sets `this` to $scope), but not otherwise
+inside your controller constructor.
+- NB:  Previous versions of Angular (pre 1.0 RC) added prototype methods into the scope
+automatically, but this is no longer the case; all methods need to be added manually to
+the scope.
+
+
+Controller methods can also take arguments, as demonstrated in the following variation of the
+previous example.
+
+## Controller Method Arguments Example
+
+<pre>
+<body ng-controller="SpicyCtrl">
+ <input ng-model="customSpice" value="wasabi">
+ <button ng-click="spicy('chili')">Chili</button>
+ <button ng-click="spicy(customSpice)">Custom spice</button>
+ <p>The food is {{spice}} spicy!</p>
+</body>
+
+function SpicyCtrl($scope) {
+ $scope.spice = 'very';
+ $scope.spicy = function(spice) {
+   $scope.spice = spice;
+ }
+}
+</pre>
+
+Notice that the `SpicyCtrl` controller now defines just one method called `spicy`, which takes one
+argument called `spice`. The template then refers to this controller method and passes in a string
+constant `'chili'` in the binding for the first button and a model property `spice` (bound to an
+input box) in the second button.
+
+
+## Controller Inheritance Example
+
+Controller inheritance in angular is based on {@link api/ng.$rootScope.Scope Scope} inheritance. Let's
+have a look at an example:
+
+<pre>
+<body ng-controller="MainCtrl">
+ <p>Good {{timeOfDay}}, {{name}}!</p>
+ <div ng-controller="ChildCtrl">
+   <p>Good {{timeOfDay}}, {{name}}!</p>
+   <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
+</body>
+
+function MainCtrl($scope) {
+ $scope.timeOfDay = 'morning';
+ $scope.name = 'Nikki';
+}
+
+function ChildCtrl($scope) {
+ $scope.name = 'Mattie';
+}
+
+function BabyCtrl($scope) {
+ $scope.timeOfDay = 'evening';
+ $scope.name = 'Gingerbreak Baby';
+}
+</pre>
+
+Notice how we nested three `ngController` directives in our template. This template construct will
+result in 4 scopes being created for our view:
+
+- The root scope
+- The `MainCtrl` scope, which contains `timeOfDay` and `name` models
+- The `ChildCtrl` scope, which shadows the `name` model from the previous scope and inherits the
+`timeOfDay` model
+- The `BabyCtrl` scope, which shadows both the `timeOfDay` model defined in `MainCtrl` and `name`
+model defined in the ChildCtrl
+
+Inheritance works between controllers in the same way as it does with models. So in our previous
+examples, all of the models could be replaced with controller methods that return string values.
+
+Note: Standard prototypical inheritance between two controllers doesn't work as one might expect,
+because as we mentioned earlier, controllers are not instantiated directly by angular, but rather
+are applied to the scope object.
+
+
+## Testing Controllers
+
+Although there are many ways to test a controller, one of the best conventions, shown below,
+involves injecting the `$rootScope` and `$controller`
+
+Controller Function:
+<pre>
+function myController($scope) {
+   $scope.spices = [{"name":"pasilla", "spiciness":"mild"},
+                  {"name":"jalapeno", "spiceiness":"hot hot hot!"},
+                  {"name":"habanero", "spiceness":"LAVA HOT!!"}];
+
+   $scope.spice = "habanero";
+}
+</pre>
+
+Controller Test:
+<pre>
+describe('myController function', function() {
+
+  describe('myController', function() {
+    var scope;
+
+    beforeEach(inject(function($rootScope, $controller) {
+      scope = $rootScope.$new();
+      var ctrl = $controller(myController, {$scope: scope});
+    }));
+
+    it('should create "spices" model with 3 spices', function() {
+      expect(scope.spices.length).toBe(3);
+    });
+
+    it('should set the default value of spice', function() {
+      expect(scope.spice).toBe('habanero');
+    });
+  });
+});
+</pre>
+
+
+If you need to test a nested controller one needs to create the same scope hierarchy
+in your test as exist in the DOM.
+
+<pre>
+describe('state', function() {
+    var mainScope, childScope, babyScope;
+
+    beforeEach(inject(function($rootScope, $controller) {
+        mainScope = $rootScope.$new();
+        var mainCtrl = $controller(MainCtrl, {$scope: mainScope});
+        childScope = mainScope.$new();
+        var childCtrl = $controller(ChildCtrl, {$scope: childScope});
+        babyScope = $rootScope.$new();
+        var babyCtrl = $controller(BabyCtrl, {$scope: babyScope});
+    }));
+
+    it('should have over and selected', function() {
+        expect(mainScope.timeOfDay).toBe('morning');
+        expect(mainScope.name).toBe('Nikki');
+        expect(childScope.timeOfDay).toBe('morning');
+        expect(childScope.name).toBe('Mattie');
+        expect(babyScope.timeOfDay).toBe('evening');
+        expect(babyScope.name).toBe('Gingerbreak Baby');
+    });
+});
+</pre>
+
+
+## Related Topics
+
+* {@link dev_guide.mvc About MVC in Angular}
+* {@link dev_guide.mvc.understanding_model Understanding the Model Component}
+* {@link dev_guide.mvc.understanding_view Understanding the View Component}
+
+
@@ -0,0 +1,71 @@
+@ngdoc overview
+@name Developer Guide: About MVC in Angular: Understanding the Model Component
+@description
+
+Depending on the context of the discussion in angular documentation, the term _model_ can refer to
+either a single object representing one entity (for example, a model called "phones" with its value
+being an array of phones) or the entire data model for the application (all entities).
+
+In angular, a model is any data that is reachable as a property of an angular {@link
+scope Scope} object. The name of the property is the model identifier and the value is
+any JavaScript object (including arrays and primitives).
+
+The only requirement for a JavaScript object to be a model in angular is that the object must be
+referenced by an angular scope as a property of that scope object. This property reference can be
+created explicitly or implicitly.
+
+You can create models by explicitly creating scope properties referencing JavaScript objects in the
+following ways:
+
+* Make a direct property assignment to the scope object in JavaScript code; this most commonly
+occurs in controllers:
+
+         function MyCtrl($scope) {
+             // create property 'foo' on the MyCtrl's scope
+             // and assign it an initial value 'bar'
+             $scope.foo = 'bar';
+         }
+
+* Use an {@link expression angular expression} with an assignment operator in templates:
+
+         <button ng-click="{{foos='ball'}}">Click me</button>
+
+* Use {@link api/ng.directive:ngInit ngInit directive} in templates (for toy/example apps
+only, not recommended for real applications):
+
+         <body ng-init=" foo = 'bar' ">
+
+Angular creates models implicitly (by creating a scope property and assigning it a suitable value)
+when processing the following template constructs:
+
+* Form input, select, textarea and other form elements:
+
+         <input ng-model="query" value="fluffy cloud">
+
+   The code above creates a model called "query" on the current scope with the value set to "fluffy
+cloud".
+
+* An iterator declaration in {@link api/ng.directive:ngRepeat ngRepeater}:
+
+         <p ng-repeat="phone in phones"></p>
+
+   The code above creates one child scope for each item in the "phones" array and creates a "phone"
+object (model) on each of these scopes with its value set to the value of "phone" in the array.
+
+In angular, a JavaScript object stops being a model when:
+
+* No angular scope contains a property that references the object.
+
+* All angular scopes that contain a property referencing the object become stale and eligible for
+garbage collection.
+
+The following illustration shows a simple data model created implicitly from a simple template:
+
+<img src="img/guide/about_model_final.png">
+
+
+## Related Topics
+
+* {@link dev_guide.mvc About MVC in Angular}
+* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
+* {@link dev_guide.mvc.understanding_view Understanding the View Component}
@@ -0,0 +1,22 @@
+@ngdoc overview
+@name Developer Guide: About MVC in Angular: Understanding the View Component
+@description
+
+In angular, the view is the DOM loaded and rendered in the browser, after angular has transformed
+the DOM based on information in the template, controller and model.
+
+<img src="img/guide/about_view_final.png">
+
+In the angular implementation of MVC, the view has knowledge of both the model and the controller.
+The view knows about the model where two-way data-binding occurs. The view has knowledge of the
+controller through angular directives, such as {@link api/ng.directive:ngController
+ngController} and {@link api/ng.directive:ngView ngView}, and through bindings of this form:
+`{{someControllerFunction()}}`. In these ways, the view can call functions in an associated
+controller function.
+
+
+## Related Topics
+
+* {@link dev_guide.mvc About MVC in Angular}
+* {@link dev_guide.mvc.understanding_model Understanding the Model Component}
+* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
@@ -0,0 +1,640 @@
+@ngdoc overview
+@name Developer Guide: Angular Services: Using $location
+@description
+
+# What does it do?
+
+The `$location` service parses the URL in the browser address bar (based on the {@link
+https://developer.mozilla.org/en/window.location window.location}) and makes the URL available to
+your application. Changes to the URL in the address bar are reflected into $location service and
+changes to $location are reflected into the browser address bar.
+
+**The $location service:**
+
+- Exposes the current URL in the browser address bar, so you can
+  - Watch and observe the URL.
+  - Change the URL.
+- Synchronizes the URL with the browser when the user
+  - Changes the address bar.
+  - Clicks the back or forward button (or clicks a History link).
+  - Clicks on a link.
+- Represents the URL object as a set of methods (protocol, host, port, path, search, hash).
+
+
+## Comparing $location to window.location
+
+<table>
+<thead>
+
+  <tr>
+    <td class="empty-corner-lt"></td>
+    <td>window.location</td>
+    <td>$location service</td>
+  </tr>
+
+</thead>
+<tbody>
+
+  <tr>
+    <td class="head">purpose</td>
+    <td>allow read/write access to the current browser location</td>
+    <td>same</td>
+  </tr>
+
+  <tr>
+    <td class="head">API</td>
+    <td>exposes "raw" object with properties that can be directly modified</td>
+    <td>exposes jQuery-style getters and setters</td>
+  </tr>
+
+  <tr>
+    <td class="head">integration with angular application life-cycle</td>
+    <td>none</td>
+    <td>knows about all internal life-cycle phases, integrates with $watch, ...</td>
+  </tr>
+
+  <tr>
+    <td class="head">seamless integration with HTML5 API</td>
+    <td>no</td>
+    <td>yes (with a fallback for legacy browsers)</td>
+  </tr>
+
+  <tr>
+    <td class="head">aware of docroot/context from which the application is loaded</td>
+    <td>no - window.location.path returns "/docroot/actual/path"</td>
+    <td>yes - $location.path() returns "/actual/path"</td>
+  </tr>
+
+</tbody>
+</table>
+
+## When should I use $location?
+Any time your application needs to react to a change in the current URL or if you want to change
+the current URL in the browser.
+
+## What does it not do?
+Does not cause a full page reload when the browser URL is changed. To reload the page after
+changing the URL, use the lower-level API, `$window.location.href`.
+
+
+# General overview of the API
+
+The `$location` service can behave differently, depending on the configuration that was provided to
+it when it was instantiated. The default configuration is suitable for many applications, for
+others customizing the configuration can enable new features.
+
+Once the `$location` service is instantiated, you can interact with it via jQuery-style getter and
+setter methods that allow you to get or change the current URL in the browser.
+
+## $location service configuration
+
+To configure the `$location` service, retrieve the
+{@link api/ng.$locationProvider $locationProvider} and set the parameters as follows:
+
+
+- **html5Mode(mode)**: {boolean}<br />
+  `true` - see HTML5 mode<br />
+  `false` - see Hashbang mode<br />
+  default: `false`
+
+- **hashPrefix(prefix)**: {string}<br />
+  prefix used for Hashbang URLs (used in Hashbang mode or in legacy browser in Html5 mode)<br />
+  default: `'!'`
+
+### Example configuration
+<pre>
+$locationProvider.html5Mode(true).hashPrefix('!');
+</pre>
+
+## Getter and setter methods
+
+`$location` service provides getter methods for read-only parts of the URL (absUrl, protocol, host,
+port) and getter / setter methods for url, path, search, hash:
+<pre>
+// get the current path
+$location.path();
+
+// change the path
+$location.path('/newValue')
+</pre>
+
+All of the setter methods return the same `$location` object to allow chaining. For example, to
+change multiple segments in one go, chain setters like this:
+<pre>$location.path('/newValue').search({key: value});</pre>
+
+There is a special `replace` method which can be used to tell the $location service that the next
+time the $location service is synced with the browser, the last history record should be replaced
+instead of creating a new one. This is useful when you want to implement redirection, which would
+otherwise break the back button (navigating back would retrigger the redirection). To change the
+current URL without creating a new browser history record you can call:
+<pre>
+  $location.path('/someNewPath');
+  $location.replace();
+  // or you can chain these as: $location.path('/someNewPath').replace();
+</pre>
+
+Note that the setters don't update `window.location` immediately. Instead, `$location` service is
+aware of the {@link api/ng.$rootScope.Scope scope} life-cycle and coalesces multiple `$location`
+mutations into one "commit" to the `window.location` object during the scope `$digest` phase. Since
+multiple changes to the $location's state will be pushed to the browser as a single change, it's
+enough to call the `replace()` method just once to make the entire "commit" a replace operation
+rather than addition to the browser history. Once the browser is updated, the $location service
+resets the flag set by `replace()` method and future mutations will create new history records,
+unless `replace()` is called again.
+
+### Setters and character encoding
+You can pass special characters to `$location` service and it will encode them according to rules
+specified in {@link http://www.ietf.org/rfc/rfc3986.txt RFC 3986}. When you access the methods:
+
+- All values that are passed to `$location` setter methods, `path()`, `search()`, `hash()`, are
+encoded.
+- Getters (calls to methods without parameters) return decoded values for the following methods
+`path()`, `search()`, `hash()`.
+- When you call the `absUrl()` method, the returned value is a full url with its segments encoded.
+- When you call the `url()` method, the returned value is path, search and hash, in the form
+`/path?search=a&b=c#hash`. The segments are encoded as well.
+
+
+# Hashbang and HTML5 Modes
+
+`$location` service has two configuration modes which control the format of the URL in the browser
+address bar: **Hashbang mode** (the default) and the **HTML5 mode** which is based on using the
+HTML5 {@link http://www.w3.org/TR/html5/history.html History API}. Applications use the same API in
+both modes and the `$location` service will work with appropriate URL segments and browser APIs to
+facilitate the browser URL change and history management.
+
+<img src="img/guide/hashbang_vs_regular_url.jpg">
+
+<table>
+<thead>
+
+  <tr>
+    <td class="empty-corner-lt"></td>
+    <td>Hashbang mode</td>
+    <td>HTML5 mode</td>
+  </tr>
+
+</thead>
+<tbody>
+
+  <tr>
+    <td class="head">configuration</td>
+    <td>the default</td>
+    <td>{ html5Mode: true }</td>
+  </tr>
+
+  <tr>
+    <td class="head">URL format</td>
+    <td>hashbang URLs in all browsers</td>
+    <td>regular URLs in modern browser, hashbang URLs in old browser</td>
+  </tr>
+
+  <tr>
+    <td class="head">&lt;a href=""&gt; link rewriting</td>
+    <td>no</td>
+    <td>yes</td>
+  </tr>
+
+  <tr>
+    <td class="head">requires server-side configuration</td>
+    <td>no</td>
+    <td>yes</td>
+  </tr>
+</tbody>
+</table>
+
+## Hashbang mode (default mode)
+
+In this mode, `$location` uses Hashbang URLs in all browsers.
+
+### Example
+
+<pre>
+it('should show example', inject(
+  function($locationProvider) {
+    $locationProvider.html5mode = false;
+    $locationProvider.hashPrefix = '!';
+  },
+  function($location) {
+    // open http://host.com/base/index.html#!/a
+    $location.absUrl() == 'http://host.com/base/index.html#!/a'
+    $location.path() == '/a'
+
+    $location.path('/foo')
+    $location.absUrl() == 'http://host.com/base/index.html#!/foo'
+
+    $location.search() == {}
+    $location.search({a: 'b', c: true});
+    $location.absUrl() == 'http://host.com/base/index.html#!/foo?a=b&c'
+
+    $location.path('/new').search('x=y');
+    $location.absUrl() == 'http://host.com/base/index.html#!/new?x=y'
+  }
+));
+</pre>
+
+### Crawling your app
+
+To allow indexing of your AJAX application, you have to add special meta tag in the head section of
+your document:
+<pre><meta name="fragment" content="!" /></pre>
+
+This will cause crawler bot to request links with `_escaped_fragment_` param so that your server
+can recognize the crawler and serve a HTML snapshots. For more information about this technique,
+see {@link http://code.google.com/web/ajaxcrawling/docs/specification.html Making AJAX Applications
+Crawlable}.
+
+## HTML5 mode
+
+In HTML5 mode, the `$location` service getters and setters interact with the browser URL address
+through the HTML5 history API, which allows for use of regular URL path and search segments,
+instead of their hashbang equivalents. If the HTML5 History API is not supported by a browser, the
+`$location` service will fall back to using the hashbang URLs automatically. This frees you from
+having to worry about whether the browser displaying your app supports the history API  or not; the
+`$location` service transparently uses the best available option.
+
+- Opening a regular URL in a legacy browser -> redirects to a hashbang URL
+- Opening hashbang URL in a modern browser -> rewrites to a regular URL
+
+### Example
+
+<pre>
+it('should show example', inject(
+  function($locationProvider) {
+    $locationProvider.html5mode = true;
+    $locationProvider.hashPrefix = '!';
+  },
+  function($location) {
+    // in browser with HTML5 history support:
+    // open http://host.com/#!/a -> rewrite to http://host.com/a
+    // (replacing the http://host.com/#!/a history record)
+    $location.path() == '/a'
+
+    $location.path('/foo');
+    $location.absUrl() == 'http://host.com/foo'
+
+    $location.search() == {}
+    $location.search({a: 'b', c: true});
+    $location.absUrl() == 'http://host.com/foo?a=b&c'
+
+    $location.path('/new').search('x=y');
+    $location.url() == 'new?x=y'
+    $location.absUrl() == 'http://host.com/new?x=y'
+
+    // in browser without html5 history support:
+    // open http://host.com/new?x=y -> redirect to http://host.com/#!/new?x=y
+    // (again replacing the http://host.com/new?x=y history item)
+    $location.path() == '/new'
+    $location.search() == {x: 'y'}
+
+    $location.path('/foo/bar');
+    $location.path() == '/foo/bar'
+    $location.url() == '/foo/bar?x=y'
+    $location.absUrl() == 'http://host.com/#!/foo/bar?x=y'
+  }
+));
+</pre>
+
+### Fallback for legacy browsers
+
+For browsers that support the HTML5 history API, `$location` uses the HTML5 history API to write
+path and search. If the history API is not supported by a browser, `$location` supplies a Hasbang
+URL. This frees you from having to worry about whether the browser viewing your app supports the
+history API  or not; the `$location` service makes this transparent to you.
+
+### Html link rewriting
+
+When you use the history API mode, you will need different links in different browser, but all you
+have to do is specify regular URL links, such as: `<a href="/some?foo=bar">link</a>`
+
+When a user clicks on this link,
+
+- In a legacy browser, the URL changes to `/index.html#!/some?foo=bar`
+- In a modern browser, the URL changes to `/some?foo=bar`
+
+
+In cases like the following, links are not rewritten; instead, the browser will perform a full page
+reload to the original link.
+
+- Links that contain `target` element<br>
+  Example: `<a href="/ext/link?a=b" target="_self">link</a>`
+- Absolute links that go to a different domain<br>
+  Example: `<a href="http://angularjs.org/">link</a>`
+- Links starting with '/' that lead to a different base path when base is defined<br>
+  Example: `<a href="/not-my-base/link">link</a>`
+
+
+### Server side
+
+Using this mode requires URL rewriting on server side, basically you have to rewrite all your links
+to entry point of your application (e.g. index.html)
+
+### Crawling your app
+
+If you want your AJAX application to be indexed by web crawlers, you rill need to add the following
+meta tag to the HEAD section of your document:
+<pre><meta name="fragment" content="!" /></pre>
+
+This statement causes a crawler to request links with empty `_escaped_fragment_` parameter so that
+your server can recognize the crawler and serve it HTML snapshots. For more information about this
+technique, see {@link http://code.google.com/web/ajaxcrawling/docs/specification.html Making AJAX
+Applications Crawlable}.
+
+### Relative links
+
+Be sure to check all relative links, images, scripts etc. You must either specify the url base in
+the head of your main html file (`<base href="/my-base">`) or you must use absolute urls
+(starting with `/`) everywhere because relative urls will be resolved to absolute urls using the
+initial absolute url of the document, which is often different from the root of the application.
+
+Running Angular apps with the History API enabled from document root is strongly encouraged as it
+takes care of all relative link issues.
+
+### Sending links among different browsers
+
+Because of rewriting capability in HTML5 mode, your users will be able to open regular url links in
+legacy browsers and hashbang links in modern browser:
+
+- Modern browser will rewrite hashbang URLs to regular URLs.
+- Older browsers will redirect regular URLs to hashbang URLs.
+
+### Example
+
+Here you can see two `$location` instances, both in **Html5 mode**, but on different browsers, so
+that you can see the differences. These `$location` services are connected to a fake browsers. Each
+input represents address bar of the browser.
+
+Note that when you type hashbang url into first browser (or vice versa) it doesn't rewrite /
+redirect to regular / hashbang url, as this conversion happens only during parsing the initial URL
+= on page reload.
+
+In this examples we use `<base href="/base/index.html" />`
+<doc:example>
+<doc:source source="false">
+
+<div ng-non-bindable class="html5-hashbang-example">
+  <div id="html5-mode" ng-controller="Html5Cntl">
+    <h3>Browser with History API</h3>
+    <div ng-address-bar browser="html5"></div><br><br>
+    $location.protocol() = {{$location.protocol()}}<br>
+    $location.host() = {{$location.host()}}<br>
+    $location.port() = {{$location.port()}}<br>
+    $location.path() = {{$location.path()}}<br>
+    $location.search() = {{$location.search()}}<br>
+    $location.hash() = {{$location.hash()}}<br>
+    <a href="http://www.host.com/base/first?a=b">/base/first?a=b</a> |
+    <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
+    <a href="/other-base/another?search">external</a>
+  </div>
+
+  <div id="hashbang-mode" ng-controller="HashbangCntl">
+    <h3>Browser without History API</h3>
+    <div ng-address-bar browser="hashbang"></div><br><br>
+    $location.protocol() = {{$location.protocol()}}<br>
+    $location.host() = {{$location.host()}}<br>
+    $location.port() = {{$location.port()}}<br>
+    $location.path() = {{$location.path()}}<br>
+    $location.search() = {{$location.search()}}<br>
+    $location.hash() = {{$location.hash()}}<br>
+    <a href="http://www.host.com/base/first?a=b">/base/first?a=b</a> |
+    <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
+    <a href="/other-base/another?search">external</a>
+  </div>
+</div>
+
+<script>
+  function FakeBrowser(initUrl, baseHref) {
+    this.onUrlChange = function(fn) {
+      this.urlChange = fn;
+    };
+
+    this.url = function() {
+      return initUrl;
+    };
+
+    this.defer = function(fn, delay) {
+      setTimeout(function() { fn(); }, delay || 0);
+    };
+
+    this.baseHref = function() {
+      return baseHref;
+    };
+
+    this.notifyWhenOutstandingRequests = angular.noop;
+  }
+
+  var browsers = {
+    html5: new FakeBrowser('http://www.host.com/base/path?a=b#h', '/base/index.html'),
+    hashbang: new FakeBrowser('http://www.host.com/base/index.html#!/path?a=b#h', '/base/index.html')
+  };
+
+  function Html5Cntl($scope, $location) {
+    $scope.$location = $location;
+  }
+
+  function HashbangCntl($scope, $location) {
+    $scope.$location = $location;
+  }
+
+  function initEnv(name) {
+    var root = angular.element(document.getElementById(name + '-mode'));
+    angular.bootstrap(root, [function($compileProvider, $locationProvider, $provide){
+      $locationProvider.html5Mode(true).hashPrefix('!');
+
+      $provide.value('$browser', browsers[name]);
+      $provide.value('$document', root);
+      $provide.value('$sniffer', {history: name == 'html5'});
+
+      $compileProvider.directive('ngAddressBar', function() {
+        return function(scope, elm, attrs) {
+          var browser = browsers[attrs.browser],
+              input = angular.element('<input type="text">').val(browser.url()),
+              delay;
+
+          input.bind('keypress keyup keydown', function() {
+            if (!delay) {
+              delay = setTimeout(fireUrlChange, 250);
+            }
+          });
+
+          browser.url = function(url) {
+            return input.val(url);
+          };
+
+          elm.append('Address: ').append(input);
+
+          function fireUrlChange() {
+            delay = null;
+            browser.urlChange(input.val());
+          }
+        };
+      });
+    }]);
+    root.bind('click', function(e) {
+      e.stopPropagation();
+    });
+  }
+
+  initEnv('html5');
+  initEnv('hashbang');
+</script>
+
+</doc:source>
+</doc:example>
+
+
+# Caveats
+
+## Page reload navigation
+
+The `$location` service allows you to change only the URL; it does not allow you to reload the
+page. When you need to change the URL and reload the page or navigate to a different page, please
+use a lower level API, {@link api/ng.$window $window.location.href}.
+
+## Using $location outside of the scope life-cycle
+
+`$location` knows about Angular's {@link api/ng.$rootScope.Scope scope} life-cycle. When a URL changes in
+the browser it updates the `$location` and calls `$apply` so that all $watchers / $observers are
+notified.
+When you change the `$location` inside the `$digest` phase everything is ok; `$location` will
+propagate this change into browser and will notify all the $watchers / $observers.
+When you want to change the `$location` from outside Angular (for example, through a DOM Event or
+during testing) - you must call `$apply` to propagate the changes.
+
+## $location.path() and ! or / prefixes
+
+A path should always begin with forward slash (`/`); the `$location.path()` setter will add the
+forward slash if it is missing.
+
+Note that the `!` prefix in the hashbang mode is not part of `$location.path()`; it is actually
+hashPrefix.
+
+
+# Testing with the $location service
+
+When using `$location` service during testing, you are outside of the angular's {@link
+api/ng.$rootScope.Scope scope} life-cycle. This means it's your responsibility to call `scope.$apply()`.
+
+<pre>
+describe('serviceUnderTest', function() {
+  beforeEach(module(function($provide) {
+    $provide.factory('serviceUnderTest', function($location){
+      // whatever it does...
+    });
+  });
+
+  it('should...', inject(function($location, $rootScope, serviceUnderTest) {
+    $location.path('/new/path');
+    $rootScope.$apply();
+
+    // test whatever the service should do...
+
+  }));
+});
+</pre>
+
+
+# Migrating from earlier AngularJS releases
+
+In earlier releases of Angular, `$location` used `hashPath` or `hashSearch` to process path and
+search methods. With this release, the `$location` service processes path and search methods and
+then uses the information it obtains to compose hashbang URLs (such as
+`http://server.com/#!/path?search=a`), when necessary.
+
+## Changes to your code
+
+<table>
+  <tr class="head">
+    <td>Navigation inside the app</td>
+    <td>Change to</td>
+  </tr>
+
+  <tr>
+    <td>$location.href = value<br />$location.hash = value<br />$location.update(value)<br
+/>$location.updateHash(value)</td>
+    <td>$location.path(path).search(search)</td>
+  </tr>
+
+  <tr>
+    <td>$location.hashPath = path</td>
+    <td>$location.path(path)</td>
+  </tr>
+
+  <tr>
+    <td>$location.hashSearch = search</td>
+    <td>$location.search(search)</td>
+  </tr>
+
+  <tr class="head">
+    <td>Navigation outside the app</td>
+    <td>Use lower level API</td>
+  </tr>
+
+  <tr>
+    <td>$location.href = value<br />$location.update(value)</td>
+    <td>$window.location.href = value</td>
+  </tr>
+
+  <tr>
+    <td>$location[protocol | host | port | path | search]</td>
+    <td>$window.location[protocol | host | port | path | search]</td>
+  </tr>
+
+  <tr class="head">
+    <td>Read access</td>
+    <td>Change to</td>
+  </tr>
+
+  <tr>
+    <td>$location.hashPath</td>
+    <td>$location.path()</td>
+  </tr>
+
+  <tr>
+    <td>$location.hashSearch</td>
+    <td>$location.search()</td>
+  </tr>
+
+  <tr>
+    <td>$location.href<br />$location.protocol<br />$location.host<br />$location.port<br
+/>$location.hash</td>
+    <td>$location.absUrl()<br />$location.protocol()<br />$location.host()<br />$location.port()<br
+/>$location.path() + $location.search()</td>
+  </tr>
+
+  <tr>
+    <td>$location.path<br />$location.search</td>
+    <td>$window.location.path<br />$window.location.search</td>
+  </tr>
+</table>
+
+## Two-way binding to $location
+
+The Angular's compiler currently does not support two-way binding for methods (see {@link
+https://github.com/angular/angular.js/issues/404 issue}).  If you should require two-way binding
+to the $location object (using {@link api/ng.directive:input.text
+ngModel} directive on an input field), you will need to specify an extra model property
+(e.g. `locationPath`) with two watchers which push $location updates in both directions. For
+example:
+<pre>
+<!-- html -->
+<input type="text" ng-model="locationPath" />
+</pre>
+<pre>
+// js - controller
+$scope.$watch('locationPath', function(path) {
+  $location.path(path);
+});
+
+$scope.$watch('$location.path()', function(path) {
+  scope.locationPath = path;
+});
+</pre>
+
+
+# Related API
+
+* {@link api/ng.$location $location API}
+
+
+
@@ -0,0 +1,104 @@
+@ngdoc overview
+@name Developer Guide: Angular Services: Creating Services
+@description
+
+While angular offers several useful services, for any nontrivial application you'll find it useful
+to write your own custom services. To do this you begin by registering a service factory function
+with a module either via the {@link api/angular.module Module#factory api} or directly
+via the {@link api/AUTO.$provide $provide} api inside of module config function.
+
+All angular services participate in {@link di dependency injection (DI)} by registering
+themselves with Angular's DI system (injector) under a `name` (id) as well as by declaring
+dependencies which need to be provided for the factory function of the registered service. The
+ability to swap dependencies for mocks/stubs/dummies in tests allows for services to be highly
+testable.
+
+
+# Registering Services
+
+To register a service, you must have a module that this service will be part of. Afterwards, you
+can register the service with the module either via the {@link api/angular.Module Module api} or
+by using the {@link api/AUTO.$provide $provide} service in the module configuration
+function.The following pseudo-code shows both approaches:
+
+Using the angular.Module api:
+<pre>
+var myModule = angular.module('myModule', []);
+myModule.factory('serviceId', function() {
+  var shinyNewServiceInstance;
+  //factory function body that constructs shinyNewServiceInstance
+  return shinyNewServiceInstance;
+});
+</pre>
+
+Using the $provide service:
+<pre>
+angular.module('myModule', [], function($provide) {
+  $provide.factory('serviceId', function() {
+    var shinyNewServiceInstance;
+    //factory function body that constructs shinyNewServiceInstance
+    return shinyNewServiceInstance;
+  });
+});
+</pre>
+
+Note that you are not registering a service instance, but rather a factory function that will
+create this instance when called.
+
+
+# Dependencies
+
+Services can not only be depended upon, but also have its own dependencies. These can be specified
+as arguments of the factory function. {@link di Read more} about the DI
+in Angular and the use of array notation and $inject property to make DI annotation
+minification-proof.
+
+Following is an example of a very simple service. This service depends on the `$window` service
+(which is passed as a parameter to the factory function) and is just a function. The service simply
+stores all notifications; after the third one, the service displays all of the notifications by
+window alert.
+
+<pre>
+angular.module('myModule', [], function($provide) {
+  $provide.factory('notify', ['$window', function(win) {
+    var msgs = [];
+    return function(msg) {
+      msgs.push(msg);
+      if (msgs.length == 3) {
+        win.alert(msgs.join("\n"));
+        msgs = [];
+      }
+    };
+  }]);
+});
+</pre>
+
+
+# Instantiating Angular Services
+
+All services in Angular are instantiates services lazily, this means that a service will be created
+only when it is needed for instantiation of a service or an application component that depends on it.
+In other words, angular won't instantiate lazy services unless they are requested directly or
+indirectly by the application.
+
+
+# Services as singletons
+
+Lastly, it is important to realize that all angular services are application singletons. This means
+that there is only one instance of a given service per injector. Since angular is lethally allergic
+to the global state, it is possible to create multiple injectors, each with its own instance of a
+given service, but that is rarely needed, except in tests where this property is crucially
+important.
+
+
+
+## Related Topics
+
+* {@link dev_guide.services.understanding_services Understanding Angular Services}
+* {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
+* {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers }
+* {@link dev_guide.services.testing_services Testing Angular Services}
+
+## Related API
+
+* {@link api/ng Angular Service API}
@@ -0,0 +1,118 @@
+@ngdoc overview
+@name Developer Guide: Angular Services: Injecting Services Into Controllers
+@description
+
+Using services as dependencies for controllers is very similar to using services as dependencies
+for another service.
+
+Since JavaScript is a dynamic language, DI can't figure out which services to inject by static
+types (like in static typed languages). Therefore, you can specify the service name by using the
+`$inject` property, which is an array containing strings with names of services to be injected.
+The name must match the corresponding service ID registered with angular. The order of the service
+IDs matters: the order of the services in the array will be used when calling the factory function
+with injected parameters. The names of parameters in factory function don't matter, but by
+convention they match the service IDs, which has added benefits discussed below.
+
+<pre>
+function myController($loc, $log) {
+this.firstMethod = function() {
+ // use $location service
+ $loc.setHash();
+};
+this.secondMethod = function() {
+ // use $log service
+ $log.info('...');
+};
+}
+// which services to inject ?
+myController.$inject = ['$location', '$log'];
+</pre>
+
+<doc:example module="MyServiceModule">
+<doc:source>
+<script>
+angular.
+ module('MyServiceModule', []).
+ factory('notify', ['$window', function(win) {
+    var msgs = [];
+    return function(msg) {
+      msgs.push(msg);
+      if (msgs.length == 3) {
+        win.alert(msgs.join("\n"));
+        msgs = [];
+      }
+    };
+  }]);
+
+function myController(scope, notifyService) {
+  scope.callNotify = function(msg) {
+    notifyService(msg);
+  };
+}
+
+myController.$inject = ['$scope','notify'];
+</script>
+
+<div ng-controller="myController">
+  <p>Let's try this simple notify service, injected into the controller...</p>
+  <input ng-init="message='test'" ng-model="message" >
+  <button ng-click="callNotify(message);">NOTIFY</button>
+</div>
+</doc:source>
+<doc:scenario>
+  it('should test service', function() {
+    expect(element(':input[ng\\:model="message"]').val()).toEqual('test');
+  });
+</doc:scenario>
+</doc:example>
+
+## Implicit Dependency Injection
+
+A new feature of Angular DI allows it to determine the dependency from the name of the parameter.
+Let's rewrite the above example to show the use of this implicit dependency injection of
+`$window`, `$scope`, and our `notify` service:
+
+<doc:example module="MyServiceModuleDI">
+<doc:source>
+<script>
+angular.
+ module('MyServiceModuleDI', []).
+ factory('notify', function($window) {
+    var msgs = [];
+    return function(msg) {
+      msgs.push(msg);
+      if (msgs.length == 3) {
+        $window.alert(msgs.join("\n"));
+        msgs = [];
+      }
+    };
+  });
+
+function myController($scope, notify) {
+  $scope.callNotify = function(msg) {
+    notify(msg);
+  };
+}
+</script>
+<div ng-controller="myController">
+  <p>Let's try the notify service, that is implicitly injected into the controller...</p>
+  <input ng-init="message='test'" ng-model="message">
+  <button ng-click="callNotify(message);">NOTIFY</button>
+</div>
+</doc:source>
+</doc:example>
+
+However, if you plan to {@link http://en.wikipedia.org/wiki/Minification_(programming) minify} your
+code, your variable names will get renamed in which case you will still need to explicitly specify
+dependencies with the `$inject` property.
+
+## Related Topics
+
+{@link dev_guide.services.understanding_services Understanding Angular Services}
+{@link dev_guide.services.creating_services Creating Angular Services}
+{@link dev_guide.services.managing_dependencies Managing Service Dependencies}
+{@link dev_guide.services.testing_services Testing Angular Services}
+
+## Related API
+
+{@link api/ng Angular Service API}
@@ -0,0 +1,114 @@
+@ngdoc overview
+@name Developer Guide: Angular Services: Managing Service Dependencies
+@description
+
+Angular allows services to declare other services as dependencies needed for construction of their
+instances.
+
+To declare dependencies, you specify them in the factory function signature and annotate the
+function with the inject annotations either using by setting the `$inject` property, as an array of
+string identifiers or using the array notation. Optionally the `$inject` property declaration can be
+dropped (see "Inferring `$inject`" but note that that is currently an experimental feature).
+
+Using the array notation:
+
+<pre>
+function myModuleCfgFn($provide) {
+  $provide.factory('myService', ['dep1', 'dep2', function(dep1, dep2) {}]);
+}
+</pre>
+
+
+Using the $inject property:
+
+<pre>
+function myModuleCfgFn($provide) {
+  var myServiceFactory = function(dep1, dep2) {};
+  myServiceFactory.$inject = ['dep1', 'dep2'];
+  $provide.factory('myService', myServiceFactory);
+}
+</pre>
+
+
+Using DI inference (incompatible with minifiers):
+
+<pre>
+function myModuleCfgFn($provide) {
+  $provide.factory('myService', function(dep1, dep2) {});
+}
+</pre>
+
+
+Here is an example of two services that depend on each other, as well as on other services that are
+provided by Angular's web framework:
+
+<pre>
+/**
+ * batchLog service allows for messages to be queued in memory and flushed
+ * to the console.log every 50 seconds.
+ *
+ * @param {*} message Message to be logged.
+ */
+  function batchLogModule($provide){
+    $provide.factory('batchLog', ['$timeout', '$log', function($timeout, $log) {
+      var messageQueue = [];
+
+      function log() {
+        if (messageQueue.length) {
+          $log('batchLog messages: ', messageQueue);
+          messageQueue = [];
+        }
+        $timeout(log, 50000);
+      }
+
+      // start periodic checking
+      log();
+
+      return function(message) {
+        messageQueue.push(message);
+      }
+    }]);
+
+    /**
+     * routeTemplateMonitor monitors each $route change and logs the current
+     * template via the batchLog service.
+     */
+    $provide.factory('routeTemplateMonitor',
+                ['$route', 'batchLog', '$rootScope',
+         function($route,   batchLog,   $rootScope) {
+      $rootScope.$on('$routeChangeSuccess', function() {
+        batchLog($route.current ? $route.current.template : null);
+      });
+    }]);
+  }
+
+  // get the main service to kick of the application
+  angular.injector([batchLogModule]).get('routeTemplateMonitor');
+</pre>
+
+Things to notice in this example:
+
+* The `batchLog` service depends on the built-in {@link api/ng.$timeout $timeout} and
+{@link api/ng.$log $log} services, and allows messages to be logged into the
+`console.log` in batches.
+* The `routeTemplateMonitor` service depends on the built-in {@link api/ng.$route
+$route} service as well as our custom `batchLog` service.
+* Both of our services use the factory function signature and array notation for inject annotations
+to declare their dependencies. It is important that the order of the string identifiers in the array
+is the same as the order of argument names in the signature of the factory function. Unless the
+dependencies are inferred from the function signature, it is this array with IDs and their order
+that the injector uses to determine which services and in which order to inject.
+
+
+## Related Topics
+
+* {@link dev_guide.services.understanding_services Understanding Angular Services}
+* {@link dev_guide.services.creating_services Creating Angular Services}
+* {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers }
+* {@link dev_guide.services.testing_services Testing Angular Services}
+
+
+## Related API
+
+* {@link api/ng Angular Service API}
+* {@link api/angular.injector Angular Injector API}
@@ -0,0 +1,21 @@
+@ngdoc overview
+@name Developer Guide: Angular Services
+@description
+
+Services are a feature that angular brings to client-side web apps from the server side, where
+services have been commonly used for a long time.  Services in angular apps are substitutable
+objects that are wired together using {@link di dependency injection (DI)}. Services are
+most often used with {@link di dependency injection}, also a key feature of angular apps.
+
+
+## Related Topics
+
+* {@link dev_guide.services.understanding_services Understanding Angular Services}
+* {@link dev_guide.services.creating_services Creating Angular Services}
+* {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
+* {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers}
+* {@link dev_guide.services.testing_services Testing Angular Services}
+
+## Related API
+
+* {@link api/ng Angular Service API}
@@ -0,0 +1,62 @@
+@ngdoc overview
+@name Developer Guide: Angular Services: Testing Angular Services
+@description
+
+Following is a unit test for the service in the example in {@link
+dev_guide.services.creating_services Creating Angular Services}. The unit test example uses Jasmine
+spy (mock) instead of a real browser alert.
+
+<pre>
+var mock, notify;
+
+beforeEach(function() {
+  mock = {alert: jasmine.createSpy()};
+
+  module(function($provide) {
+    $provide.value('$window', mock);
+  });
+
+  inject(function($injector) {
+    notify = $injector.get('notify');
+  });
+});
+
+it('should not alert first two notifications', function() {
+  notify('one');
+  notify('two');
+
+  expect(mock.alert).not.toHaveBeenCalled();
+});
+
+it('should alert all after third notification', function() {
+  notify('one');
+  notify('two');
+  notify('three');
+
+  expect(mock.alert).toHaveBeenCalledWith("one\ntwo\nthree");
+});
+
+it('should clear messages after alert', function() {
+  notify('one');
+  notify('two');
+  notify('third');
+  notify('more');
+  notify('two');
+  notify('third');
+
+  expect(mock.alert.callCount).toEqual(2);
+  expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
+});
+</pre>
+
+
+## Related Topics
+
+* {@link dev_guide.services.understanding_services Understanding Angular Services}
+* {@link dev_guide.services.creating_services Creating Angular Services}
+* {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
+* {@link dev_guide.services.injecting_controllers Injecting Services Into Conrollers}
+
+## Related API
+
+* {@link api/ng Angular Service API}
@@ -0,0 +1,36 @@
+@ngdoc overview
+@name Developer Guide: Angular Services: Understanding Angular Services
+@description
+
+Angular services are singletons that carry out specific tasks common to web apps, such as the
+{@link api/ng.$http $http service} that provides low level access to the browser's
+`XMLHttpRequest` object.
+
+To use an angular service, you identify it as a dependency for the dependent (a controller, or
+another service) that depends on the service.  Angular's dependency injection subsystem takes care
+of the rest. The angular injector subsystem is in charge of service instantiation, resolution of
+dependencies, and provision of dependencies to factory functions as requested.
+
+Angular injects dependencies using "constructor" injection (the service is passed in via a factory
+function). Because JavaScript is a dynamically typed language, Angular's dependency injection
+subsystem cannot use static types to identify service dependencies. For this reason a dependent
+must explicitly define its dependencies by using the `$inject` property.  For example:
+
+        myController.$inject = ['$location'];
+
+The angular web framework provides a set of services for common operations. Like other core angular
+variables and identifiers, the built-in services always start with `$` (such as `$http` mentioned
+above). You can also create your own custom services.
+
+
+## Related Topics
+
+* {@link di About Angular Dependency Injection}
+* {@link dev_guide.services.creating_services Creating Angular Services}
+* {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
+* {@link dev_guide.services.testing_services Testing Angular Services}
+
+## Related API
+
+* {@link api/ng Angular Service API}
+* {@link api/angular.injector Injector API}
@@ -0,0 +1,23 @@
+@ngdoc overview
+@name Developer Guide: Templates: Working With CSS in Angular
+@description
+
+
+Angular sets these CSS classes. It is up to your application to provide useful styling.
+
+# CSS classes used by angular
+
+* `ng-invalid`, `ng-valid`
+  - **Usage:** angular applies this class to an input widget element if that element's input does
+    notpass validation. (see {@link api/ng.directive:input input} directive).
+
+* `ng-pristine`, `ng-dirty`
+  - **Usage:** angular {@link api/ng.directive:input input} directive applies `ng-pristine` class
+    to a new input widget element which did not have user interaction. Once the user interacts with
+    the input widget the class is changed to `ng-dirty`.
+
+
+## Related Topics
+
+* {@link dev_guide.templates Angular Templates}
+* {@link forms Angular Forms}
@@ -0,0 +1,38 @@
+@ngdoc overview
+@name Developer Guide: Templates: Data Binding in Angular
+@description
+
+Data-binding in angular web apps is the automatic syncing of data between the model and view
+components.  The way that angular implements data-binding lets you treat the model as the
+single-source-of-truth in your application.  The view is a projection of the model at all times.
+When the model changes, the view reflects the change, and vice versa.
+
+## Data Binding in Classical Template Systems
+
+<img class="right" src="img/One_Way_Data_Binding.png"/>
+Most templating systems bind data in only one direction: they merge template and model components
+together into a view, as illustrated in the diagram. After the merge occurs, changes to the model
+or related sections of the view are NOT automatically reflected in the view. Worse, any changes
+that the user makes to the view are not reflected in the model. This means that the developer has
+to write code that constantly syncs the view with the model and the model with the view.
+
+## Data Binding in Angular Templates
+
+<img class="right" src="img/Two_Way_Data_Binding.png"/>
+The way angular templates works is different, as illustrated in the diagram. They are different
+because first the template (which is the uncompiled HTML along with any additional markup or
+directives) is compiled on the browser, and second, the compilation step produces a live view. We
+say live because any changes to the view are immediately reflected in the model, and any changes in
+the model are propagated to the view. This makes the model always the single-source-of-truth for
+the application state, greatly simplifying the programing model for the developer. You can think of
+the view as simply an instant projection of your model.
+
+Because the view is just a projection of the model, the controller is completely separated from the
+view and unaware of it. This makes testing a snap because it is easy to test your controller in
+isolation without the view and the related DOM/browser dependency.
+
+
+## Related Topics
+
+* {@link scope Angular Scopes}
+* {@link dev_guide.templates Angular Templates}
@@ -0,0 +1,60 @@
+@ngdoc overview
+@name Developer Guide: Templates: Filters: Creating Angular Filters
+@description
+
+Writing your own filter is very easy: just register a new filter (injectable) factory function with
+your module. This factory function should return a new filter function which takes the input value
+as the first argument. Any filter arguments are passed in as additional arguments to the filter
+function.
+
+The following sample filter reverses a text string. In addition, it conditionally makes the
+text upper-case and assigns color.
+
+<doc:example module="MyReverseModule">
+<doc:source>
+<script>
+  angular.module('MyReverseModule', []).
+    filter('reverse', function() {
+      return function(input, uppercase) {
+        var out = "";
+        for (var i = 0; i < input.length; i++) {
+          out = input.charAt(i) + out;
+        }
+        // conditional based on optional argument
+        if (uppercase) {
+          out = out.toUpperCase();
+        }
+        return out;
+      }
+    });
+
+  function Ctrl($scope) {
+    $scope.greeting = 'hello';
+  }
+</script>
+
+<div ng-controller="Ctrl">
+  <input ng-model="greeting" type="greeting"><br>
+  No filter: {{greeting}}<br>
+  Reverse: {{greeting|reverse}}<br>
+  Reverse + uppercase: {{greeting|reverse:true}}<br>
+</div>
+</doc:source>
+<doc:scenario>
+  it('should reverse greeting', function() {
+    expect(binding('greeting|reverse')).toEqual('olleh');
+    input('greeting').enter('ABC');
+    expect(binding('greeting|reverse')).toEqual('CBA');
+  });
+</doc:scenario>
+</doc:example>
+
+
+## Related Topics
+
+* {@link dev_guide.templates.filters Understanding Angular Filters}
+* {@link compiler Angular HTML Compiler}
+
+## Related API
+
+* {@link api/ng.$filter Angular Filter API}
@@ -0,0 +1,28 @@
+@ngdoc overview
+@name Developer Guide: Templates: Understanding Angular Filters
+@description
+
+Angular filters format data for display to the user. In addition to formatting data, filters can
+also modify the DOM. This allows filters to handle tasks such as conditionally applying CSS styles
+to filtered output.
+
+For example, you might have a data object that needs to be formatted according to the locale before
+displaying it to the user. You can pass expressions through a chain of filters like this:
+
+        name | uppercase
+
+The expression evaluator simply passes the value of name to
+{@link api/ng.filter:uppercase uppercase filter}.
+
+In addition to formatting data, filters can also modify the DOM. This allows filters to handle
+tasks such as conditionally applying CSS styles to filtered output.
+
+
+## Related Topics
+
+* {@link dev_guide.templates.filters.using_filters Using Angular Filters}
+* {@link dev_guide.templates.filters.creating_filters Creating Angular Filters}
+
+## Related API
+
+* {@link api/ng.$filter Angular Filter API}
@@ -0,0 +1,40 @@
+@ngdoc overview
+@name Developer Guide: Templates: Filters: Using Angular Filters
+@description
+
+Filters can be part of any {@link api/ng.$rootScope.Scope} evaluation but are typically used to format
+expressions in bindings in your templates:
+
+        {{ expression | filter }}
+
+Filters typically transform the data to a new data type, formatting the data in the process.
+Filters can also be chained, and can take optional arguments.
+
+You can chain filters using this syntax:
+
+        {{ expression | filter1 | filter2 }}
+
+You can also pass colon-delimited arguments to filters, for example, to display the number 123 with
+2 decimal points:
+
+        123 | number:2
+
+Here are some examples that show values before and after applying different filters to an
+expression in a binding:
+
+* No filter: `{{1234.5678}}` => `1234.5678`
+* Number filter: `{{1234.5678|number}}` => `1,234.57`. Notice the "," and rounding to two
+significant digits.
+* Filter with arguments: `{{1234.5678|number:5}}` => `1,234.56780`. Filters can take optional
+arguments, separated by colons in a binding. For example, the "number" filter takes a number
+argument that specifies how many digits to display to the right of the decimal point.
+
+
+## Related Topics
+
+* {@link dev_guide.templates.filters Understanding Angular Filters}
+* {@link dev_guide.templates.filters.creating_filters Creating Angular Filters}
+
+## Related API
+
+* {@link api/ng.$filter Angular Filter API}
@@ -0,0 +1,57 @@
+@ngdoc overview
+@name Developer Guide: Understanding Angular Templates
+@description
+
+An angular template is the declarative specification that, along with information from the model
+and controller, becomes the rendered view that a user sees in the browser. It is the static DOM,
+containing HTML, CSS, and angular-specific elements and angular-specific element attributes.  The
+angular elements and attributes direct angular to add behavior and transform the template DOM into
+the dynamic view DOM.
+
+These are the types of angular elements and element attributes you can use in a template:
+
+* {@link guide/directive Directive} — An attribute or element that
+  augments an existing DOM element or represents a reusable DOM component - a widget.
+* {@link api/ng.$interpolate Markup} — The double
+curly brace notation `{{ }}` to bind expressions to elements is built-in angular markup.
+* {@link dev_guide.templates.filters Filter} — Formats your data for display to the user.
+* {@link forms Form controls} — Lets you validate user input.
+
+Note:  In addition to declaring the elements above in templates, you can also access these elements
+in JavaScript code.
+
+The following code snippet shows a simple angular template made up of standard HTML tags along with
+angular {@link guide/directive directives} and curly-brace bindings
+with {@link expression expressions}:
+
+<pre>
+<html ng-app>
+ <!-- Body tag augmented with ngController directive  -->
+ <body ng-controller="MyController">
+   <input ng-model="foo" value="bar">
+   <!-- Button tag with ng-click directive, and
+          string expression 'buttonText'
+          wrapped in "{{ }}" markup -->
+   <button ng-click="changeFoo()">{{buttonText}}</button>
+   <script src="angular.js">
+ </body>
+</html>
+</pre>
+
+In a simple single-page app, the template consists of HTML, CSS, and angular directives contained
+in just one HTML file (usually `index.html`). In a more complex app, you can display multiple views
+within one main page using "partials", which are segments of template located in separate HTML
+files.  You "include" the partials in the main page using the {@link api/ng.$route
+$route} service in conjunction with the {@link api/ng.directive:ngView ngView} directive. An
+example of this technique is shown in the {@link tutorial/ angular tutorial}, in steps seven and
+eight.
+
+
+## Related Topics
+
+* {@link dev_guide.templates.filters Angular Filters}
+* {@link forms Angular Forms}
+
+## Related API
+
+* {@link api/index API Reference}
@@ -0,0 +1,281 @@
+@ngdoc overview
+@name Developer Guide: Unit Testing
+@description
+
+JavaScript is a dynamically typed language which comes with great power of expression, but it also
+come with almost no-help from the compiler. For this reason we feel very strongly that any code
+written in JavaScript needs to come with a strong set of tests. We have built many features into
+angular which makes testing your angular applications easy. So there is no excuse for not do it.
+# It is all about NOT mixing concerns
+Unit testing as the name implies is about testing individual units of code. Unit tests try to
+answer the question: Did I think about the logic correctly. Does the sort function order the list
+in the right order. In order to answer such question it is very important that we can isolate it.
+That is because when we are testing the sort function we don't want to be forced into crating
+related pieces such as the DOM elements, or making any XHR calls in getting the data to sort. While
+this may seem obvious it usually is very difficult to be able to call an individual function on a
+typical project. The reason is that the developers often time mix concerns, and they end up with a
+piece of code which does everything. It reads the data from XHR, it sorts it and then it
+manipulates the DOM. With angular we try to make it easy for you to do the right thing, and so we
+provide dependency injection for your XHR (which you can mock out) and we crated abstraction which
+allow you to sort your model without having to resort to manipulating the DOM. So that in the end,
+it is easy to write a sort function which sorts some data, so that your test can create a data set,
+apply the function, and assert that the resulting model is in the correct order. The test does not
+have to wait for XHR, or create the right kind of DOM, or assert that your function has mutated the
+DOM in the right way. Angular is written with testability in mind, but it still requires that you
+do the right thing. We tried to make the right thing easy, but angular is not magic, which means if
+you don't follow these, you may very well end up with an untestable application.
+
+## Dependency Inject
+There are several ways in which you can get a hold of a dependency:
+1. You could create it using the `new` operator.
+2. You could look for it in a well know place, also known as global singleton.
+3. You could ask a registry (also known as service registry) for it. (But how do you get a hold of
+the registry? Must likely by looking it up in a well know place. See #2)
+4. You could expect that the it be handed to you.
+
+Out of the list above only the last of is testable. Lets look at why:
+
+### Using the `new` operator
+
+While there is nothing wrong with the `new` operator fundamentally the issue is that calling a new
+on a constructor permanently binds the call site to the type. For example lets say that we are
+trying to instantiate an `XHR` so that we can get some data from the server.
+
+<pre>
+function MyClass() {
+  this.doWork = function() {
+    var xhr = new XHR();
+    xhr.open(method, url, true);
+    xhr.onreadystatechange = function() {...}
+    xhr.send();
+  }
+}
+</pre>
+
+The issue becomes, that in tests, we would very much like to instantiate a `MockXHR` which would
+allow us to return fake data and simulate network failures. By calling `new XHR()` we are
+permanently bound to the actual one, and there is no good way to replace it. Yes there is monkey
+patching, that is a bad idea for many reasons, which is outside the scope of this document.
+
+The class above is hard to test since we have to resort to monkey patching:
+<pre>
+var oldXHR = XHR;
+XHR = function MockXHR() {};
+var myClass = new MyClass();
+myClass.doWork();
+// assert that MockXHR got called with the right arguments
+XHR = oldXHR; // if you forget this bad things will happen
+</pre>
+
+
+### Global look-up:
+Another way to approach the problem is look for the service in a well known location.
+
+<pre>
+function MyClass() {
+  this.doWork = function() {
+    global.xhr({
+      method:'...',
+      url:'...',
+      complete:function(response){ ... }
+    })
+  }
+}
+</pre>
+
+While no new instance of dependency is being created, it is fundamentally the same as `new`, in
+that there is no good way to intercept the call to `global.xhr` for testing purposes, other then
+through monkey patching. The basic issue for testing is that global variable needs to be mutated in
+order to replace it with call to a mock method. For further explanation why this is bad see: {@link
+http://misko.hevery.com/code-reviewers-guide/flaw-brittle-global-state-singletons/ Brittle Global
+State & Singletons}
+
+The class above is hard to test since we have to change global state:
+<pre>
+var oldXHR = global.xhr;
+global.xhr = function mockXHR() {};
+var myClass = new MyClass();
+myClass.doWork();
+// assert that mockXHR got called with the right arguments
+global.xhr = oldXHR; // if you forget this bad things will happen
+</pre>
+
+
+### Service Registry:
+
+It may seem as that this can be solved by having a registry for all of the services, and then
+having the tests replace the services as needed.
+
+<pre>
+function MyClass() {
+  var serviceRegistry = ????;
+  this.doWork = function() {
+    var xhr = serviceRegistry.get('xhr');
+    xhr({
+      method:'...',
+      url:'...',
+      complete:function(response){ ... }
+    })
+}
+</pre>
+
+However, where dose the serviceRegistry come from? if it is:
+* `new`-ed up, the the test has no chance to reset the services for testing
+*  global look-up, then the service returned is global as well (but resetting is easier, since
+there is only one global variable to be reset).
+
+The class above is hard to test since we have to change global state:
+<pre>
+var oldServiceLocator = global.serviceLocator;
+global.serviceLocator.set('xhr', function mockXHR() {});
+var myClass = new MyClass();
+myClass.doWork();
+// assert that mockXHR got called with the right arguments
+global.serviceLocator = oldServiceLocator; // if you forget this bad things will happen
+</pre>
+
+
+### Passing in Dependencies:
+Lastly the dependency can be passed in.
+
+<pre>
+function MyClass(xhr) {
+  this.doWork = function() {
+    xhr({
+      method:'...',
+      url:'...',
+      complete:function(response){ ... }
+    })
+}
+</pre>
+
+This is the preferred way since the code makes no assumptions as to where the `xhr` comes from,
+rather that whoever created the class was responsible for passing it in. Since the creator of the
+class should be different code than the user of the class, it separates the responsibility of
+creation from the logic, and that is what dependency-injection is in a nutshell.
+
+The class above is very testable, since in the test we can write:
+<pre>
+function xhrMock(args) {...}
+var myClass = new MyClass(xhrMock);
+myClass.doWork();
+// assert that xhrMock got called with the right arguments
+</pre>
+
+Notice that no global variables were harmed in the writing of this test.
+
+Angular comes with {@link di dependency-injection} built in which makes the right thing
+easy to do, but you still need to do it if you wish to take advantage of the testability story.
+
+## Controllers
+What makes each application unique is its logic, which is what we would like to test. If the logic
+for your application is mixed in with DOM manipulation, it will be hard to test as in the example
+below:
+
+<pre>
+function PasswordController() {
+  // get references to DOM elements
+  var msg = $('.ex1 span');
+  var input = $('.ex1 input');
+  var strength;
+
+  this.grade = function() {
+    msg.removeClass(strength);
+    var pwd = input.val();
+    password.text(pwd);
+    if (pwd.length > 8) {
+      strength = 'strong';
+    } else if (pwd.length > 3) {
+      strength = 'medium';
+    } else {
+      strength = 'weak';
+    }
+    msg
+     .addClass(strength)
+     .text(strength);
+  }
+}
+</pre>
+
+The code above is problematic from testability, since it requires your test to have the right kind
+of DOM present when the code executes. The test would look like this:
+
+<pre>
+var input = $('<input type="text"/>');
+var span = $('<span>');
+$('body').html('<div class="ex1">')
+  .find('div')
+    .append(input)
+    .append(span);
+var pc = new PasswordController();
+input.val('abc');
+pc.grade();
+expect(span.text()).toEqual('weak');
+$('body').html('');
+</pre>
+
+In angular the controllers are strictly separated from the DOM manipulation logic which results in
+a much easier testability story as can be seen in this example:
+
+<pre>
+function PasswordCntrl($scope) {
+  $scope.password = '';
+  $scope.grade = function() {
+    var size = $scope.password.length;
+    if (size > 8) {
+      $scope.strength = 'strong';
+    } else if (size > 3) {
+      $scope.strength = 'medium';
+    } else {
+      $scope.strength = 'weak';
+    }
+  };
+}
+</pre>
+
+and the tests is straight forward
+
+<pre>
+var pc = new PasswordController();
+pc.password('abc');
+pc.grade();
+expect(span.strength).toEqual('weak');
+</pre>
+
+Notice that the test is not only much shorter but it is easier to follow what is going on. We say
+that such a test tells a story, rather then asserting random bits which don't seem to be related.
+
+
+## Filters
+{@link api/ng.$filter Filters} are functions which transform the data into user readable
+format. They are important because they remove the formatting responsibility from the application
+logic, further simplifying the application logic.
+
+<pre>
+myModule.filter('length', function() {
+  return function(text){
+    return (''+(text||'')).length;
+  }
+});
+
+var length = $filter('length');
+expect(length(null)).toEqual(0);
+expect(length('abc')).toEqual(3);
+</pre>
+
+## Directives
+Directives in angular are responsible for updating the DOM when the state of the model changes.
+
+
+## Mocks
+oue
+## Global State Isolation
+oue
+# Preferred way of Testing
+uo
+## JavaScriptTestDriver
+ou
+## Jasmine
+ou
+## Sample project
+uoe
@@ -0,0 +1,234 @@
+@ngdoc overview
+@name Developer Guide: Dependency Injection
+@description
+
+# Dependency Injection
+
+Dependency Injection (DI) is a software design pattern that deals with how code gets hold of its
+dependencies.
+
+For in-depth discussion about DI, see {@link http://en.wikipedia.org/wiki/Dependency_injection
+Dependency Injection} at Wikipedia, {@link http://martinfowler.com/articles/injection.html
+Inversion of Control} by Martin Fowler, or read about DI in your favorite software design pattern
+book.
+
+## DI in a nutshell
+
+There are only three ways how an object or a function can get a hold of its dependencies:
+
+  1. The dependency can be created, typically using the `new` operator.
+
+  2. The dependency can be looked up by referring to a global variable.
+
+  3. The dependency can be passed in to where it is needed.
+
+
+The first two option of creating or looking up dependencies are not optimal, because they hard
+code the dependency, making it difficult, if not impossible, to modify the dependencies.
+This is especially problematic in tests, where it is often desirable to provide mock dependencies
+for test isolation.
+
+The third option is the most viable, since it removes the responsibility of locating the
+dependency from the component. The dependency is simply handed to the component.
+
+<pre>
+  function SomeClass(greeter) {
+    this.greeter = greeter
+  }
+  
+  SomeClass.prototype.doSomething = function(name) {
+    this.greeter.greet(name);
+  }
+</pre>
+
+In the above example the `SomeClass` is not concerned with locating the `greeter` dependency, it
+is simply handed the `greeter` at runtime.
+
+This is desirable, but it puts the responsibility of getting hold of the dependency onto the
+code responsible for the construction of `SomeClass`.
+
+To manage the responsibility of dependency creation, each angular application has an {@link
+api/angular.injector injector}. The injector is a service locator that is responsible for
+construction and lookup of dependencies.
+
+
+Here is an example of using  the injector service. 
+<pre>
+  // Provide the wiring information in a module
+  angular.module('myModule', []).
+  
+    // Teach the injector how to build a 'greeter'
+    // Notice that greeter itself is dependent on '$window'
+    factory('greeter', function($window) {
+      // This is a factory function, and is responsible for 
+      // creating the 'greet' service.
+      return {
+        greet: function(text) {
+          $window.alert(text);
+        }
+      };
+    }).
+    
+  // New injector is created from the module. 
+  // (This is usually done automatically by angular bootstrap)
+  var injector = angular.injector('myModule');
+  
+  // Request any dependency from the injector
+  var greeter = injector.get('greeter');
+</pre>
+
+Asking for dependencies solves the issue of hard coding, but it also means that the injector needs
+to be passed throughout the application. Passing the injector breaks the {@link
+http://en.wikipedia.org/wiki/Law_of_Demeter Law of Demeter}. To remedy this, we turn the
+dependency lookup responsibility to the injector by declaring the dependencies as in this example:
+
+<pre>
+  <!-- Given this HTML -->
+  <div ng-controller="MyController">
+    <button ng-click="sayHello()">Hello</button>
+  </div>
+</pre>  
+<pre>
+  // And this controller definition
+  function MyController($scope, greeter) {
+    $scope.sayHello = function() {
+      greeter('Hello World');
+    };
+  }
+  
+  // The 'ng-controller' directive does this behind the scenes
+  injector.instantiate(MyController);
+</pre>
+
+Notice that by having the `ng-controller` instantiate the class, it can satisfy all of the
+dependencies of the `MyController` without the controller ever knowing about the injector. This is
+the best outcome. The application code simply ask for the dependencies it needs, without having to
+deal with the injector. This setup does not break the Law of Demeter.
+
+# Dependency Annotation
+
+How does the injector know what service needs to be injected? 
+
+The application developer needs to provide annotation information, that the injector uses in order
+to resolve the dependencies. Throughout Angular certain API functions are invoked using the
+injector, as per the API documentation. The injector needs to know what services to inject into
+the function. Below are three equivalent ways of annotating your code with service name
+information. These can be used interchangeably as you see fit and are equivalent.
+
+# Inferring Dependencies
+
+The simplest way to get hold of the dependencies, is to assume that the function parameter names
+are the names of the dependencies.
+
+<pre>
+  function MyController($scope, greeter) {
+    ...
+  }
+</pre>
+
+Given a function the injector can infer the names of the service to inject by examining the
+function declaration and extracting the parameter names. In the above example `$scope`, and
+`greeter` are two services which need to be injected into the function.
+
+While straightforward, this method will not work with JavaScript minifiers/obfuscators as they
+rename the method parameter names. This makes this way of annotating only useful for {@link
+http://www.pretotyping.org/ pretotyping}, and demo applications.
+
+# `$inject` Annotation
+
+To allow the minifers to rename the function parameters and still be able to inject right services
+the function needs to be annotate with the `$inject` property. The `$inject` property is an array
+of service names to inject.
+
+<pre>
+  var MyController = function(renamed$scope, renamedGreeter) {
+    ...
+  }
+  MyController.$inject = ['$scope', 'greeter'];
+</pre>
+
+Care must be taken that the `$inject` annotation is kept in sync with the actual arguments in the
+function declaration.
+
+This method of annotation is useful for controller declarations since it assigns the annotation
+information with the function.
+
+# Inline Annotation
+
+Sometimes using the `$inject` annotation style is not convenient such as when annotating
+directives.
+
+For example:
+<pre>
+  someModule.factory('greeter', function($window) {
+    ...;
+  });
+</pre>
+
+Results in code bloat do to the need of temporary variable:
+<pre>
+  var greeterFactory = function(renamed$window) {
+    ...;
+  };
+  
+  greeterFactory.$inject = ['$window'];
+  
+  someModule.factory('greeter', greeterFactory);
+</pre>
+
+For this reason the third annotation style is provided as well.
+<pre>
+  someModule.factory('greeter', ['$window', function(renamed$window) {
+    ...;
+  }]);
+</pre>
+
+Keep in mind that all of the annotation styles are equivalent and can be used anywhere in Angular
+where injection is supported.
+
+
+# Where can I use DI?
+
+DI is pervasive throughout Angular. It is typically used in controllers and factory methods. 
+
+## DI in controllers
+
+Controllers are classes which are responsible for application behavior. Recommended way of 
+declaring controllers is:
+
+<pre>
+  var MyController = function(dep1, dep2) {
+    ...
+  }
+  MyController.$inject = ['dep1', 'dep2'];
+  
+  MyController.prototype.aMethod = function() {
+    ...
+  }
+</pre>
+
+
+## Factory methods
+
+Factory methods are responsible for creating most objects in Angular. Examples are directives,
+services, and filters. The factory methods are register with the module, and the recommended way
+of declaring factories is:
+
+<pre>
+  angualar.module('myModule', []).
+    config(['depProvider', function(depProvider){
+      ...
+    }]).
+    factory('serviceId', ['depService', function(depService) {
+      ...
+    }]).
+    directive('directiveName', ['depService', function(depService) {
+      ...
+    }]).
+    filter('filterName', ['depService', function(depService) {
+      ...
+    }]).
+    run(['depService', function(depService) {
+      ...
+    }]);
+</pre>
@@ -0,0 +1,691 @@
+@ngdoc overview
+@name Directives
+@description
+
+Directives are a way to teach HTML new tricks. During DOM compilation directives are matched
+against the HTML and executed. This allows directives to register behavior, or transform the DOM.
+
+Angular comes with a built in set of directives which are useful for building web applications but
+can be extended such that HTML can be turned into a declarative domain specific language (DSL).
+
+# Invoking directives from HTML
+
+Directives have camel cased names such as 'ngBind'. The directive can be invoked by translating
+the camel case name into snake case with these special characters `:`, `-`, or `_`. Optionally the
+directive can be prefixed with `x-`, or `data-` to make it HTML validator compliant. Here is a
+list of some of the possible directive names: `ng:bind`, `ng-bind`, `ng_bind`, `x-ng-bind` and
+`data-ng-bind`.
+
+The directives can be placed in element names, attributes, class names, as well as comments. Here
+are some equivalent examples of invoking `myDir`. (However, most directives are restricted to
+attribute only.)
+
+<pre>
+  <span my-dir="exp"></span>
+  <span class="my-dir: exp;"></span>
+  <my-dir></my-dir>
+  <!-- directive: my-dir exp -->
+</pre>
+
+Directives can be invoked in many different ways, but are equivalent in the end result as shown in
+the following example.
+
+<doc:example>
+  <doc:source >
+   <script>
+     function Ctrl1($scope) {
+       $scope.name = 'angular';
+     }
+   </script>
+   <div ng-controller="Ctrl1">
+     Hello <input ng-model='name'> <hr/>
+     &ltspan ng:bind="name"&gt <span ng:bind="name"></span> <br/>
+     &ltspan ng_bind="name"&gt <span ng_bind="name"></span> <br/>
+     &ltspan ng-bind="name"&gt <span ng-bind="name"></span> <br/>
+     &ltspan data-ng-bind="name"&gt <span data-ng-bind="name"></span> <br/>
+     &ltspan x-ng-bind="name"&gt <span x-ng-bind="name"></span> <br/>
+   </div>
+  </doc:source>
+  <doc:scenario>
+    it('should show off bindings', function() {
+      expect(element('div[ng-controller="Ctrl1"] span[ng-bind]').text()).toBe('angular');
+    });
+  </doc:scenario>
+</doc:example>
+
+# String interpolation
+
+During the compilation process the {@link api/ng.$compile compiler} matches text and
+attributes using the {@link api/ng.$interpolate $interpolate} service to see if they
+contain embedded expressions. These expressions are registered as {@link
+api/ng.$rootScope.Scope#$watch watches} and will update as part of normal {@link
+api/ng.$rootScope.Scope#$digest digest} cycle. An example of interpolation is shown
+here:
+
+<pre>
+<img src="img/{{username}}.jpg">Hello {{username}}!</img>
+</pre>
+
+# Compilation process, and directive matching
+
+Compilation of HTML happens in three phases:
+
+  1. First the HTML is parsed into DOM using the standard browser API. This is important to
+  realize because the templates must be parsable HTML. This is in contrast to most templating
+  systems that operate on strings, rather then on DOM elements.
+
+  2. The compilation of the DOM is performed by the call to {@link api/ng.$compile
+  $compile()} method. The method traverses the DOM and matches the directives. If a match is found
+  it is added to the list of directives associated with the given DOM element. Once all directives
+  for a given DOM element have been identified they are sorted by priority and their `compile()`
+  functions are executed. The directive compile function has a chance to modify the DOM structure
+  and is responsible for producing a `link()` function explained next. The {@link
+  api/ng.$compile $compile()} method returns a combined linking function, which is a
+  collection of all of the linking functions returned from the individual directive compile
+  functions.
+
+  3. Link the template with scope by calling the linking function returned from the previous step.
+  This in turn will call the linking function of the individual directives allowing them to
+  register any listeners on the elements and set up any {@link
+  api/ng.$rootScope.Scope#$watch watches} with the {@link
+  api/ng.$rootScope.Scope scope}. The result of this is a live binding between the
+  scope and the DOM. A change in the scope is reflected in the DOM.
+
+<pre>
+  var $compile = ...; // injected into your code
+  var scope = ...;
+
+  var html = '<div ng-bind='exp'></div>';
+
+  // Step 1: parse HTML into DOM element
+  var template = angular.element(html);
+
+  // Step 2: compile the template
+  var linkFn = $compile(template);
+
+  // Step 3: link the compiled template with the scope.
+  linkFn(scope);
+</pre>
+
+## Reasons behind the compile/link separation
+
+At this point you may wonder why is the compile process broken down to a compile and link phase.
+To understand this, lets look at a real world example with repeater:
+
+<pre>
+  Hello {{user}}, you have these actions:
+  <ul>
+    <li ng-repeat="action in user.actions">
+      {{action.description}}
+    </li>
+  </ul>
+</pre>
+
+The short answer is that compile and link separation is needed any time a change in model causes
+a change in DOM structure such as in repeaters.
+
+When the above example is compiled, the compiler visits every node and looks for directives. The
+`{{user}}` is an example of {@link api/ng.$interpolate interpolation} directive. {@link
+api/ng.directive:ngRepeat ngRepeat} is another directive. But {@link
+api/ng.directive:ngRepeat ngRepeat} has a dilemma. It needs to be
+able to quickly stamp out new `li`s for every `action` in `user.actions`. This means that it needs
+to save a clean copy of the `li` element for cloning purposes and as new `action`s are inserted,
+the template `li` element needs to be cloned and inserted into `ul`. But cloning the `li` element
+is not enough. It also needs to compile the `li` so that its directives such as
+`{{action.descriptions}}` evaluate against the right {@link api/ng.$rootScope.Scope
+scope}. A naive method would be to simply insert a copy of the `li` element and then compile it.
+But compiling on every `li` element clone would be slow, since the compilation requires that we
+traverse the DOM tree and look for directives and execute them. If we put the compilation inside a
+repeater which needs to unroll 100 items we would quickly run into performance problems.
+
+The solution is to break the compilation process into two phases the compile phase where all of
+the directives are identified and sorted by priority, and a linking phase where any work which
+links a specific instance of the {@link api/ng.$rootScope.Scope scope} and the specific
+instance of an `li` is performed.
+
+{@link api/ng.directive:ngRepeat ngRepeat} works by preventing the
+compilation process form descending into `li` element. Instead the {@link
+api/ng.directive:ngRepeat ngRepeat} directive compiles `li`
+seperatly. The result of of the `li` element compilation is a linking function which contains all
+of the directives contained in the `li` element ready to be attached to a specific clone of `li`
+element. At runtime the {@link api/ng.directive:ngRepeat ngRepeat}
+watches the expression and as items are added to the array it clones the `li` element, creates a
+new {@link api/ng.$rootScope.Scope scope} for the cloned `li` element and calls the
+link function on the cloned `li`.
+
+Summary:
+
+  * *compile function* - The compile function is relatively rare in directives, since most
+    directives are concerned with working with a specific DOM element instance rather then
+    transforming the template DOM element. Any operation which can be shared among the instance of
+    directives should be moved to the compile function for performance reasons.
+
+  * *link function* - It is rare for the directive not to have a link function. Link function
+    allows the directive to register listeners to the specific cloned DOM element instance as well
+    as to copy content into the DOM from the scope.
+
+
+# Writing directives (short version)
+
+In this example we will build a directive which displays the current time.
+
+<doc:example module="time">
+  <doc:source>
+   <script>
+     function Ctrl2($scope) {
+       $scope.format = 'M/d/yy h:mm:ss a';
+     }
+
+     angular.module('time', [])
+       // Register the 'myCurrentTime' directive factory method.
+       // We inject $defer and dateFilter service since the factory method is DI.
+       .directive('myCurrentTime', function($defer, dateFilter) {
+         // return the directive link function. (compile function not needed)
+         return function(scope, element, attrs) {
+           var format,  // date format
+               deferId; // deferId, so that we can cancel the time updates
+
+           // used to update the UI
+           function updateTime() {
+             element.text(dateFilter(new Date(), format));
+           }
+
+           // watch the expression, and update the UI on change.
+           scope.$watch(attrs.myCurrentTime, function(value) {
+             format = value;
+             updateTime();
+           });
+
+           // schedule update in one second
+           function updateLater() {
+             // save the deferId for canceling
+             deferId = $defer(function() {
+               updateTime(); // update DOM
+               updateLater(); // schedule another update
+             }, 1000);
+           }
+
+           // listen on DOM destroy (removal) event, and cancel the next UI update
+           // to prevent updating time ofter the DOM element was removed.
+           element.bind('$destroy', function() {
+             $defer.cancel(deferId);
+           });
+
+           updateLater(); // kick of the UI update process.
+         }
+       });
+   </script>
+   <div ng-controller="Ctrl2">
+     Date format: <input ng-model='format'> <hr/>
+     Current time is: <span my-current-time="format"></span
+   </div>
+  </doc:source>
+  <doc:scenario>
+  </doc:scenario>
+</doc:example>
+
+
+# Writing directives (long version)
+
+An example skeleton of the directive is shown here, for the complete list see below.
+
+<pre>
+  var myModule = angular.module(...);
+
+  myModule.directive('directiveName', function factory(injectables) {
+    var directiveDefinitionObject = {
+      priority: 0,
+      template: '<div></div>',
+      templateUrl: 'directive.html',
+      replace: false,
+      transclude: false,
+      restrict: 'A',
+      scope: false,
+      compile: function compile(tElement, tAttrs, transclude) {
+        return {
+          pre: function preLink(scope, iElement, iAttrs, controller) { ... },
+          post: function postLink(scope, iElement, iAttrs, controller) { ... }
+        }
+      },
+      link: function postLink(scope, iElement, iAttrs) { ... }
+    };
+    return directiveDefinitionObject;
+  });
+</pre>
+
+In most cases you will not need such fine control and so the above can be simplified. All of the
+different parts of this skeleton are explained in following sections. In this section we are
+interested only isomers of this skeleton.
+
+The first step in simplyfing the code is to rely on the deafult values. Therefore the above can be
+simplified as:
+
+<pre>
+  var myModule = angular.module(...);
+
+  myModule.directive('directiveName', function factory(injectables) {
+    var directiveDefinitionObject = {
+      compile: function compile(tElement, tAttrs) {
+        return function postLink(scope, iElement, iAttrs) { ... }
+      }
+    };
+    return directiveDefinitionObject;
+  });
+</pre>
+
+Most directives concern themselves only with instances not with template transformations allowing
+further simplification:
+
+<pre>
+  var myModule = angular.module(...);
+
+  myModule.directive('directiveName', function factory(injectables) {
+    return function postLink(scope, iElement, iAttrs) { ... }
+  });
+</pre>
+
+
+## Factory method
+
+The factory method is responsible for creating the directive. It is invoked only once, when the
+{@link api/ng.$compile compiler} matches the directive for the first time. You can
+perform any initialization work here. The method is invoked using the {@link
+http://localhost:8000/build/docs/api/AUTO.$injector#invoke $injector.invoke} which
+makes it injectable following all of the rules of injection annotation.
+
+## Directive Definition Object
+
+The directive definition object provides instructions to the {@link api/ng.$compile
+compiler}. The attributes are:
+
+  * `name` - Name of the current scope. Optional defaults to the name at registration.
+
+  * `priority` - When there are multiple directives defined on a single DOM element, sometimes it
+    is necessary to specify the order in which the directives are applied. The `priority` is used
+    to sort the directives before their `compile` functions get called. Higher `priority` goes
+    first. The order of directives within the same priority is undefined.
+
+  * `terminal` - If set to true then the current `priority` will be the last set of directives
+    which will execute (any directives at the current priority will still execute
+    as the order of execution on same `priority` is undefined).
+
+  * `scope` - If set to:
+
+    * `true` - then a new scope will be created for this directive. If multiple directives on the
+      same element request new scope, only one new scope is created. The new scope rule does not
+      apply for the root of the template since the root of the template always gets a new scope.
+
+    * `{}` (object hash) - then a new 'isolate' scope is created. The 'isolate' scope differs from
+      normal scope that it does not prototypically inherit from the parent scope. This is useful
+      when creating reusable components, which should not accidentally read or modify data in
+      parent scope. <br/>
+      The 'isolate' scope takes an object hash which defines a set of local scope properties
+      derived from the parent scope. These local properties are useful for aliasing values for
+      templates. Locals definition is a hash of local scope property to its source:
+
+      * `@` or `@attr` - bind a local scope property to the DOM attribute. The result is always a
+        string since DOM attributes are strings. If no `attr` name is specified then the local name
+        and attribute name are same. Given `<widget my-attr="hello {{name}}">` and widget definition
+        of `scope: { localName:'@myAttr' }`, then widget scope property `localName` will reflect
+        the interpolated value of `hello {{name}}`. As the `name` attribute changes so will the
+        `localName` property on the widget scope. The `name` is read from the parent scope (not
+        component scope).
+
+      * `=` or `=expression` - set up bi-directional binding between a local scope property and the
+        parent scope property. If no `attr` name is specified then the local name and attribute
+        name are same. Given `<widget my-attr="parentModel">` and widget definition of
+        `scope: { localModel:'=myAttr' }`, then widget scope property `localName` will reflect the
+        value of `parentModel` on the parent scope. Any changes to `parentModel` will be reflected
+        in `localModel` and any changes in `localModel` will reflect in `parentModel`.
+
+      * `&` or `&attr` - provides a way to execute an expression in the context of the parent scope.
+        If no `attr` name is specified then the local name and attribute name are same.
+        Given `<widget my-attr="count = count + value">` and widget definition of
+        `scope: { localFn:'increment()' }`, then isolate scope property `localFn` will point to
+        a function wrapper for the `increment()` expression. Often it's desirable to pass data from
+        the isolate scope via an expression and to the parent scope, this can be done by passing a
+        map of local variable names and values into the expression wrapper fn. For example if the
+        expression is `increment(amount)` then we can specify the amount value by calling the
+        `localFn` as `localFn({amount: 22})`.
+
+  * `controller` - Controller constructor function. The controller is instantiated before the
+    pre-linking phase and it is shared with other directives if they request it by name (see
+    `require` attribute). This allows the directives to communicate with each other and augment
+    each other behavior. The controller is injectable with the following locals:
+
+    * `$scope` - Current scope associated with the element
+    * `$element` - Current element
+    * `$attrs` - Current attributes obeject for the element
+    * `$transclude` - A transclude linking function pre-bound to the correct transclusion scope:
+      `function(cloneLinkingFn)`.
+
+  * `require` - Require another controller be passed into current directive linking function. The
+    `require` takes a name of the directive controller to pass in. If no such controller can be
+    found an error is raised. The name can be prefixed with:
+
+    * `?` - Don't raise an error. This makes the require dependency optional.
+    * `^` - Look for the controller on parent elements as well.
+
+
+  * `restrict` - String of subset of `EACM` which restricts the directive to a specific directive
+    declaration style. If omitted directives are allowed on attributes only.
+
+    * `E` - Element name: `<my-directive></my-directive>`
+    * `A` - Attribute: `<div my-directive="exp"></div>`
+    * `C` - Class: `<div class="my-directive: exp;"></div>`
+    * `M` - Comment: `<!-- directive: my-directive exp -->`
+
+  * `template` - replace the current element with the contents of the HTML. The replacement process
+    migrates all of the attributes / classes from the old element to the new one. See Creating
+    Widgets section below for more information.
+
+  * `templateUrl` - Same as `template` but the template is loaded from the specified URL. Because
+    the template loading is asynchronous the compilation/linking is suspended until the template
+    is loaded.
+
+  * `replace` - if set to `true` then the template will replace the current element, rather then
+    append the template to the element.
+
+  * `transclude` - compile the content of the element and make it available to the directive.
+    Typically used with {@link api/ng.directive:ngTransclude
+    ngTransclude}. The advantage of transclusion is that the linking function receives a
+    transclusion function which is pre-bound to the correct scope. In a typical setup the widget
+    creates an `isolate` scope, but the transclusion is not a child, but a sibling of the `isolate`
+    scope. This makes it possible for the widget to have private state, and the transclusion to
+    be bound to the parent (pre-`isolate`) scope.
+
+    * `true` - transclude the content of the directive.
+    * `'element'` - transclude the whole element including any directives defined at lower priority.
+
+
+  * `compile`: This is the compile function described in the section below.
+
+  * `link`: This is the link function described in the section below. This property is used only
+    if the `compile` property is not defined.
+
+## Compile function
+
+<pre>
+  function compile(tElement, tAttrs, transclude) { ... }
+</pre>
+
+Compile function deals with transforming the template DOM. Since most directives do not do
+template transformation, it is not used often. Examples which require compile functions are
+directives which transform template DOM such as {@link
+api/ng.directive:ngRepeat ngRepeat} or load the contents
+asynchronously such as {@link api/ng.directive:ngView ngView}. The
+compile functions takes the following arguments.
+
+  * `tElement` - template element - The element where the directive has been declared. It is
+    safe to do template transformation on the element and child elements only.
+
+  * `tAttrs` - template attributes - Normalized list of attributes declared on this element shared
+    between all directive compile functions. See {@link
+    #Attributes Attributes}
+
+  * `transclude` - A transclude linking function: `function(scope, cloneLinkingFn)`.
+
+NOTE: The template instance and the link instance may not be the same objects if the template has
+been cloned. For this reason it is not safe in the compile function to do anything other the DOM
+transformation that applies to all DOM clones. Specifically, DOM listener registration should be
+done in a linking function rather than in a compile function.
+
+A compile function can have a return value which can be either a function or an object.
+
+* returning a function - is equivalent to registering the linking function via the `link` property
+  of the config object when the compile function is empty.
+
+* returning an object with function(s) registered via `pre` and `post` properties - allows you to
+  control when a linking function should be called during the linking phase. See info about
+  pre-linking and post-linking functions below.
+
+
+## Linking function
+
+<pre>
+  function link(scope, iElement, iAttrs, controller) { ... }
+</pre>
+
+Link function is responsible for registering DOM listeners as well as updating the DOM. It is
+executed after the template has been cloned. This is where most of the directive logic will be
+put.
+
+  * `scope` - {@link api/ng.$rootScope.Scope Scope} - The scope to be used by the
+    directive for registering {@link api/ng.$rootScope.Scope#$watch watches}.
+
+  * `iElement` - instance element - The element where the directive is to be used. It is safe to
+    manipulate the children of the element only in `postLink` function since the children have
+    already been linked.
+
+  * `iAttrs` - instance attributes - Normalized list of attributes declared on this element shared
+    between all directive linking functions. See {@link #Attributes Attributes}
+
+  * `controller` - a controller instance - A controller instance if at least one directive on the
+    element defines a controller. The controller is shared among all the directives, which allows
+    the directives to use the controllers as a communication channel.
+
+
+
+### Pre-linking function
+
+Executed before the child elements are linked. Not safe to do DOM transformation since the
+compiler linking function will fail to locate the correct elements for linking.
+
+### Post-linking function
+
+Executed after the child elements are linked. Safe to do DOM transformation in here.
+
+<a name="Attributes"></a>
+## Attributes
+
+The attributes object - passed as a parameter in the link() or compile() functions - is a way of
+accessing:
+
+  * *normalized attribute names:* Since a directive such as 'ngBind' can be expressed in many ways
+    sucha s as 'ng:bind', or 'x-ng-bind', the attributes object allows for a normalize accessed to
+    the attributes.
+
+  * *directive inter-communication:* All directives share the same instance of the attributes
+    object which allows the directives to use the attributes object as inter directive
+    communication.
+
+  * *supports interpolation:* Interpolation attributes are assigned to the attribute object
+    allowing other directives to read the interpolated value.
+
+  * *observing interpolated attributes:* Use `$observe` to observe the value changes of attributes
+    that contain interpolation (e.g. `src="{{bar}}"`). Not only is this very efficient but it's also
+    the only way to easily get the actual value because during the linking phase the interpolation
+    hasn't been evaluated yet and so the value is at this time set to `undefined`.
+
+<pre>
+function linkingFn(scope, elm, attrs, ctrl) {
+  // get the attribute value
+  console.log(attrs.ngModel);
+
+  // change the attribute
+  attrs.$set('ngModel', 'new value');
+
+  // observe changes to interpolated attribute
+  attrs.$observe('ngModel', function(value) {
+    console.log('ngModel has changed value to ' + value);
+  });
+}
+</pre>
+
+
+# Understanding Transclusion and Scopes
+
+It is often desirable to have reusable components. Below is a pseudo code showing how a simplified
+dialog component may work.
+
+<pre>
+  <div>
+    <button ng-click="show=true">show</button>
+    <dialog title="Hello {{username}}."
+            visible="show"
+            on-cancel="show = false"
+            on-ok="show = false; doSomething()">
+       Body goes here: {{username}} is {{title}}.
+    </dialog>
+</pre>
+
+Clicking on the "show" button will open the dialog. The dialog will have a title, which is
+data bound to `username`, and it will also have a body which we would like to transclude
+into the dialog.
+
+Here is an example of what the template definition for the `dialog` widget may look like.
+
+<pre>
+  <div ng-show="show()">
+    <h3>{{title}}</h3>
+    <div class="body" ng-transclude></div>
+    <div class="footer">
+      <button ng-click="onOk()">Save changes</button>
+      <button ng-click="onCancel()">Close</button>
+    </div>
+  </div>
+</pre>
+
+This will not render properly, unless we do some scope magic.
+
+The first issue we have to solve is that the dialog box template expect `title` to be defined, but
+the place of instantiation would like to bind to `username`. Furthermore the buttons expect `onOk`
+as well as `onCancel` functions to be present in the scope. This limits the usefulness of the
+widget. To solve the mapping issue we use the `locals` to create local variables which the template
+expects as follows:
+
+<pre>
+  scope: {
+    title: 'bind',          // set up title to accept data-binding
+    onOk: 'expression',     // create a delegate onOk function
+    onCancel: 'expression', // create a delegate onCancel function
+    show: 'accessor'        // create a getter/setter function for visibility.
+  }
+</pre>
+
+Creating local properties on widget scope creates two problems:
+
+  1. isolation - if the user forgets to set `title` attribute of the dialog widget the dialog
+     template will bind to parent scope property. This is unpredictable and undesirable.
+
+  2. transclusion - the transcluded DOM can see the widget locals, which may overwrite the
+     properties which the transclusion needs for data-binding. In our example the `title`
+     property of the widget clobbers the `title` property of the transclusion.
+
+
+To solve the issue of lack of isolation, the directive declares a new `isolated` scope. An
+isolated scope does not prototypically inherit from the child scope, and therefore we don't have
+to worry about accidentally clobbering any properties.
+
+However 'isolated' scope creates a new problem: if a transcluded DOM is a child of the widget
+isolated scope then it will not be able to bind to anything. For this reason the transcluded scope
+is a child of the original scope, before the widget created an isolated scope for its local
+variables. This makes the transcluded and widget isolated scope siblings.
+
+This may seem as unexpected complexity, but it gives the widget user and developer the least
+surprise.
+
+Therefore the final directive definition looks something like this:
+
+<pre>
+transclude: true,
+scope: {
+  title: 'bind',          // set up title to accept data-binding
+  onOk: 'expression',     // create a delegate onOk function
+  onCancel: 'expression', // create a delegate onCancel function
+  show: 'accessor'        // create a getter/setter function for visibility.
+}
+</pre>
+
+# Creating Components
+
+It is often desirable to replace a single directive with a more complex DOM structure. This
+allows the directives to become a short hand for reusable components from which applications
+can be built.
+
+Following is an example of building a reusable widget.
+
+
+<doc:example module="zippyModule">
+  <doc:source>
+   <script>
+     function Ctrl3($scope) {
+       $scope.title = 'Lorem Ipsum';
+       $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
+     }
+
+     angular.module('zippyModule', [])
+       .directive('zippy', function(){
+         return {
+           restrict: 'C',
+           // This HTML will replace the zippy directive.
+           replace: true,
+           transclude: true,
+           scope: { title:'@zippyTitle' },
+           template: '<div>' +
+                       '<div class="title">{{title}}</div>' +
+                       '<div class="body" ng-transclude></div>' +
+                     '</div>',
+           // The linking function will add behavior to the template
+           link: function(scope, element, attrs) {
+                 // Title element
+             var title = angular.element(element.children()[0]),
+                 // Opened / closed state
+                 opened = true;
+
+             // Clicking on title should open/close the zippy
+             title.bind('click', toggle);
+
+             // Toggle the closed/opened state
+             function toggle() {
+               opened = !opened;
+               element.removeClass(opened ? 'closed' : 'opened');
+               element.addClass(opened ? 'opened' : 'closed');
+             }
+
+             // initialize the zippy
+             toggle();
+           }
+         }
+       });
+   </script>
+   <style>
+     .zippy {
+       border: 1px solid black;
+       display: inline-block;
+       width: 250px;
+     }
+     .zippy.opened > .title:before { content: '▼ '; }
+     .zippy.opened > .body { display: block; }
+     .zippy.closed > .title:before { content: '► '; }
+     .zippy.closed > .body { display: none; }
+     .zippy > .title {
+       background-color: black;
+       color: white;
+       padding: .1em .3em;
+       cursor: pointer;
+     }
+     .zippy > .body {
+       padding: .1em .3em;
+     }
+   </style>
+   <div ng-controller="Ctrl3">
+     Title: <input ng-model="title"> <br>
+     Text: <textarea ng-model="text"></textarea>
+     <hr>
+     <div class="zippy" zippy-title="Details: {{title}}...">{{text}}</div>
+   </div>
+  </doc:source>
+  <doc:scenario>
+    it('should bind and open / close', function() {
+      input('title').enter('TITLE');
+      input('text').enter('TEXT');
+      expect(element('.title').text()).toEqual('Details: TITLE...');
+      expect(binding('text')).toEqual('TEXT');
+
+      expect(element('.zippy').prop('className')).toMatch(/closed/);
+      element('.zippy > .title').click();
+      expect(element('.zippy').prop('className')).toMatch(/opened/);
+    });
+  </doc:scenario>
+</doc:example>
@@ -0,0 +1,187 @@
+@ngdoc overview
+@name Developer Guide: Expressions
+@description
+
+Expressions are JavaScript-like code snippets that are usually placed in bindings such as `{{
+expression }}`. Expressions are process by the {@link api/ng.$parse $parse}
+service.
+
+For example, these are all valid expressions in angular:
+
+  * `1+2`
+  * `3*10 | currency`
+  * `user.name`
+
+
+## Angular Expressions vs. JS Expressions
+
+It might be tempting to think of angular view expressions as JavaScript expressions, but that is
+not entirely correct, since angular does not use a JavaScript `eval()` to evaluate expressions.
+You can think of angular expressions as JavaScript expressions with following differences
+differences:
+
+  * **Attribute Evaluation:** evaluation of all properties are against the scope, doing the
+    evaluation, unlike in JavaScript where the expressions are evaluated against the global
+    `window`.
+
+  * **Forgiving:** expression evaluation is forgiving to undefined and null, unlike in JavaScript,
+    where such evaluations generate `NullPointerExceptions`.
+
+  * **No Control Flow Statements:** you cannot do any of the following in angular expression:
+    conditionals, loops, or throw.
+
+  * **Filters:** you can pass result of expression evaluations through filter chains. For example
+    to convert date object into a local specific human-readable format.
+
+If, on the other hand, you do want to run arbitrary JavaScript code, you should make it a
+controller method and call the method. If you want to `eval()` an angular expression from
+JavaScript, use the {@link api/ng.$rootScope.Scope#$eval `$eval()`} method.
+
+## Example
+<doc:example>
+<doc:source>
+ 1+2={{1+2}}
+</doc:source>
+<doc:scenario>
+ it('should calculate expression in binding', function() {
+   expect(binding('1+2')).toEqual('3');
+ });
+</doc:scenario>
+</doc:example>
+
+You can try evaluating different expressions here:
+
+<doc:example>
+<doc:source>
+ <script>
+   function Cntl2($scope) {
+     var exprs = $scope.exprs = [];
+     $scope.expr = '3*10|currency';
+     $scope.addExp = function(expr) {
+        exprs.push(expr);
+     };
+
+     $scope.removeExp = function(index) {
+       exprs.splice(index, 1);
+     };
+   }
+ </script>
+ <div ng-controller="Cntl2" class="expressions">
+   Expression:
+   <input type='text' ng-model="expr" size="80"/>
+   <button ng-click="addExp(expr)">Evaluate</button>
+   <ul>
+    <li ng-repeat="expr in exprs">
+      [ <a href="" ng-click="removeExp($index)">X</a> ]
+      <tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
+     </li>
+   </ul>
+ </div>
+</doc:source>
+<doc:scenario>
+ it('should allow user expression testing', function() {
+    element('.expressions :button').click();
+    var li = using('.expressions ul').repeater('li');
+    expect(li.count()).toBe(1);
+    expect(li.row(0)).toEqual(["3*10|currency", "$30.00"]);
+ });
+</doc:scenario>
+</doc:example>
+
+
+# Property Evaluation
+
+Evaluation of all properties takes place against a scope. Unlike JavaScript, where names default
+to global window properties, angular expressions have to use {@link api/ng.$window
+`$window`} to refer to the global `window` object. For example, if you want to call `alert()`, which is
+defined on `window`, in an expression must use `$window.alert()`. This is done intentionally to
+prevent accidental access to the global state (a common source of subtle bugs).
+
+<doc:example>
+<doc:source>
+ <script>
+   function Cntl1($window, $scope){
+     $scope.name = 'World';
+
+     $scope.greet = function() {
+       ($window.mockWindow || $window).alert('Hello ' + $scope.name);
+     }
+   }
+ </script>
+ <div class="example2" ng-controller="Cntl1">
+   Name: <input ng-model="name" type="text"/>
+   <button ng-click="greet()">Greet</button>
+ </div>
+</doc:source>
+<doc:scenario>
+ it('should calculate expression in binding', function() {
+   var alertText;
+   this.addFutureAction('set mock', function($window, $document, done) {
+     $window.mockWindow = {
+       alert: function(text){ alertText = text; }
+     };
+     done();
+   });
+   element(':button:contains(Greet)').click();
+   expect(this.addFuture('alert text', function(done) {
+     done(null, alertText);
+   })).toBe('Hello World');
+ });
+</doc:scenario>
+</doc:example>
+
+## Forgiving
+
+Expression evaluation is forgiving to undefined and null. In JavaScript, evaluating `a.b.c` throws
+an exception if `a` is not an object. While this makes sense for a general purpose language, the
+expression evaluations are primarily used for data binding, which often look like this:
+
+        {{a.b.c}}
+
+It makes more sense to show nothing than to throw an exception if `a` is undefined (perhaps we are
+waiting for the server response, and it will become defined soon). If expression evaluation wasn't
+forgiving we'd have to write bindings that clutter the code, for example: `{{((a||{}).b||{}).c}}`
+
+Similarly, invoking a function `a.b.c()` on undefined or null simply returns undefined.
+
+
+## No Control Flow Statements
+
+You cannot write a control flow statement in an expression. The reason behind this is core to the
+angular philosophy that application logic should be in controllers, not in the view. If you need a
+conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.
+
+
+## Filters
+
+When presenting data to the user, you might need to convert the data from its raw format to a
+user-friendly format. For example, you might have a data object that needs to be formatted
+according to the locale before displaying it to the user. You can pass expressions through a chain
+of filters like this:
+
+       name | uppercase
+
+The expression evaluator simply passes the value of name to {@link
+api/ng.filter:uppercase `uppercase`} filter.
+
+Chain filters using this syntax:
+
+       value | filter1 | filter2
+
+You can also pass colon-delimited arguments to filters, for example, to display the number 123
+with 2 decimal points:
+
+       123 | number:2
+
+# The $
+
+You might be wondering, what is the significance of the $ prefix? It is simply a prefix that
+angular uses, to differentiate its API names from others. If angular didn't use $, then evaluating
+`a.length()` would return undefined because neither a nor angular define such a property.
+
+Consider that in a future version of angular we might choose to add a length method, in which case
+the behavior of the expression would change. Worse yet, you the developer could create a length
+property and then we would have a collision. This problem exists because angular augments existing
+objects with additional behavior. By prefixing its additions with $ we are reserving our namespace
+so that angular developers and developers who use angular can develop in harmony without collisions.
+
@@ -0,0 +1,324 @@
+@ngdoc overview
+@name Forms
+@description
+
+Controls (`input`, `select`, `textarea`) are a way for user to enter data.
+Form is a collection of controls for the purpose of grouping related controls together.
+
+Form and controls provide validation services, so that the user can be notified of invalid input.
+This provides a better user experience, because the user gets instant feedback on how to correct the error.
+Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted.
+Server-side validation is still necessary for a secure application.
+
+
+# Simple form
+The key directive in understanding two-way data-binding is  {@link api/ng.directive:ngModel ngModel}.
+The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
+In addition it provides {@link api/ng.directive:ngModel.NgModelController API} for other directives to augment its behavior.
+
+<doc:example>
+<doc:source>
+<div ng-controller="Controller">
+  <form novalidate class="simple-form">
+    Name: <input type="text" ng-model="user.name" /><br />
+    E-mail: <input type="email" ng-model="user.email" /><br />
+    Gender: <input type="radio" ng-model="user.gender" value="male" />male
+    <input type="radio" ng-model="user.gender" value="female" />female<br />
+    <button ng-click="reset()">RESET</button>
+    <button ng-click="update(user)">SAVE</button>
+  </form>
+  <pre>form = {{user | json}}</pre>
+  <pre>master = {{master | json}}</pre>
+</div>
+
+<script>
+  function Controller($scope) {
+    $scope.master= {};
+
+    $scope.update = function(user) {
+      $scope.master= angular.copy(user);
+    };
+
+    $scope.reset = function() {
+      $scope.user = angular.copy($scope.master);
+    };
+
+    $scope.reset();
+  }
+  </script>
+</doc:source>
+</doc:example>
+
+
+Note that `novalidate` is used to disable browser's native form validation.
+
+
+
+# Using CSS classes
+
+To allow styling of form as well as controls, `ngModel`  add these CSS classes:
+
+- `ng-valid`
+- `ng-invalid`
+- `ng-pristine`
+- `ng-dirty`
+
+Following example uses the CSS to display validity of each form control.
+In the example both `user.name` and `user.email` are required, but are rendered with red background only when they are dirty.
+This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity.
+
+<doc:example>
+<doc:source>
+<div ng-controller="Controller">
+  <form novalidate class="css-form">
+    Name:
+      <input type="text" ng-model="user.name" required /><br />
+    E-mail: <input type="email" ng-model="user.email" required /><br />
+    Gender: <input type="radio" ng-model="user.gender" value="male" />male
+    <input type="radio" ng-model="user.gender" value="female" />female<br />
+    <button ng-click="reset()">RESET</button>
+    <button ng-click="update(user)">SAVE</button>
+  </form>
+</div>
+
+<style type="text/css">
+  .css-form input.ng-invalid.ng-dirty {
+    background-color: #FA787E;
+  }
+
+  .css-form input.ng-valid.ng-dirty {
+    background-color: #78FA89;
+  }
+</style>
+
+<script>
+  function Controller($scope) {
+    $scope.master= {};
+
+    $scope.update = function(user) {
+      $scope.master= angular.copy(user);
+    };
+
+    $scope.reset = function() {
+      $scope.user = angular.copy($scope.master);
+    };
+
+    $scope.reset();
+  }
+  </script>
+</doc:source>
+</doc:example>
+
+
+
+# Binding to form and control state
+
+A form is in instance of {@link api/ng.directive:form.FormController FormController}.
+The form instance can optionally be published into the scope using the `name` attribute.
+Similarly control is an instance of {@link api/ng.directive:ngModel.NgModelController NgModelController}.
+The control instance can similarly be published into the form instance using the `name` attribute.
+This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.
+
+This allows us to extend the above example with these features:
+
+- RESET button is enabled only if form has some changes
+- SAVE button is enabled only if form has some changes and is valid
+- custom error messages for `user.email` and `user.agree`
+
+<doc:example>
+<doc:source>
+<div ng-controller="Controller">
+  <form name="form" class="css-form" novalidate>
+    Name:
+      <input type="text" ng-model="user.name" name="uName" required /><br />
+    E-mail:
+      <input type="email" ng-model="user.email" name="uEmail" required/><br />
+    <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
+      <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
+      <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
+    </div>
+
+    Gender: <input type="radio" ng-model="user.gender" value="male" />male
+    <input type="radio" ng-model="user.gender" value="female" />female<br />
+
+    <input type="checkbox" ng-model="user.agree" name="userAgree" required />
+    I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
+              required /><br />
+    <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
+
+    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
+    <button ng-click="update(user)"
+            ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
+  </form>
+</div>
+
+<script>
+  function Controller($scope) {
+    $scope.master= {};
+
+    $scope.update = function(user) {
+      $scope.master= angular.copy(user);
+    };
+
+    $scope.reset = function() {
+      $scope.user = angular.copy($scope.master);
+    };
+
+    $scope.isUnchanged = function(user) {
+      return angular.equals(user, $scope.master);
+    };
+
+    $scope.reset();
+  }
+</script>
+</doc:source>
+</doc:example>
+
+
+
+# Custom Validation
+
+Angular provides basic implementation for most common html5 {@link api/ng.directive:input input}
+types: ({@link api/ng.directive:input.text text}, {@link api/ng.directive:input.number number}, {@link api/ng.directive:input.url url}, {@link api/ng.directive:input.email email}, {@link api/ng.directive:input.radio radio}, {@link api/ng.directive:input.checkbox checkbox}), as well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`, `min`, `max`).
+
+Defining your own validator can be done by defining your own directive which adds a custom validation function to the `ngModel` {@link api/ng.directive:ngModel.NgModelController controller}.
+To get a hold of the controller the directive specifies a dependency as shown in the example below.
+The validation can occur in two places:
+
+  * **Model to View update** -
+    Whenever the bound model changes, all functions in {@link   api/ng.directive:ngModel.NgModelController#$formatters NgModelController#$formatters} array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through {@link api/ng.directive:ngModel.NgModelController#$setValidity NgModelController#$setValidity}.
+
+  * **View to Model update** -
+    In a similar way, whenever a user interacts with a control, the controll calls {@link api/ng.directive:ngModel.NgModelController#$setViewValue NgModelController#$setViewValue}.
+This in turn pipelines all functions in {@link api/ng.directive:ngModel.NgModelController#$parsers NgModelController#$parsers} array, so that each of these functions has an opportunity to convert the value and change validity state of the form control through {@link api/ng.directive:ngModel.NgModelController#$setValidity NgModelController#$setValidity}.
+
+In the following example we create two directives.
+
+  * The first one is `integer` and it validates whether the input is a valid integer.
+    For example `1.23` is an invalid value, since it contains a fraction.
+    Note, that we unshift the array instead of pushing.
+    This is because we want to be first parser and consume the control string value, as we need to execute the validation function before a conversion to number occurs.
+
+  * The second directive is a `smart-float`.
+    It parses both `1.2` and `1,2` into a valid float number `1.2`.
+    Note that, we can't use input type `number` here as HTML5 browsers would not allow the user to type what it would consider an invalid number such as `1,2`.
+
+
+<doc:example module="form-example1">
+<doc:source>
+<div ng-controller="Controller">
+  <form name="form" class="css-form" novalidate>
+    <div>
+      Size (integer 0 - 10):
+      <input type="number" ng-model="size" name="size"
+             min="0" max="10" integer />{{size}}<br />
+      <span ng-show="form.size.$error.integer">This is not valid integer!</span>
+      <span ng-show="form.size.$error.min || form.size.$error.max">
+        The value must be in range 0 to 10!</span>
+    </div>
+
+    <div>
+      Length (float):
+      <input type="text" ng-model="length" name="length" smart-float />
+      {{length}}<br />
+      <span ng-show="form.length.$error.float">
+        This is not a valid float number!</span>
+    </div>
+  </form>
+</div>
+
+<script>
+  var app = angular.module('form-example1', []);
+
+  var INTEGER_REGEXP = /^\-?\d*$/;
+  app.directive('integer', function() {
+    return {
+      require: 'ngModel',
+      link: function(scope, elm, attrs, ctrl) {
+        ctrl.$parsers.unshift(function(viewValue) {
+          if (INTEGER_REGEXP.test(viewValue)) {
+            // it is valid
+            ctrl.$setValidity('integer', true);
+            return viewValue;
+          } else {
+            // it is invalid, return undefined (no model update)
+            ctrl.$setValidity('integer', false);
+            return undefined;
+          }
+        });
+      }
+    };
+  });
+
+  var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
+  app.directive('smartFloat', function() {
+    return {
+      require: 'ngModel',
+      link: function(scope, elm, attrs, ctrl) {
+        ctrl.$parsers.unshift(function(viewValue) {
+          if (FLOAT_REGEXP.test(viewValue)) {
+            ctrl.$setValidity('float', true);
+            return parseFloat(viewValue.replace(',', '.'));
+          } else {
+            ctrl.$setValidity('float', false);
+            return undefined;
+          }
+        });
+      }
+    };
+  });
+</script>
+</doc:source>
+</doc:example>
+
+
+# Implementing custom form control (using `ngModel`)
+Angular implements all of the basic HTML form controls ({@link api/ng.directive:input input}, {@link api/ng.directive:select select}, {@link api/ng.directive:textarea textarea}), which should be sufficient for most cases.
+However, if you need more flexibility, you can write your own form control as a directive.
+
+In order for custom control to work with `ngModel` and to achieve two-way data-binding it needs to:
+
+  - implement `render` method, which is responsible for rendering the data after it passed the {@link   api/ng.directive:ngModel.NgModelController#$formatters NgModelController#$formatters},
+  - call `$setViewValue` method, whenever the user interacts with the control and model needs to be updated. This is usually done inside a DOM Event listener.
+
+See {@link guide/directive $compileProvider.directive} for more info.
+
+The following example shows how to add two-way data-binding to contentEditable elements.
+
+<doc:example module="form-example2">
+<doc:source>
+<script>
+  angular.module('form-example2', []).directive('contenteditable', function() {
+    return {
+      require: 'ngModel',
+      link: function(scope, elm, attrs, ctrl) {
+        // view -> model
+        elm.bind('blur', function() {
+          scope.$apply(function() {
+            ctrl.$setViewValue(elm.html());
+          });
+        });
+
+        // model -> view
+        ctrl.render = function(value) {
+          elm.html(value);
+        };
+
+        // load init value from DOM
+        ctrl.$setViewValue(elm.html());
+      }
+    };
+  });
+</script>
+
+<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
+<pre>model = {{content}}</pre>
+
+<style type="text/css">
+  div[contentEditable] {
+    cursor: pointer;
+    background-color: #D0D0D0;
+  }
+</style>
+</doc:source>
+</doc:example>
@@ -0,0 +1,124 @@
+@ngdoc overview
+@name Developer Guide: i18n and l10n
+@description
+
+# I18n and L10n in AngularJS
+
+**What is i18n and l10n?**
+
+Internationalization, abbreviated i18n, is the process of developing products in such a way that
+they can be localized for languages and cultures easily. Localization, abbreviated l10n, is the
+process of adapting applications and text to enable their usability in a particular cultural or
+linguistic market. For application developers, internationalizing an application means abstracting
+all of the strings and other locale-specific bits (such as date or currency formats) out of the
+application. Localizing an application means providing translations and localized formats for the
+abstracted bits.
+
+**What level of support for i18n/l10n is currently in Angular?**
+
+Currently, Angular supports i18n/l10n for {@link
+http://docs.angularjs.org/#!/api/ng.filter:date datetime}, {@link
+http://docs.angularjs.org/#!/api/ng.filter:number number} and {@link
+http://docs.angularjs.org/#!/api/ng.filter:currency currency} filters.
+
+Additionally, Angular supports localizable pluralization support provided by the {@link
+api/ng.directive:ngPluralize ngPluralize directive}.
+
+All localizable Angular components depend on locale-specific rule sets managed by the {@link
+api/ng.$locale $locale service}.
+
+For readers who want to jump straight into examples, we have a few web pages that showcase how to
+use Angular filters with various locale rule sets. You can find these examples either on {@link
+https://github.com/angular/angular.js/tree/master/i18n/e2e Github} or in the i18n/e2e folder of
+Angular development package.
+
+**What is a locale id?**
+
+A locale is a specific geographical, political, or cultural region. The most commonly used locale
+ID consists of two parts: language code and country code. For example, en-US, en-AU, zh-CN are all
+valid locale IDs that have both language codes and country codes. Because specifying a country code
+in locale ID is optional,  locale IDs such as en, zh,  and sk are also valid. See the {@link
+http://userguide.icu-project.org/locale ICU } website for more information about using locale IDs.
+
+**Supported locales in Angular**
+Angular separates number and datetime format rule sets into different files, each file for a
+particular locale. You can find a list of currently supported locales {@link
+https://github.com/angular/angular.js/tree/master/i18n/locale here}
+# Providing locale rules to Angular
+
+There are two approaches to providing locale rules to Angular:
+
+**1. Pre-bundled rule sets**
+
+You can pre-bundle the desired locale file with Angular by concatenating the content of the
+locale-specific file to the end of `angular.js` or `angular.min.js` file.
+
+For example on *nix, to create a an angular.js file that contains localization rules for german
+locale, you can do the following:
+
+`cat angular.js i18n/angular-locale_de-ge.js > angular_de-ge.js`
+
+When the application containing `angular_de-ge.js` script instead of the generic angular.js script
+starts, Angular is automatically pre-configured with localization rules for the german locale.
+
+**2. Including locale js script in index.html page**
+
+You can also include the locale specific js file in the index.html page. For example, if one client
+requires German locale, you would serve index_de-ge.html which will look something like this:
+
+<pre>
+<html ng-app>
+ <head>
+….
+   <script src="angular.js"></script>
+   <script src="i18n/angular-locale_de-ge.js"></script>
+….
+ </head>
+</html>
+</pre>
+
+**Comparison of the two approaches**
+Both approaches described above requires you to prepare different index.html pages or js files for
+each locale that your app may be localized into. You also need to configure your server to serve
+the correct file that correspond to the desired locale.
+
+However, the second approach (Including locale js script in index.html page) is likely to be slower
+because an extra script needs to be loaded.
+
+
+# "Gotchas"
+
+**Currency symbol "gotcha"**
+
+Angular's {@link http://docs.angularjs.org/#!/api/ng.filter:currency currency filter} allows
+you to use the default currency symbol from the {@link api/ng.$locale locale service},
+or you can provide the filter with a custom currency symbol. If your app will be used only in one
+locale, it is fine to rely on the default currency symbol. However, if you anticipate that viewers
+in other locales might use your app, you should provide your own currency symbol to make sure the
+actual value is understood.
+
+For example, if you want to display account balance of 1000 dollars with the following binding
+containing currency filter: `{{ 1000 | currency }}`, and your app is currently in en-US locale.
+'$1000.00' will be shown. However, if someone in a different local (say, Japan) views your app, her
+browser will specify the locale as ja, and the balance of '¥1000.00' will be shown instead. This
+will really upset your client.
+
+In this case, you need to override the default currency symbol by providing the {@link
+http://docs.angularjs.org/#!/api/ng.filter:currency currency filter} with a currency symbol as
+a parameter when you configure the filter, for example, {{ 1000 | currency:"USD$"}}. This way,
+Angular will always show a balance of 'USD$1000' and disregard any locale changes.
+
+**Translation length "gotcha"**
+
+Keep in mind that translated strings/datetime formats can vary greatly in length. For example,
+`June 3, 1977` will be translated to Spanish as `3 de junio de 1977`. There are bound to be other
+more extreme cases. Hence, when internationalizing your apps, you need to apply CSS rules
+accordingly and do thorough testing to make sure UI components do not overlap.
+
+
+**Timezones**
+
+Keep in mind that Angular datetime filter uses the time zone settings of the browser. So the same
+application will show different time information depending on the time zone settings of the
+computer that the application is running on. Neither Javascript nor Angular currently supports
+displaying the date with a timezone specified by the developer.
@@ -0,0 +1,162 @@
+@ngdoc overview
+@name Developer Guide: Internet Explorer Compatibility
+@description
+
+# Overview
+
+This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML
+attributes and tags. Read this document if you are planning on deploying your angular application
+on IE v8.0 or earlier.
+
+# Short Version
+
+To make your angular application work on IE please make sure that:
+
+  1. you **do not** use custom element tags such as `<ng:view>` (use the attribute version `<div
+  ng-view>` instead), or
+
+  2. if you **do use** custom element tags, then you must take these steps to make IE happy:
+
+<pre>
+  <html xmlns:ng="http://angularjs.org">
+    <head>
+      <!--[if lte IE 8]>
+        <script>
+          document.createElement('ng-include');
+          document.createElement('ng-pluralize');
+          document.createElement('ng-view');
+          
+          // Optionally these for CSS
+          document.createElement('ng:include');
+          document.createElement('ng:pluralize');
+          document.createElement('ng:view');
+        </script>
+      <![endif]-->
+    </head>
+    <body>
+      ...
+    </body>
+  </html>
+</pre>
+
+The **important** parts are:
+
+  * `xmlns:ng` - *namespace* - you need one namespace for each custom tay you are planning on
+    using.
+
+  * `document.createElement(yourTagName)` - *creation of custom tag names* - Since this is an
+    issue only for older version of IE you need to load it conditionally. For each tag which does
+    not have namespace and which is not defined in HTML you need to pre-declare it to make IE
+    happy.
+
+
+# Long Version
+
+IE has an issues with element tag names which are not standard HTML tag names. These fall into two
+categories, and each category has its own fix.
+
+  * If the tag name starts with `my:` prefix than it is considered an XML namespace and must
+    have corresponding namespace declaration on `<html xmlns:my="ignored">`
+
+  * If the tag has no `:` but it is not a standard HTML tag, then it must be pre-created using
+    `document.createElement('my-tag')`
+
+  * If you have are planning on styling the custom tag with CSS selectors, then it must be
+    pre-created using `document.createElement('my-tag')` regardless of XML namespace.
+
+
+## The Good News
+
+The good news is that these restrictions only apply to element tag names, and not to element 
+attribute names. So this requires no special handling in IE: `<div my-tag your:tag></div>`.
+
+
+## What happens if I fail to do this?
+
+Suppose you have HTML with unknown tag `mytag` (this could also be `my:tag` or `my-tag` with same
+result):
+
+<pre>
+  <html>
+    <body>
+      <mytag>some text</mytag>
+    </body>
+  </html>
+</pre>
+
+It should pares into the following DOM:
+
+<pre>
+#document
+  +- HTML
+     +- BODY
+        +- mytag
+           +- #text: some text
+</pre>
+
+The expected behavior is that the `BODY` element has a child element `mytag`, which in turn has
+the text `some text`.
+
+But this is not what IE does (if the above fixes are not included):
+
+<pre>
+#document
+  +- HTML
+     +- BODY
+        +- mytag
+        +- #text: some text
+        +- /mytag
+</pre>
+
+In IE, the behavior is that the `BODY` element has three children:
+
+  1. A self closing `mytag`. Example of self closing tag is `<br/>`. The trailing `/` is optional,
+  but the `<br>` tag is not allowed to have any children, and browsers consider `<br>some
+  text</br>` as three siblings not a `<br>` with `some text` as child.
+
+  2. A text node with `some text`. This should have been a child of `mytag` above, not a sibling.
+
+  3. A corrupt self closing `/mytag`. This is corrupt since element names are not allowed to have
+  the `/` character. Furthermore this closing element should not be part of the DOM since it is
+  only used to delimitate the structure of the DOM.
+
+
+## CSS Styling of Custom Tag Names
+
+The to make CSS selector work with custom elements the custom element name must be shived with the
+`document.createElement('my-tag')` regardless of XML namespace.
+
+<pre>
+  <html xmlns:ng="needed for ng: namespace">
+    <head>
+      <!--[if lte IE 8]>
+        <script>
+          // needed to make ng-include parse properly
+          document.createElement('ng-include');
+          
+          // needed to enable CSS reference
+          document.createElement('ng:view');
+        </script>
+      <![endif]-->
+      <style>
+        ng\\:view {
+          display: block;
+          border: 1px solid red;
+        }
+
+        ng-include {
+          display: block;
+          border: 1px solid blue;
+        }
+      </style>
+    </head>
+    <body>
+      <ng:view></ng:view>
+      <ng-include></ng-include>
+      ...
+    </body>
+  </html>
+</pre>
+
+
+
@@ -0,0 +1,42 @@
+@ngdoc overview
+@name Developer Guide
+@description
+
+Welcome to the angular Developer Guide. If you are here to learn the details of how to use angular
+to develop web apps, you've come to the right place.
+
+If you are completely or relatively unfamiliar with angular, you may want to check out one or both
+of the following documents before returning here to the Developer Guide:
+
+* {@link misc/started Getting Started}
+* {@link tutorial/index Angular Tutorial}
+
+<hr>
+
+## {@link overview Overview of Angular}
+
+## {@link bootstrap Initializing Angular}
+
+## {@link dev_guide.mvc About MVC in Angular}
+
+* {@link dev_guide.mvc.understanding_model Understanding the Model Component}
+* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
+* {@link dev_guide.mvc.understanding_view Understanding the View Component}
+
+## {@link scope Angular Scope Objects}
+
+## {@link compiler Angular HTML Compiler}
+
+## {@link dev_guide.templates Angular Templates}
+
+* {@link dev_guide.templates.filters Understanding Angular Filters}
+* {@link forms Understanding Angular Forms}
+
+## {@link dev_guide.services Angular Services}
+
+* {@link dev_guide.services.understanding_services Understanding Angular Services}
+* {@link dev_guide.services.creating_services Creating Angular Services}
+* {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
+* {@link dev_guide.services.testing_services Testing Angular Services}
+
+## {@link di About Dependency Injection}
@@ -0,0 +1,42 @@
+@ngdoc overview
+@name Developer Guide: Introduction
+@description
+
+Angular is pure client-side technology, written entirely in JavaScript. It works with the
+long-established technologies of the web (HTML, CSS, and JavaScript) to make the development of
+web apps easier and faster than ever before.
+
+One important way that angular simplifies web development is by increasing the level of abstraction
+between the developer and most low-level web app development tasks. Angular automatically takes
+care of many of these tasks, including:
+
+  * DOM Manipulation
+  * Setting Up Listeners and Notifiers
+  * Input Validation
+
+Because angular handles much of the work involved in these tasks, developers can concentrate more
+on application logic and less on repetitive, error-prone, lower-level coding.
+
+At the same time that angular simplifies the development of web apps, it brings relatively
+sophisticated techniques to the client-side, including:
+
+  * Separation of data, application logic, and presentation components
+  * Data Binding between data and presentation components
+  * Services (common web app operations, implemented as substitutable objects)
+  * Dependency Injection (used primarily for wiring together services)
+  * An extensible HTML compiler (written entirely in JavaScript)
+  * Ease of Testing
+
+These techniques have been for the most part absent from the client-side for far too long.
+
+## Single-page / Round-trip Applications
+
+You can use angular to develop both single-page and round-trip apps, but angular is designed
+primarily for developing single-page apps. Angular supports browser history, forward and back
+buttons, and bookmarking in single-page apps.
+
+You normally wouldn't want to load angular with every page change, as would be the case with using
+angular in a round-trip app. However, it would make sense to do so if you were adding a subset of
+angular's features (for example, templates to leverage angular's data-binding feature) to an
+existing round-trip app. You might follow this course of action if you were migrating an older app
+to a single-page angular app.
@@ -0,0 +1,258 @@
+@ngdoc overview
+@name Developer Guide: Modules
+@description
+
+# What is a Module?
+
+Most applications have a main method which instantiates, wires, and bootstraps the application.
+Angular apps don't have a main method, instead modules serve the purpose of declaratively
+specifying how an application should be bootstrapped. There are several advantages to this
+approach:
+
+  * The process is more declarative which is easier to understand
+  * In unit-testing there is no need to load all modules, which may aid in writing unit-tests.
+  * Additional modules can be loaded in scenario tests, which can override some of the
+    configuration and help end-to-end test the application
+  * Third party code can be packaged as reusable modules.
+  * The modules can be loaded in any/parallel order (due to delayed nature of module execution).
+
+
+# The Basics
+
+Ok, I'm in a hurry. How do I get a Hello World module working?
+
+Important things to notice:
+
+  * {@link api/angular.Module Module} API
+  * Notice the reference to the `myApp` module in the `<html ng-app="myApp">`, it is what
+    bootstraps the app using your module.
+
+<doc:example module='simpleApp'>
+  <doc:source>
+    <script>
+      // declare a module
+      var simpleAppModule = angular.module('simpleApp', []);
+
+      // configure the module.
+      // in this example we will create a greeting filter
+      simpleAppModule.filter('greet', function() {
+       return function(name) {
+          return 'Hello, ' + name + '!';
+        };
+      });
+
+    </script>
+    <div>
+      {{ 'World' | greet }}
+    </div>
+  </doc:source>
+</doc:example>
+
+
+
+# Recommended Setup
+
+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:
+
+  * A service module, for service declaration
+  * A directive module, for directive declaration
+  * A filter module, for filter declaration
+  * And an application level module which depends on the above modules, and which has
+    initialization code.
+
+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.
+
+The above is only a suggestion, so feel free to tailor it to your needs.
+
+<doc:example module='xmpl'>
+  <doc:source>
+    <script>
+      angular.module('xmpl.service', []).
+        value('greeter', {
+          salutation: 'Hello',
+          localize: function(localization) {
+            this.salutation = localization.salutation;
+          },
+          greet: function(name) {
+            return this.salutation + ' ' + name + '!';
+          }
+        }).
+        value('user', {
+          load: function(name) {
+            this.name = name;
+          }
+        });
+
+      angular.module('xmpl.directive', []);
+
+      angular.module('xmpl.filter', []);
+
+      angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).
+        run(function(greeter, user) {
+          // This is effectively part of the main method initialization code
+          greeter.localize({
+            salutation: 'Bonjour'
+          });
+          user.load('World');
+        })
+
+
+      // A Controller for your app
+      var XmplController = function($scope, greeter, user) {
+        $scope.greeting = greeter.greet(user.name);
+      }
+    </script>
+    <div ng-controller="XmplController">
+      {{ greeting }}!
+    </div>
+  </doc:source>
+ </doc:example>
+
+
+
+# Module Loading & Dependencies
+
+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:
+
+  1. **Configuration blocks** - get executed during the provider registrations and configuration
+    phase. Only providers and constants can be injected into configuration blocks. This is to
+    prevent accidental instantiation of services before they have been fully configured.
+  2. **Run blocks** - get executed after the injector is created and are used to kickstart the
+    application. Only instances and constants can be injected into run blocks. This is to prevent
+    further system configuration during application run time.
+
+<pre>
+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)
+    // int the run blocks
+  });
+</pre>
+
+## Configuration Blocks
+
+There are some convenience methods on the module which are equivalent to the config block. For
+example:
+
+<pre>
+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', ...);
+  });
+</pre>
+
+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
+
+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.
+
+## Dependencies
+
+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.
+The same is true for the run blocks. Each module can only be loaded once, even if multiple other
+modules require it.
+
+## Asynchronous Loading
+
+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.
+
+
+# Unit Testing
+
+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:
+
+In all of these examples we are going to assume this module definition:
+<pre>
+  angular.module('greetMod', []).
+
+    factory('alert', function($window) {
+      return function(text) {
+        $window.alert(text);
+      }
+    }).
+
+    value('salutation', 'Hello').
+
+    factory('greet', function(alert, salutation) {
+      return function(name) {
+        alert(salutation + ' ' + name + '!');
+      }
+    });
+</pre>
+
+Let's write some tests:
+<pre>
+describe('myApp', function() {
+  // load the application relevant modules then load a special
+  // test module which overrides the $window with mock version,
+  // so that calling window.alert() will not block the test
+  // runner with a real alert box. This is an example of overriding
+  // configuration information in tests.
+  beforeEach(module('greetMod', function($provide) {
+    $provide.value('$window', {
+      alert: jasmine.createSpy('alert')
+    });
+  }));
+
+  // The inject() will create the injector and inject the greet and
+  // $window into the tests. The test need not concern itself with
+  // wiring of the application, only with testing it.
+  it('should alert on $window', inject(function(greet, $window) {
+    greet('World');
+    expect($window.alert).toHaveBeenCalledWith('Hello World!');
+  }));
+
+  // this is another way of overriding configuration in the
+  // tests using an inline module and inject methods.
+  it('should alert using the alert service', function() {
+    var alertSpy = jasmine.createSpy('alert');
+    module(function($provide) {
+      $provide.value('alert', alertSpy);
+    });
+    inject(function(greet) {
+      greet('World');
+      expect(alertSpy).toHaveBeenCalledWith('Hello World!');
+    });
+  });
+});
+</pre>
@@ -0,0 +1,208 @@
+@ngdoc overview
+@name Developer Guide: Overview
+@description
+
+
+# What Is Angular?
+
+AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template
+language and lets you extend HTML's syntax to express your application's components clearly and
+succinctly. Out of the box, it eliminates much of the code you currently write through data
+binding and dependency injection. And it all happens in JavaScript within the browser making it an
+ideal partner with any server technology.
+
+Angular is what HTML would have been had it been design for applications. HTML is a great
+declarative language for static documents. It does not contain much in the way of creating
+application, and as a result building web-applications is an exercise in *what do I have to do, so
+that I trick the browser in to doing what I want.*
+
+Impedance mismatch between dynamic-applications and static-documents are often solved as:
+
+  * **library** - a collection of functions which are useful when writing web apps. Your code is
+    in charge and it calls into the library when it sees fit. i.e.: `jQuery`
+  * **frameworks** - a particular implementation of a web-application, where your code fills in
+    the details. The framework is in charge and it calls into your code when it needs something
+    app specific. i.e.: `knockout`, `sproutcore`, etc...
+
+
+Angular takes another approach. It attempts to minimize the impedance mismatch between document
+centric HTML and what application needs by creating new HTML constructs. Angular teaches the
+browser new syntax through a construct we call directives. Examples include:
+
+  * Data binding as in `{{}}`.
+  * DOM control structures for repeating/hiding DOM fragments.
+  * Support for forms and form validation.
+  * Attaching code-behind to DOM elements.
+  * Grouping of HTML into reusable components.
+
+
+
+## End-to-end solution
+
+Angular tries to be an end to end solution, when building a web-application. This means it is
+not a single piece in an overall puzzle of building a web-application, but an end-to-end solution.
+This makes Angular opinionated about how a CRUD application should be built. But while it is
+opinionated, it also tries to make sure that its opinion is just a starting point, which you can
+easily change. Angular comes with the following out-of-the-box:
+
+  * Everything you need to build a CRUD app in a cohesive set: Data-binding, basic templating
+    directives, form validation, routing, deep-linking, reusable components, dependency injection.
+  * Testability story: unit-testing, end-to-end testing, mocks, test harnesses.
+  * Seed application with directory layout and test scripts as a starting point.
+
+
+## Angular Sweet Spot
+
+Angular simplifies the application development by presenting a higher level of abstraction to the
+developer. Like any abstraction, it comes at a cost of flexibility. In other words not every app
+is a good fit for Angular. Angular was built for the CRUD application in mind, luckily CRUD
+applications represent at least 90% of the web applications. But to understand what Angular is
+good at one also has to understand when an app is not a good fit for Angular.
+
+Games, and GUI editors are examples of very intensive and tricky DOM manipulation. These kinds of
+apps are different from CRUD apps, and as a result are not a good fit for Angular. In these cases
+using something closer to bare metal such as `jQuery` may be a better fit.
+
+
+# An Introductory Angular Example
+
+Below is a typical CRUD application which contains a form. The form values are validated, and
+are used to compute the total, which is formatted to a particular local. These are some common
+concepts which the application developer may face:
+
+  * attaching data-model to the UI.
+  * writing, reading and validating user input.
+  * computing new values based on the model.
+  * formatting output in a user specific locale.
+
+<example>
+  <file name="script.js">
+    function InvoiceCntl($scope) {
+      $scope.qty = 1;
+      $scope.cost = 19.95;
+    }
+  </file>
+  <file name="index.html">
+    <div ng-controller="InvoiceCntl">
+      <b>Invoice:</b>
+      <br>
+      <br>
+      <table>
+       <tr><td>Quantity</td><td>Cost</td></tr>
+       <tr>
+         <td><input type="integer" min="0" ng-model="qty" required ></td>
+         <td><input type="number" ng-model="cost" required ></td>
+       </tr>
+      </table>
+      <hr>
+      <b>Total:</b> {{qty * cost | currency}}
+    </div>
+  </file>
+  <file name="scenario.js">
+    it('should show of angular binding', function() {
+      expect(binding('qty * cost')).toEqual('$19.95');
+      input('qty').enter('2');
+      input('cost').enter('5.00');
+      expect(binding('qty * cost')).toEqual('$10.00');
+    });
+  </file>
+</example>
+
+Try out the Live Preview above, and then let's walk through the example and describe what's going
+on.
+
+In the `<html>` tag, we specify that it is an angular
+application with the `ng-app` directive. The `ng-app' will cause the angular to {@link
+bootstrap auto initialize} your application.
+
+    <html ng-app>
+
+We load the angular using the  `<script>` tag:
+
+    <script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>
+
+From the `ng-model` attribute of the `<input>` tags, angular automatically sets up two-way data
+binding, and we also demonstrate some easy input validation:
+
+    Quantity: <input type="integer" min="0" ng-model="qty" required >
+    Cost: <input type="number" ng-model="cost" required >
+
+These input widgets look normal enough, but consider these points:
+
+  * When this page loaded, angular bound the names of the input widgets (`qty` and `cost`) to
+    variables of the same name. Think of those variables as the "Model" component of the
+    Model-View-Controller design pattern.
+  * Note that the HTML widget {@link api/ng.directive:input input}
+    has special powers. The input invalidates itself by turning red when you enter invalid data or
+    leave the the input fields blank. These new widget behavior make it easier to implement field
+    validation common in CRUD applications.
+
+And finally, the mysterious `{{ double curly braces }}`:
+
+         Total: {{qty * cost | currency}}
+
+This notation, `{{ _expression_ }}`, is angular markup for data-binding. The expression itself can
+be a combination of both an expression and a {@link dev_guide.templates.filters filter}: `{{
+expression | filter }}`. Angular provides filters for formatting display data.
+
+In the example above, the expression in double-curly braces directs angular to "Bind the data we
+got from the input widgets to the display, multiply them together, and format the resulting number
+into output that looks like money."
+
+Notice that we achieved this application behavior not by calling angular methods, nor by
+implementing application specific behavior as framework. We achieved the behavior because the
+browser behaved more in line what is needed for dynamic web-application rather then what is needed
+for static-document. Angular has lowered the impedance mismatch to the point where no
+library/framework calls are needed.
+
+
+# The Zen of Angular
+
+Angular is built around the belief that declarative code is better than imperative when it comes
+to building UIs and wiring software components together, while imperative code is excellent for
+expressing business logic.
+
+
+  * It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves
+    the testability of the code.
+  * It is a really, _really_ good idea to regard app testing as equal in importance to app
+    writing. Testing difficulty is dramatically affected by the way the code is structured.
+  * It is an excellent idea to decouple the client side of an app from the server side. This
+    allows development work to progress in parallel, and allows for reuse of both sides.
+  * It is very helpful indeed if the framework guides developers through the entire journey of
+    building an app: from designing the UI, through writing the business logic, to testing.
+  * It is always good to make common tasks trivial and difficult tasks possible.
+
+
+
+Angular frees you from the following pain:
+
+  * **Registering callbacks:** Registering callbacks clutters your code, making it hard to see the
+    forest for the trees. Removing common boilerplate code such as callbacks is a good thing. It
+    vastly reduces the amount of JavaScript coding _you_ have to do, and it makes it easier to see
+    what your application does.
+  * **Manipulating HTML DOM programmatically:** Manipulating HTML DOM is a cornerstone of AJAX
+    applications, but it's cumbersome and error-prone. By declaratively describing how the UI
+    should change as your application state changes, you are freed from low level DOM manipulation
+    tasks. Most applications written with angular never have to programmatically manipulate the
+    DOM, although you can if you want to.
+  * **Marshaling data to and from the UI:** CRUD operations make up the majority of AJAX
+    applications. The flow of marshaling data from the server to an internal object to an HTML
+    form, allowing users to modify the form, validating the form, displaying validation errors,
+    returning to an internal model, and then back to the server, creates a lot of boilerplate
+    code. Angular eliminates almost all of this boilerplate, leaving code that describes the
+    overall flow of the application rather than all of the implementation details.
+  * **Writing tons of initialization code just to get started:** Typically you need to write a lot
+    of plumbing just to get a basic "Hello World" AJAX app working. With angular you can bootstrap
+    your app easily using services, which are auto-injected into your application in a {@link
+    http://code.google.com/p/google-guice/ Guice}-like dependency-injection style. This allows you
+    to get started developing features quickly. As a bonus, you get full control over the
+    initialization process in automated tests.
+
+
+# Watch a Presentation About Angular
+
+Here is an early presentation on angular, but note that substantial development has occurred since
+the talk was given in July of 2010.
+
+<iframe width="560" height="315" src="http://www.youtube.com/embed/bfrn5VNpwsg" frameborder="0" allowfullscreen></iframe>
@@ -0,0 +1,331 @@
+@ngdoc overview
+@name Developer Guide: Scopes
+@description
+
+# What are Scopes?
+
+{@link api/ng.$rootScope.Scope scope} is an object that refers to the application
+model. It is an execution context for {@link expression expressions}. Scopes are
+arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can
+watch {@link guide/expression expressions} and propagate events.
+
+## Scope characteristics
+
+  - Scopes provide APIs ({@link api/ng.$rootScope.Scope#$watch $watch}) to observe
+    model mutations.
+
+  - Scopes provide APIs ({@link api/ng.$rootScope.Scope#$apply $apply}) to
+    propagate any model changes through the system into the view from outside of the "Angular
+    realm" (controllers, services, Angular event handlers).
+
+  - Scopes can be nested to isolate application components while providing access to shared model
+    properties. A scope (prototypically) inherits properties from its parent scope.
+
+  - Scopes provide context against which {@link guide/expression expressions} are evaluated. For
+    example `{{username}}` expression is meaningless, unless it is evaluated against a specific
+    scope which defines the `username` property.
+
+## Scope as Data-Model
+
+Scope is the glue between application controller and the view. During the template {@link compiler
+linking} phase the {@link api/ng.$compileProvider.directive directives} set up
+{@link api/ng.$rootScope.Scope#$watch `$watch`} expressions on the scope. The
+`$watch` allows the directives to be notified of property changes, which allows the directive to
+render the updated value to the DOM.
+
+Both controllers and directives have reference to the scope, but not to each other. This
+arrangement isolates the controller from the directive as well as from DOM. This is an important
+point since it makes the controllers view agnostic, which greatly improves the testing story of
+the applications.
+
+<example>
+  <file name="script.js">
+    function MyController($scope) {
+      $scope.username = 'World';
+
+      $scope.sayHello = function() {
+        $scope.greeting = 'Hello ' + $scope.username + '!';
+      };
+    }
+  </file>
+  <file name="index.html">
+    <div ng-controller="MyController">
+      Your name:
+        <input type="text" ng-model="username">
+        <button ng-click='sayHello()'>greet</button>
+      <hr>
+      {{greeting}}
+    </div>
+  </file>
+</example>
+
+In the above example notice that the `MyController` assigns `World` to the `username` property of
+the scope. The scope then notifies the `input` of the assignment, which then renders the input
+with username pre-filled. This demonstrates how a controller can write data into the scope.
+
+Similarly the controller can assign behavior to scope as seen by the `sayHello` method, which is
+invoked when the user clicks on the 'greet' button. The `sayHello` method can read the `username`
+property and create a `greeting` property. This demonstrates that the properties on scope update
+automatically when they are bound to HTML input widgets.
+
+Logically the rendering of `{{greeting}}` involves:
+
+  * retrieval of the scope associated with DOM node where `{{greeting}}` is defined in template.
+    In this example this is the same scope as the scope which was passed into `MyController`. (We
+    will discuss scope hierarchies later.)
+
+  * Evaluate the `greeting` {@link guide/expression expression} against the scope retrieved above,
+    and assign the result to the text of the enclosing DOM element.
+
+
+You can think of the scope and its properties as the data which is used to render the view. The
+scope is the single source-of-truth for all things view related.
+
+From testability, the separation of the controller and the view is desirable, because it allows us
+to test the behavior without being distracted by the rendering details.
+
+<pre>
+  it('should say hello', function() {
+    var scopeMock = {};
+    var cntl = new MyController(scopeMock);
+
+    // Assert that username is pre-filled
+    expect(scopeMock.username).toEqual('World');
+
+    // Assert that we read new username and greet
+    scopeMock.username = 'angular';
+    scopeMock.sayHello();
+    expect(scopeMock.greeting).toEqual('Hello angular!');
+  });
+</pre>
+
+
+## Scope Hierarchies
+
+Each Angular application has exactly one {@link api/ng.$rootScope root scope}, but
+may have several child scopes.
+
+The application can have multiple scopes, because some {@link guide/directive directives} create
+new child scopes (refer to directive documentation to see which directives create new scopes).
+When new scopes are created, they are added as children of their parent scope. This creates a tree
+structure which parallels the DOM where they're attached
+
+When Angular evaluates `{{username}}`, it first looks at the scope associated with the given
+element for the `username` property. If no such property is found, it searches the parent scope
+and so on until the root scope is reached. In JavaScript this behavior is known as prototypical
+inheritance, and child scopes prototypically inherit from their parents.
+
+This example illustrates scopes in application, and prototypical inheritance of properties.
+
+<example>
+  <file name="style.css">
+    /* remove .doc-example-live in jsfiddle */
+    .doc-example-live .ng-scope {
+      border: 1px dashed red;
+    }
+  </file>
+  <file name="script.js">
+    function EmployeeController($scope) {
+      $scope.department = 'Engineering';
+      $scope.employee = {
+        name: 'Joe the Manager',
+        reports: [
+          {name: 'John Smith'},
+          {name: 'Mary Run'}
+        ]
+      };
+    }
+  </file>
+  <file name="index.html">
+    <div ng-controller="EmployeeController">
+      Manager: {{employee.name}} [ {{department}} ]<br>
+      Reports:
+        <ul>
+          <li ng-repeat="employee in employee.reports">
+            {{employee.name}} [ {{department}} ]
+          </li>
+        </ul>
+      <hr>
+      {{greeting}}
+    </div>
+  </file>
+</example>
+
+Notice that the Angular automatically places `ng-scope` class on elements where scopes are
+attached. The `<style>` definition in this example highlights in red the new scope locations. The
+child scopes are necessary because the repeater evaluates `{{employee.name}}` expression, but
+depending on which scope the expression is evaluated it produces different result. Similarly the
+evaluation of `{{department}}` prototypically inherits from root scope, as it is the only place
+where the `department` property is defined.
+
+
+## Retrieving Scopes from the DOM.
+
+Scopes are attached to the DOM as `$scope` data property, and can be retrieved for debugging
+purposes. (It is unlikely that one would need to retrieve scopes in this way inside the
+application.) The location where the root scope is attached to the DOM is defined by the location
+of {@link api/ng.directive:ngApp `ng-app`} directive. Typically
+`ng-app` is placed an the `<html>` element, but it can be placed on other elements as well, if,
+for example, only a portion of the view needs to be controlled by angular.
+
+To examine the scope in the debugger:
+
+  1. right click on the element of interest in your browser and select 'inspect element'. You
+  should see the browser debugger with the element you clicked on highlighted.
+
+  2. The debugger allows you to access the currently selected element in the console as `$0`
+    variable.
+
+  3. To retrieve the associated scope in console execute: `angular.element($0).scope()`
+
+
+## Scope Events Propagation
+
+Scopes can propagate events in similar fashion to DOM events. The event can be {@link
+api/ng.$rootScope.Scope#$broadcast broadcasted} to the scope children or {@link
+api/ng.$rootScope.Scope#$emit emitted} to scope parents.
+
+<example>
+  <file name="script.js">
+    function EventController($scope) {
+      $scope.count = 0;
+      $scope.$on('MyEvent', function() {
+        $scope.count++;
+      });
+    }
+  </file>
+  <file name="index.html">
+    <div ng-controller="EventController">
+      Root scope <tt>MyEvent</tt> count: {{count}}
+      <ul>
+        <li ng-repeat="i in [1]" ng-controller="EventController">
+          <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
+          <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
+          <br>
+          Middle scope <tt>MyEvent</tt> count: {{count}}
+          <ul>
+            <li ng-repeat="item in [1, 2]" ng-controller="EventController">
+              Leaf scope <tt>MyEvent</tt> count: {{count}}
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </file>
+</example>
+
+
+
+## Scope Life Cycle
+
+The normal flow of browser receiving an event is that it executes a corresponding JavaScript
+callback. Once the callback completes the browser re-renders the DOM and returns to waiting for
+more events.
+
+When the browser calls into JavaScript the code executes outside they Angular execution context,
+which means that Angular is unaware of model modifications. To properly process model
+modifications the execution has to enter the Angular execution context using the {@link
+api/ng.$rootScope.Scope#$apply `$apply`} method. Only model modifications which
+execute inside the `$apply` method will be properly accounted for by Angular. For example if a
+directive listens on DOM events, such as {@link
+api/ng.directive:ngClick `ng-click`} it must evaluate the
+expression inside the `$apply` method.
+
+After evaluating the expression `$apply` method performs a {@link
+api/ng.$rootScope.Scope#$digest `$digest`}. In $digest phase the scope examines all
+of the `$watch` expressions and compares them with previous value. This dirty checking, is done
+asynchronously. This means that assignment such as `$scope.username="angular"` will not
+immediately cause a `$watch` to be notified, instead the `$watch` notification is delayed until
+the `$digest` phase. This delay is desirable, since it coalesces multiple model updates into one
+`$watch` notification as well as it guarantees that during the `$watch` notification no other
+`$watch`es are running. If a `$watch` changes the value of the model, it will force additional
+`$digest` cycle.
+
+  1. **Creation**
+
+     The {@link api/ng.$rootScope root scope} is created during the application
+     bootstrap by the {@link api/AUTO.$injector $injector}. During template
+     linking, some directives create new child scopes.
+
+  2. **Watcher registration**
+
+     During template linking directives register {@link
+     api/ng.$rootScope.Scope#$watch watches} on the scope. This watches will be
+     used to propagate model values to the DOM.
+
+  3. **Model mutation**
+
+     For mutations to be properly observed, you should make them only within the {@link
+     api/ng.$rootScope.Scope#$apply scope.$apply()}. (Angular apis do this
+     implicitly, so no extra `$apply` call is needed when doing synchronous work in controllers,
+     or asynchronous work with {@link api/ng.$http $http} or {@link
+     api/ng.$timeout $timeout} services.
+
+  4. **Mutation observation**
+
+     At the end `$apply`, Angular performs a {@link api/ng.$rootScope.Scope#$digest
+     $digest} cycle on the root scope, which then propagates throughout all child scopes. During
+     the `$digest` cycle, all `$watch`ed expressions or functions are checked for model mutation
+     and if a mutation is detected, the `$watch` listener is called.
+
+  5. **Scope destruction**
+
+     When child scopes are no longer needed, it is the responsibility of the child scope creator
+     to destroy them via {@link api/ng.$rootScope.Scope#$destroy scope.$destroy()}
+     API. This will stop propagation of `$digest` calls into the child scope and allow for memory
+     used by the child scope models to be reclaimed by the garbage collector.
+
+
+### Scopes and Directives
+
+During the compilation phase, the {@link compiler compiler} matches {@link
+api/ng.$compileProvider.directive directives} against the DOM template. The directives
+usually fall into one of two categories:
+
+  - Observing {@link api/ng.$compileProvider.directive directives}, such as
+    double-curly expressions `{{expression}}`, register listeners using the {@link
+    api/ng.$rootScope.Scope#$watch $watch()} method. This type of directive needs
+    to be notified whenever the expression changes so that it can update the view.
+
+  - Listener directives, such as {@link api/ng.directive:ngClick
+    ng-click}, register a listener with the DOM. When the DOM listener fires, the directive
+    executes the associated expression and updates the view using the {@link
+    api/ng.$rootScope.Scope#$apply $apply()} method.
+
+When an external event (such as a user action, timer or XHR) is received, the associated {@link
+expression expression} must be applied to the scope through the {@link
+api/ng.$rootScope.Scope#$apply $apply()} method so that all listeners are updated
+correctly.
+
+### Directives that Create Scopes
+
+In most cases, {@link api/ng.$compileProvider.directive directives} and scopes interact
+but do not create new instances of scope. However, some directives, such as {@link
+api/ng.directive:ngController ng-controller} and {@link
+api/ng.directive:ngRepeat ng-repeat}, create new child scopes
+and attach the child scope to the corresponding DOM element. You can retrieve a scope for any DOM
+element by using an `angular.element(aDomElement).scope()` method call.
+
+### Controllers and Scopes
+
+Scopes and controllers interact with each other in the following situations:
+
+   - Controllers use scopes to expose controller methods to templates (see {@link
+     api/ng.directive:ngController ng-controller}).
+
+   - Controllers define methods (behavior) that can mutate the model (properties on the scope).
+
+   - Controllers may register {@link api/ng.$rootScope.Scope#$watch watches} on
+     the model. These watches execute immediately after the controller behavior executes.
+
+See the {@link api/ng.directive:ngController ng-controller} for more
+information.
+
+
+### Scope `$watch` Performance Considerations
+
+Dirty checking the scope for property changes is a common operation in Angular and for this reason
+the dirty checking function must be efficient. Care should be taken that the dirty checking
+function does not do any DOM access, as DOM access is orders of magnitude slower then property
+access on JavaScript object.
+
@@ -0,0 +1,3 @@
+@ngdoc overview
+@name Developer Guide: Type
+@description
@@ -0,0 +1,262 @@
+@ngdoc overview
+@name Contributing
+@description
+
+
+* <a href="#H1_1">License</a>
+* <a href="#H1_2">Contributing to Source Code</a>
+* <a href="#H1_3">Applying Code Standards</a>
+* <a href="#H1_4">Checking Out and Building `Angular`</a>
+* <a href="#H1_5">Submitting Your Changes</a>
+
+
+<a name="H1_1"></a>
+# License
+
+`Angular` is an open source project licensed under the {@link
+http://github.com/angular/angular.js/blob/master/LICENSE MIT license}. Your contributions are
+always welcome. When working with `angular` source base, please follow the guidelines provided on
+this page.
+
+
+<a name="H1_2"></a>
+# Contributing to Source Code
+
+We'd love for you to contribute to our source code and to make `angular` even better than it is
+today! Here are the guidelines we'd like you to use:
+
+* Major changes that you intend to contribute to the project must be discussed first on our {@link
+https://groups.google.com/forum/?hl=en#!forum/angular mailing list} so that we can better
+coordinate our efforts, prevent  duplication of work, and help you to craft the change so that it
+is successfully accepted upstream.
+
+* Small changes and bug fixes can be crafted and submitted to Github as a <a href="#H1_5">pull
+request</a>.
+
+
+
+<a name="H1_3"></a>
+# Applying Code Standards
+
+To ensure consistency throughout the source code, keep these rules in mind as you are working:
+
+* All features or bug fixes must be tested by one or more <a href="#unit-tests">specs</a>.
+
+* All public API methods must be documented with ngdoc, an extended version of jsdoc (we added
+support for markdown and templating via `@ngdoc` tag). To see how we document our APIs, please
+check out the existing ngdocs.
+
+* With the exceptions listed below, we follow the rules contained in {@link
+http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml Google's JavaScript Style
+Guide}:
+
+  * Do not use namespaces: Instead, we wrap the entire `angular` code base in an anonymous closure
+and export our API explicitly rather than implicitly.
+
+  * Wrap all code at 100 characters.
+
+  * Instead of complex inheritance hierarchies, we prefer simple objects. We use prototypical
+inheritance only when absolutely necessary.
+
+  * We love functions and closures and, whenever possible, prefer them over objects.
+
+  * To write concise code that can be better minified, internally we use aliases that map to the
+external API. See our existing code to see what we mean.
+
+  * We don't go crazy with type annotations for private internal APIs unless it's an internal API
+that is used throughout `angular`. The best guidance is to do what makes the most sense.
+
+
+<a name="H1_4"></a>
+# Checking Out and Building Angular
+
+The `angular` source code is hosted at {@link http://github.com Github}, which we also use to
+accept code contributions. Several steps are needed to check out and build `angular`:
+
+
+## Installation Dependencies
+
+Before you can build `angular`, you must install or configure the following dependencies on your
+machine:
+
+* {@link http://rake.rubyforge.org Rake}: We use Rake as our build system, which is pre-installed
+on most Macintosh and Linux machines. If that is not true in your case, you can grab it from the
+Rake website.
+
+* {@link http://nodejs.org Node.js}: We use Node to generate the documentation and to run a
+development web server. Depending on your system, you can install Node either from source or as a
+pre-packaged bundle.
+
+  You'll also need npm and the following npm modules:
+
+  * install npm: `curl http://npmjs.org/install.sh | sh`
+  * install q: `npm install q`
+  * install qq: `npm install qq`
+  * install q-fs: `npm install q-fs`
+  * install jasmine-node: `npm install jasmine`
+
+
+
+* Java: The Java runtime is used to run {@link http://code.google.com/p/js-test-driver
+JsTestDriver} (JSTD), which we use to run our unit test suite. JSTD binaries are part of the
+`angular` source base, which means there is no need to install or configure it separately.
+
+* Git: The {@link http://help.github.com/mac-git-installation Github Guide to Installing Git} is
+quite a good source for information on Git.
+
+
+## Creating a Github Account and Forking Angular
+
+To create a Github account, follow the instructions {@link https://github.com/signup/free here}.
+Afterwards, go ahead and {@link http://help.github.com/forking fork} the {@link
+https://github.com/angular/angular.js main angular repository}.
+
+
+## Building `Angular`
+
+To build `angular`, you check out the source code and use Rake to generate the non-minified and
+minified `angular` files:
+
+1. To clone your Github repository, run:
+
+        git clone git@github.com:<github username>/angular.js.git
+
+2. To go to the `angular` directory, run:
+
+        cd angular.js
+
+3. To add the main `angular` repository as an upstream remote to your repository, run:
+
+        git remote add upstream https://github.com/angular/angular.js.git
+
+4. To build `angular`, run:
+
+        rake package
+
+The build output can be located under the `build` directory. It consists of the following files and
+directories:
+
+* `angular-<version>.tgz` — This is the complete tarball, which  contains all of the release build
+artifacts.
+
+* `angular.js` — The non-minified `angular` script.
+
+* `angular.min.js` —  The minified `angular` script.
+
+* `angular-scenario.js` — The `angular` End2End test runner.
+
+* `angular-ie-compat.js` —  The Internet Explorer compatibility patch file.
+
+* `docs/` — A directory that contains all of the files needed to run `docs.angularjs.org`.
+
+* `docs/index.html` — The main page for the documentation.
+
+* `docs/docs-scenario.html` — The End2End test runner for the documentation application.
+
+
+## Running a Local Development Web Server
+
+To debug or test code, it is often useful to have a local HTTP server. For this purpose, we have
+made available a local web server based on Node.js.
+
+1. To start the web server, run:
+
+        ./nodeserver.sh
+
+2. To access the local server, go to this website:
+
+        http://localhost:8000/
+
+   By default, it serves the contents of the `angular` project directory.
+
+
+<a name="unit-tests"></a>
+## Running the Unit Test Suite
+
+Our unit and integration tests are written with Jasmine and executed with JsTestDriver.  To run the
+tests:
+
+1. To start the JSTD server, run:
+
+        ./server.sh
+
+2. To capture one or more browsers, go to this website:
+
+        http://localhost:9876/
+
+3. To trigger a test execution, run:
+
+        ./test.sh
+
+4. To automatically run the test suite each time one or more of the files in the project directory
+is changed, you can install `watchr` and then run:
+
+        watchr watchr.rb
+
+5. To view the output of each test run, you can tail this log file:
+
+        ./logs/jstd.log
+
+
+## Running the End2End Test Suite
+
+To run the End2End test suite:
+
+1. Start the local web server.
+2. In a browser, go to:
+
+        http://localhost:8000/build/docs/docs-scenario.html
+
+   The tests are executed automatically.
+
+
+
+<a name="H1_5"></a>
+# Submitting Your Changes
+
+To create and submit a change:
+
+1. Create a new branch off the master for your changes:
+
+        git branch my-fix-branch
+
+2. Check out the branch:
+
+        git checkout my-fix-branch
+
+3. Create your patch, make sure to have plenty of tests (that pass).
+
+4. Commit your changes:
+
+        git commit -a
+
+5. Run JavaScript Lint and be sure to address all new warnings and errors:
+
+        rake lint
+
+6. Push your branch to Github:
+
+        git push origin my-fix-branch
+
+7. In Github, send a pull request to `angular:master`.
+
+8. When the patch is reviewed and merged, delete your branch and pull yours — and other — changes
+from the main (upstream) repository:
+
+  1. To delete the branch in Github, run:
+
+            git push origin :my-fix-branch
+
+  2. To check out the master branch, run:
+
+            git checkout master
+
+  3. To delete a local branch, run:
+
+            git branch -D my-fix-branch
+
+  4. To update your master with the latest upstream version, run:
+
+            git pull --ff upstream master
+
+That's it! Thank you for your contribution!
@@ -0,0 +1,70 @@
+@ngdoc overview
+@name Downloading
+@description
+
+# Including angular scripts from the angular server
+The quickest way to get started is to point your html `<script>` tag to a
+<http://code.angularjs.org/> URL.  This way, you don't have to download anything or maintain a
+local copy.
+
+There are two types of angular script URLs you can point to, one for development and one for
+production:
+
+* __angular-<version>.js__ — This is the human-readable, non-minified version, suitable for web
+development.
+* __angular-<version>.min.js__ — This is the minified version, which we strongly suggest you use in
+production.
+
+To point your code to an angular script on the angular server, use the following template.  This
+example points to (non-minified) version 0.10.6:
+
+<pre>
+  <!doctype html>
+  <html ng-app>
+    <head>
+      <title>My Angular App</title>
+      <script src="http://code.angularjs.org/angular-0.10.6.js"></script>
+    </head>
+    <body>
+    </body>
+  </html>
+</pre>
+
+
+# Downloading and hosting angular files locally
+This option is for those who want to work with angular offline, or those who want to host the
+angular files on their own servers.
+
+If you navigate to <http://code.angularjs.org/>, you'll see a directory listing with all of the
+angular versions since we started releasing versioned build artifacts (quite late in the project
+lifetime).  Each directory contains all artifacts that we released for a particular version.
+Download the version you want and have fun.
+
+Each directory under <http://code.angularjs.org/> includes the following set of files:
+
+* __`angular-<version>.js`__ — This file is non-obfuscated, non-minified, and human-readable by
+opening it it any editor or browser. In order to get better error messages during development, you
+should always use this non-minified angular script.
+
+* __`angular-<version>.min.js`__ — This is a minified and obfuscated version of
+`angular-<version>.js` created with the Closure compiler. Use this version for production in order
+to minimize the size of the application that is downloaded by your user's browser.
+
+* __`angular-<version>.tgz`__ — This is a tarball archive that contains all of the files released
+for this angular version. Use this file to get everything in a single download.
+
+* __`angular-ie-compat-<version>.js`__ — This is a special file that contains code and data
+specifically tailored for getting Internet Explorer to work with angular. If you host your own copy
+of angular files, make sure that this file is available for download, and that it resides under the
+same parent path as `angular-<version>.js` or `angular-<version>.min.js`.
+
+* __`angular-mocks-<version>.js`__ — This file contains an implementation of mocks that makes
+testing angular apps even easier. Your unit/integration test harness should load this file after
+`angular-<version>.js` is loaded.
+
+* __`angular-scenario-<version>.js`__ — This file is a very nifty JavaScript file that allows you
+to write and execute end-to-end tests for angular applications.
+
+* __`docs-<version>`__ — this directory contains all the files that compose the
+<http://docs.angularjs.org/> documentation app. These files are handy to see the older version of
+our docs, or even more importantly, view the docs offline.
@@ -0,0 +1,81 @@
+@ngdoc overview
+@name FAQ
+@description
+
+#FAQ
+
+### Why is this project called "angular"? Why is the namespace called "ng"?
+
+Because HTML has angular brackets and "ng" sounds like "angular".
+
+### Is <angular/> an HTML5 tag?
+
+No, <angular/> is not an HTML5 tag. angular is an orthogonal project to HTML5; you can use the two
+together.
+
+### Is angular a {library, framework, DOM manipulation library, widget library, native plugin}?
+
+No, angular is none of these. You don't call its functions, it does not call your functions,
+it does not provide a way to manipulate DOM, but does provide primitives to create UI projections
+of your data. There are lots of existing widget libraries which you can integrate with angular.
+It is 100% JavaScript, 100% client side and compatible with both desktop and mobile browsers.
+
+### Do I need to worry about security holes in angular?
+
+Like with any technology, angular is not impervious to attack. angular does, however, provide
+built-in protection from basic security holes including cross-site scripting and HTML injection
+attacks. angular does round-trip escaping on all strings for you.
+
+### Can I download the source, build, and host the angular environment locally?
+
+Yes. See instructions in {@link downloading}.
+
+### Is angular a templating system?
+
+At the highest level, angular does look like a just another templating system. But there is one
+important reason why angular templating system is different and makes it very good fit for
+application development: bidirectional data binding. The template is compiled on the browser and
+the compilation step produces a live view. This means you, the developer, don't need to write
+code to constantly sync the view with the model and the model with the view as in other
+templating systems.
+
+### What browsers does angular work with?
+
+Webkit-based browsers (Safari, Chrome, iPhone, Android, WebOS, BlackBerry 6), Firefox, IE6 and
+above. Note that CSS only works on IE7 and above.
+
+### What's angular's performance like?
+
+angular takes ~300ms to load, render, and compile. In Chrome it uses about 2-5MB of memory. Your
+app's performance will vary depending on how many bindings you use.
+
+### How big is the angular bootstrap JS file that I need to include?
+
+The size of the library itself is < 50KB compressed and obfuscated.
+
+### Can I use the open-source Closure Library with angular?
+
+Yes, you can use widgets from the {@link http://code.google.com/closure/library Closure Library}
+in angular.
+
+### Does angular use the jQuery library?
+
+Yes, angular uses {@link http://jquery.com/ jQuery}, the open source DOM manipulation library.
+If jQuery is not present in your script path, angular falls back on its own implementation of
+{@link api/angular.element jQuery lite}. If jQuery is present in the path, angular uses it to
+manipulate the DOM.
+
+### What is testability like in angular?
+
+Very testable. It has an integrated dependency injection framework. See
+{@link api/ng service} for details.
+
+### How can I learn more about angular?
+
+Watch the July 28, 2010 talk
+"{@link http://www.youtube.com/watch?v=elvcgVSynRg| Angular: A Radically Different Way of Building
+AJAX Apps}".
+
+### How is angular licensed?
+
+The MIT License.
@@ -0,0 +1,143 @@
+@ngdoc overview
+@name Getting Started
+@description
+
+# Hello World!
+
+A great way for you to get started with AngularJS is to create the tradtional
+"Hello World!" app:
+
+1. In your favorite text editor, create an HTML file
+   (for example, `helloworld.html`).
+2. From the __Source__ box below, copy and paste the code into your HTML file.
+   (Double-click on the source to easily select all.)
+3. Open the file in your web browser.
+
+<doc:example>
+    <doc:source>
+        Hello {{'World'}}!
+    </doc:source>
+</doc:example>
+
+The resulting web page should look something like the following:
+
+<img class="center" src="img/helloworld.png" border="1">
+
+Now let's take a closer look at that code, and see what is going on behind
+the scenes.
+
+The `ng-app` tags tells angular to process the entire HTML page and bootstrap the app when the page
+is loaded:
+
+<pre>
+    <html ng-app>
+</pre>
+
+The next line downloads the angular script:
+
+<pre>
+    <script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>
+</pre>
+
+(For details on what happens when angular processes an HTML page,
+see {@link guide/bootstrap Bootstrap}.)
+
+Finally, this line in the `<body>` of the page is the template that describes
+how to display our greeting in the UI:
+
+<pre>
+    Hello {{'World'}}!
+</pre>
+
+Note the use of the double curly brace markup (`{{ }}`) to bind the expression to
+the greeting text. Here the expression is the string literal 'World'.
+
+Next let's look at a more interesting example, that uses AngularJS to
+bind a dynamic expression to our greeting text.
+
+# Hello AngularJS World!
+
+This example demonstrates angular's two-way data binding:
+
+1. Edit the HTML file you created in the "Hello World!" example above.
+2. Replace the contents of `<body>` with the code from the __Source__ box below.
+3. Refresh your browser window.
+
+<doc:example>
+ <doc:source>
+  Your name: <input type="text" ng-model="yourname" placeholder="World">
+  <hr>
+  Hello {{yourname || 'World'}}!
+ </doc:source>
+</doc:example>
+
+After the refresh, the page should look something like this:
+
+<img class="left" src="img/helloworld_2way.png" border="1" >
+
+These are some of the important points to note from this example:
+
+* The text input {@link guide/directive directive}
+  is bound to a model variable called `yourname`.
+* The double curly braces notation binds the `yourname` model to the greeting text.
+
+* You did not need to explicitly register an event listener or define an event handler for events!
+
+Now try typing your name into the input box, and notice the immediate change to
+the displayed greeting. This demonstrates the concept of angular's
+{@link guide/dev_guide.templates.databinding bi-directional data binding}. Any changes to the input
+field are immediately
+reflected in the model (one direction), and any changes to the model are
+reflected in the greeting text (the other direction).
+
+
+# Anatomy Of An Angular App
+
+This section describes the 3 parts of an angular app, and explains how they map to the
+Model-View-Controller design pattern:
+
+## Templates
+
+Templates, which you write in HTML and CSS, serve as the View. You add elements, attributes, and
+markup to HTML, which serve as instructions to the angular compiler. The angular compiler is fully
+extensible, meaning that with angular you can build your own declarative language on top of HTML!
+
+
+## Application Logic and Behavior
+
+Application Logic and Behavior, which you define in JavaScript, serve as the Controller. With
+angular (unlike with standard AJAX applications) you don't need to write additional listeners or
+DOM manipulators, because they are built-in. This feature makes your application logic very easy to
+write, test, maintain, and understand.
+
+
+## Data
+
+The Model is referenced from properties on {@link guide/scope angular scope objects}.
+The data in your model could be Javascript objects, arrays, or primitives, it doesn't matter.  What
+matters is that these are all referenced by the scope object.
+
+Angular employs scopes to keep your data model and your UI in sync.  Whenever something occurs to
+change the state of the model, angular immediately reflects that change in the UI, and vice versa.
+
+The following illustration shows the parts of an angular application and how they work together:
+
+<img class="left" src="img/angular_parts.png" border="0" />
+
+In addition, angular comes with a set of Services, which have the following properties:
+
+* The services provided are very useful for building web applications.
+* You can extend and add application-specific behavior to services.
+* Services include Dependency-Injection, XHR, caching, URL routing, and browser abstraction.
+
+
+# Where To Go Next
+
+* If you like what you've learned so far, you should definitely check out our awesome {@link
+tutorial/ Tutorial}, which walks you through the process of building real apps with AngularJS.
+
+* For further explanations and examples of the AngularJS concepts presented on this page, see the
+{@link guide/index Developer Guide}.
+
+* For additional hands-on examples of using AngularJS, including more source  code that you can
+copy and paste into your own pages, take a look through the {@link cookbook/ Cookbook}.
@@ -0,0 +1,148 @@
+@ngdoc overview
+@name Tutorial
+@description
+
+A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
+the construction of an AngularJS web app. The app you will build is a catalog that displays a list
+of Android devices, lets you filter the list to see only devices that interest you, and then view
+details for any device.
+
+<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">
+
+Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
+or plug-ins. As you work through the tutorial, you will:
+
+* See examples of how to use client-side data binding and dependency injection to build dynamic
+views of data that change immediately in response to user actions.
+* See how Angular creates listeners on your data without the need for DOM manipulation.
+* Learn a better, easier way to test your web apps.
+* Learn how to use Angular services to make common web tasks, such as getting data into your app,
+easier.
+
+And all of this works in any browser without modification to the browser!
+
+When you finish the tutorial you will be able to:
+
+* Create a dynamic application that works in any browser.
+* Define the differences between Angular and common JavaScript frameworks.
+* Understand how data binding works in AngularJS.
+* Use the angular-seed project to quickly boot-strap your own projects.
+* Create and run tests.
+* Identify resources for learning more about AngularJS.
+
+The tutorial guides you through the entire process of building a simple application, including
+writing and running unit and end-to-end tests. Experiments at the end of each step provide
+suggestions for you learn more about AngularJS and the application you are building.
+
+You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
+really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
+{@link misc/started Getting Started} document.
+
+
+
+
+
+
+
+# Working with the code
+
+You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
+environment. Options for working with the tutorial are to use the Git versioning system for source
+code management or to use scripts that copy snapshots of project files into your workspace
+(`sandbox`) directory. Select one of the tabs below and follow the instructions for setting up your
+computer for your preferred option.
+
+<div class="tabbable" show="true">
+  <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
+    <ol>
+      <li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the
+following command in a terminal window:</p>
+      <pre>java -version</pre>
+      <p>You will need Java to run unit tests.</p></li>
+      <li><p>Download Git from the <a href="http://git-scm.com/download">Git</a> site.</p>
+      <p>You can build Git from source or use the pre-compiled package.</p></li>
+      <li><p>Clone the angular-phonecat repository located at <a
+href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
+      <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
+      <p>This command creates the <code>angular-phonecat</code> directory in your current
+directory.</p></li>
+      <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
+      <pre>cd angular-phonecat</pre>
+      <p>The tutorial instructions assume you are running all commands from the angular-phonecat
+directory.</p></li>
+      <li><p>You will need an http server running on your system. Mac and Linux machines typically
+have Apache pre-installed, but If you don't already have one installed, you can <a
+href="http://nodejs.org/#download">install node.js</a>. Use <code>node</code> to run
+<code>scripts/web-server.js</code>,  a simple bundled http server.</p></li>
+    </ol>
+  </div>
+
+  <div class="tab-pane well" id="git-win" title="Git on Windows">
+    <ol>
+      <li><p>You will need Java to run unit tests, so run the following command to verify that you
+have <a href="http://java.com/">Java</a> installed and that the <code>java</code> executable is on
+your <code>PATH</code>.</p>
+      <pre>java -version</pre>
+      <p></p></li>
+      <li><p>Install msysGit from <a href="http://git-scm.com/download">the Git</a> site.</p></li>
+      <li><p>Open msysGit bash and clone the angular-phonecat repository located at <a
+href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
+      <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
+      <p>This command creates the angular-phonecat directory in your current directory.</p></li>
+      <li><p>Change your current directory to angular-phonecat.</p>
+      <pre>cd angular-phonecat</pre>
+      <p>The tutorial instructions assume you are running all commands from the angular-phonecat
+directory.</p>
+      <p>You should run all <code>git</code> commands from msysGit bash.</p>
+      <p>Other commands like <code>test-server.bat</code> or <code>test.bat</code> should be
+executed from the Windows command line.</li>
+      <li><p>You need an http server running on your system, but if you don't already have one
+already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that
+<code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
+<code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
+    </ol>
+  </div>
+
+  <div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux">
+    <ol>
+      <li><p>You need Java to run unit tests, so verify that you have <a
+href="http://java.com/">Java</a> installed by running the following command in a terminal
+window:</p>
+      <pre>java -version</pre>
+       <li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a>
+containing all of the files and unzip them into the [tutorial-dir] directory</p>.</li>
+      <li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
+      <pre>cd [tutorial-dir]/sandbox</pre>
+      <p>The tutorial instructions assume you are running all commands from your
+<code>sandbox</code> directory.</p></li>
+      <li><p>You need an http server running on your system and Mac and Linux machines typically
+have Apache pre-installed. If you don't have an http server installed, you can <a
+href="http://nodejs.org/#download">install node.js</a> and use it to run
+<code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
+    </ol>
+  </div>
+
+  <div class="tab-pane well" id="ss-win" title="Snapshots on Windows">
+    <ol>
+      <li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the
+<code>java</code> executable is on your <code>PATH</code> by running the following command in the
+Windows command line:</p>
+      <pre>java -version</pre>
+      <p>You need Java to run unit tests, so download the <a
+href="http://code.angularjs.org/angular-phonecat/">zip archive</a> that contains all of the files
+and unzip the files into the [tutorial-dir] directory</p></li>
+      <li><p>Change your current directory to [tutorial-dir]/sandbox, as follows:</p>
+      <pre>cd [tutorial-dir]/sandbox</pre>
+      <p>The tutorial instructions assume you are running all commands from this directory.</p></li>
+      <li><p>You need an http server running on your system, but if you don't already have one
+already installed, you can install <a href="http://nodejs.org/#download">node.js</a>. Make sure that
+<code>nodejs\bin</code> was added into your <code>PATH</code>. Use <code>node</code> to run
+<code>scripts\web-server.js</code>, a simple bundled http server.</p></li>
+    </ol>
+  </div>
+</divs>
+
+The last thing to do is to make sure your computer has a web browser and a good text editor
+installed. Now, let's get some cool stuff done!
+
+{@link step_00 <span class="btn btn-primary">Get Started!</span>}
@@ -0,0 +1,275 @@
+@ngdoc overview
+@name Tutorial: 0 - Bootstrapping
+@description
+
+<ul doc-tutorial-nav="0"></ul>
+
+
+You are now ready to build the AngularJS phonecat app. In this step, you will become familiar
+with the most important source code files, learn how to start the development servers bundled with
+angular-seed, and run the application in the browser.
+
+
+<div class="tabbable" show="true" ng-model="$cookies.platformPreference">
+  <div class="tab-pane well" id="git-mac" title="Git on Mac/Linux" value="gitUnix">
+    <ol>
+      <li><p>In angular-phonecat directory, run this command:</p>
+      <pre>git checkout -f step-0</pre>
+      <p>This resets your workspace to step 0 of the tutorial app.</p>
+      <p>You must repeat this for every future step in the tutorial and change the number to
+      the number of the step you are on. This will cause any changes you made within
+      your working directory to be lost.</p></li>
+
+      <li>To see the app running in a browser, do one of the following:
+        <ul>
+          <li><b>For node.js users:</b>
+            <ol>
+              <li>In a <i>separate</i> terminal tab or window, run
+<code>./scripts/web-server.js</code> to start the web server.</li>
+              <li>Open a browser window for the app and navigate to <a
+href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
+            </ol>
+          </li>
+          <li><b>For other http servers:</b>
+            <ol>
+              <li>Configure the server to serve the files in the <code>angular-phonecat</code>
+directory.</li>
+              <li>Navigate in your browser to
+<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </div>
+
+
+  <div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin">
+    <ol>
+      <li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p>
+      <pre>git checkout -f step-0</pre>
+      <p>This resets your workspace to step 0 of the tutorial app.</p>
+      <p>You must repeat this for every future step in the tutorial and change the number to
+      the number of the step you are on. This will cause any changes you made within
+      your working directory to be lost.</p></li>
+      <li>To see the app running in a browser, do one of the following:
+        <ul>
+          <li><b>For node.js users:</b>
+            <ol>
+              <li>In a <i>separate</i> terminal tab or window, run <code>node
+scripts\web-server.js</code> to start the web server.</li>
+              <li>Open a browser window for the app and navigate to <a
+href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
+            </ol>
+          </li>
+          <li><b>For other http servers:</b>
+            <ol>
+              <li>Configure the server to serve the files in the <code>angular-phonecat</code>
+directory.</li>
+              <li>Navigate in your browser to
+<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </div>
+
+
+  <div class="tab-pane well" id="ss-mac" title="Snapshots on Mac/Linux" value="snapshotUnix">
+    <ol>
+      <li><p>In the angular-phonecat directory, run this command:</p>
+      <pre>./goto_step.sh 0</pre>
+      <p>This resets your workspace to step 0 of the tutorial app.</p>
+      <p>You must repeat this for every future step in the tutorial and change the number to
+      the number of the step you are on. This will cause any changes you made within
+      your working directory to be lost.</p></li>
+      <li>To see the app running in a browser, do one of the following:
+        <ul>
+          <li><b>For node.js users:</b>
+            <ol>
+              <li>In a <i>separate</i> terminal tab or window, run
+<code>./scripts/web-server.js</code> to start the web server.</li>
+              <li>Open a browser window for the app and navigate to <a
+href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
+            </ol>
+          </li>
+          <li><b>For other http servers:</b>
+            <ol>
+              <li>Configure the server to serve the files in the angular-phonecat
+<code>sandbox</code> directory.</li>
+              <li>Navigate in your browser to
+<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </div>
+
+
+  <div class="tab-pane well" id="ss-win" title="Snapshots on Windows" value="snapshotWin">
+    <ol>
+      <li><p>Open windows command line and run this command (in the angular-phonecat directory):</p>
+      <pre>goto_step.bat 0</pre>
+      <p>This resets your workspace to step 0 of the tutorial app.</p>
+      <p>You must repeat this for every future step in the tutorial and change the number to
+      the number of the step you are on. This will cause any changes you made within
+      your working directory to be lost.</p></li>
+      <li>To see the app running in a browser, do one of the following:
+        <ul>
+          <li><b>For node.js users:</b>
+            <ol>
+              <li>In a <i>separate</i> terminal tab or window, run <code>node
+scripts\web-server.js</code> to start the web server.</li>
+              <li>Open a browser window for the app and navigate to <a
+href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
+            </ol>
+          </li>
+          <li><b>For other http servers:</b>
+            <ol>
+              <li>Configure the server to serve the files in the angular-phonecat
+<code>sandbox</code> directory.</li>
+              <li>Navigate in your browser to
+<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </div>
+</div>
+
+
+You can now see the page in your browser. It's not very exciting, but that's OK.
+
+The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below.
+The code contains some key Angular elements that we will need going forward.
+
+__`app/index.html`:__
+<pre>
+<!doctype html>
+<html lang="en" ng-app>
+<head>
+  <meta charset="utf-8">
+  <title>My HTML File</title>
+  <link rel="stylesheet" href="css/app.css">
+  <link rel="stylesheet" href="css/bootstrap.css">
+  <script src="lib/angular/angular.js"></script>
+</head>
+<body>
+
+  <p>Nothing here {{'yet' + '!'}}</p>
+
+</body>
+</html>
+</pre>
+
+
+
+## What is the code doing?
+
+* `ng-app` directive:
+
+          <html ng-app>
+
+  The `ng-app` attribute is represents an Angular directive used to flag an element which Angular
+  should consider to be the root element of our application. This gives application developers the
+  freedom to tell Angular if the entire html page or only a portion of it should be treated as the
+  Angular application.
+
+* AngularJS script tag:
+
+          <script src="lib/angular/angular.js">
+
+  This code downloads the `angular.js` script and registers a callback that will be executed by the
+browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
+looks for the {@link api/ng.directive:ngApp ngApp} directive. If
+Angular finds the directive, it will bootstrap the application with the root of the application DOM
+being the element on which the `ngApp` directive was defined.
+
+* Double-curly binding with an expression:
+
+          Nothing here {{'yet' + '!'}}`
+
+  This line demonstrates the core feature of Angular's templating capabilities – a binding, denoted
+  by double-curlies `{{ }}` as well as a simple expression `'yet' + '!'` used in this binding.
+
+  The binding tells Angular, that it should evaluate an expression and insert the result into the
+  DOM in place of the binding. Rather than a one-time insert, as we'll see in the next steps, a
+  binding will result in efficient continuous updates whenever the result of the expression
+  evaluation changes.
+
+  {@link guide/expression Angular expression} is a JavaScript-like code snippet that is
+  evaluated by Angular in the context of the current model scope, rather than within the scope of
+  the global context (`window`).
+
+  As expected, once this template is processed by Angular, the html page contains the text:
+  "Nothing here yet!".
+
+## Bootstrapping AngularJS apps
+
+Bootstrapping AngularJS apps automatically using the `ngApp` directive is very easy and suitable
+for most cases. In advanced cases, such as when using script loaders, you can use
+{@link guide/bootstrap imperative / manual way} to bootstrap the app.
+
+There are 3 important things that happen during the app bootstrap:
+
+1. The {@link api/AUTO.$injector injector} that will be used for dependency injection
+   within this app is created.
+
+2. The injector will then create the {@link api/ng.$rootScope root scope} that will
+   become the context for the model of our application.
+
+3. Angular will then "compile" the DOM starting at the `ngApp` root element, processing any
+   directives and bindings found along the way.
+
+
+Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse
+click, key press or incoming HTTP response) that might change the model. Once such an event occurs,
+Angular detects if it caused any model changes and if changes are found, Angular will reflect them
+in the view by updating all of the affected bindings.
+
+The structure of our application is currently very simple. The template contains just one directive
+and one static binding, and our model is empty. That will soon change!
+
+<img class="diagram" src="img/tutorial/tutorial_00.png">
+
+
+## What are all these files in my working directory?
+
+Most of the files in your working directory come from the {@link
+https://github.com/angular/angular-seed angular-seed project} which is typically used to bootstrap
+new Angular projects. The seed project includes the latest Angular libraries, test libraries,
+scripts and a simple example app, all pre-configured for developing a typical web app.
+
+For the purposes of this tutorial, we modified the angular-seed with the following changes:
+
+* Removed the example app
+* Added phone images to `app/img/phones/`
+* Added phone data files (JSON) to `app/phones/`
+* Added [Bootstrap](http://twitter.github.com/bootstrap/) files to `app/css/` and `app/img/`
+
+
+
+# Experiments
+
+* Try adding a new expression to the `index.html` that will do some math:
+
+          <p>1 + 2 = {{ 1 + 2 }}</p>
+
+
+
+# Summary
+
+Now let's go to {@link step_01 step 1} and add some content to the web app.
+
+
+<ul doc-tutorial-nav="0"></ul>
+
+<div style="display: none">
+Note: During the bootstrap the injector and the root scope will then be associated with the
+   element on which the `ngApp` directive was declared, so when debugging the app you can retrieve
+   them from browser console via `angular.element(rootElement).scope()` and
+   `angular.element(rootElement).injector()`.
+</div>
@@ -0,0 +1,55 @@
+@ngdoc overview
+@name Tutorial: 1 - Static Template
+@description
+
+<ul doc-tutorial-nav="1"></ul>
+
+
+In order to illustrate how angular enhances standard HTML, you will create a purely *static* HTML
+page and then examine how we can turn this HTML code into a template that angular will use to
+dynamically display the same result with any set of data.
+
+In this step you will add some basic information about two cell phones to an HTML page.
+
+
+<div doc-tutorial-reset="1"></div>
+
+
+The page now contains a list with information about two phones.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}:
+
+__`app/index.html`:__
+<pre>
+  <ul>
+    <li>
+      <span>Nexus S</span>
+      <p>
+        Fast just got faster with Nexus S.
+      </p>
+    </li>
+    <li>
+      <span>Motorola XOOM™ with Wi-Fi</span>
+      <p>
+        The Next, Next Generation tablet.
+      </p>
+    </li>
+  </ul>
+</pre>
+
+
+# Experiments
+
+* Try adding more static HTML to `index.html`. For example:
+
+          <p>Total number of phones: 2</p>
+
+
+# Summary
+
+This addition to your app uses static HTML to display the list. Now, let's go to {@link step_02
+step 2} to learn how to use AngularJS to dynamically generate the same list.
+
+
+<ul doc-tutorial-nav="1"></ul>
@@ -0,0 +1,212 @@
+@ngdoc overview
+@name Tutorial: 2 - Angular Templates
+@description
+
+<ul doc-tutorial-nav="2"></ul>
+
+
+Now it's time to make the web page dynamic — with AngularJS. We'll also add a test that verifies the
+code for the controller we are going to add.
+
+There are many ways to structure the code for an application. For Angular apps, we encourage the
+use of {@link http://en.wikipedia.org/wiki/Model–View–Controller the Model-View-Controller (MVC)
+design pattern} to decouple the code and to separate concerns. With that in mind, let's use a
+little Angular and JavaScript to add model, view, and controller components to our app.
+
+
+<div doc-tutorial-reset="2"></div>
+
+
+The app now contains a list with three phones.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-1...step-2 GitHub}:
+
+
+## View and Template
+
+In Angular, the __view__ is a projection of the model through the HTML __template__. This means that
+whenever the model changes, Angular refreshes the appropriate binding points, which updates the
+view.
+
+The view component is constructed by Angular from this template:
+
+__`app/index.html`:__
+<pre>
+<html ng-app>
+<head>
+  ...
+  <script src="lib/angular/angular.js"></script>
+  <script src="js/controllers.js"></script>
+</head>
+<body ng-controller="PhoneListCtrl">
+
+  <ul>
+    <li ng-repeat="phone in phones">
+      {{phone.name}}
+      <p>{{phone.snippet}}</p>
+    </li>
+  </ul>
+</body>
+</html>
+</pre>
+
+We replaced the hard-coded phone list with the
+{@link api/ng.directive:ngRepeat ngRepeat directive} and two
+{@link guide/expression Angular expressions} enclosed in curly braces:
+`{{phone.name}}` and `{{phone.snippet}}`:
+
+* The `ng-repeat="phone in phones"` statement in the `<li>` tag is an Angular repeater. The
+repeater tells Angular to create a `<li>` element for each phone in the list using the first `<li>`
+tag as the template.
+
+* As we've learned in step 0, the curly braces around `phone.name` and `phone.snippet` denote
+bindings. As opposed to evaluating constants, these expression are refering to our application
+model, which was set up in our `PhoneListCtrl` controller.
+
+      <img class="diagram" src="img/tutorial/tutorial_02.png">
+
+
+## Model and Controller
+
+The data __model__ (a simple array  of phones in object literal notation) is instantiated within
+the `PhoneListCtrl` __controller__:
+
+__`app/js/controllers.js`:__
+<pre>
+function PhoneListCtrl($scope) {
+  $scope.phones = [
+    {"name": "Nexus S",
+     "snippet": "Fast just got faster with Nexus S."},
+    {"name": "Motorola XOOM™ with Wi-Fi",
+     "snippet": "The Next, Next Generation tablet."},
+    {"name": "MOTOROLA XOOM™",
+     "snippet": "The Next, Next Generation tablet."}
+  ];
+}
+</pre>
+
+
+
+
+Although the controller is not yet doing very much controlling, it is playing a crucial role. By
+providing context for our data model, the controller allows us to establish data-binding between
+the model and the view. We connected the dots between the presentation, data, and logic components
+as follows:
+
+* `PhoneListCtrl` — the name of our controller function (located in the JavaScript file
+`controllers.js`), matches the value of the
+{@link api/ng.directive:ngController ngController} directive located
+on the `<body>` tag.
+
+* The phone data is then attached to the *scope* (`$scope`) that was injected into our controller
+function. The controller scope is a prototypically descendant of the root scope that was created
+when the application bootstrapped. This controller scope is available to all bindings located within
+the `<body ng-controller="PhoneListCtrl">` tag.
+
+  The concept of a scope in Angular is crucial; a scope can be seen as the glue which allows the
+template, model and controller to work together. Angular uses scopes, along with the information
+contained in the template, data model, and controller, to keep models and views separate, but in
+sync. Any changes made to the model are reflected in the view; any changes that occur in the view
+are reflected in the model.
+
+  To learn more about Angular scopes, see the {@link api/ng.$rootScope.Scope angular scope documentation}.
+
+
+## Tests
+
+The "Angular way" makes it easy to test code as it is being developed. Take a look at the following
+unit test for your newly created controller:
+
+__`test/unit/controllersSpec.js`:__
+<pre>
+describe('PhoneCat controllers', function() {
+
+  describe('PhoneListCtrl', function(){
+
+    it('should create "phones" model with 3 phones', function() {
+      var scope = {},
+          ctrl = new PhoneListCtrl(scope);
+
+      expect(scope.phones.length).toBe(3);
+    });
+  });
+});
+</pre>
+
+The test verifies that we have three records in the phones array and the example demonstrates how
+easy it is to create a unit test for code in Angular. Since testing is such a critical part of
+software development, we make it easy to create tests in Angular so that developers are encouraged
+to write them.
+
+Angular developers prefer the syntax of Jasmine's Behavior-driven Development  (BDD) framework when
+writing tests. Although Angular does not require you to use Jasmine, we wrote all of the tests in
+this tutorial in Jasmine. You can learn about Jasmine on the {@link
+http://pivotal.github.com/jasmine/ Jasmine home page} and on the {@link
+https://github.com/pivotal/jasmine/wiki Jasmine wiki}.
+
+The angular-seed project is pre-configured to run all unit tests using {@link
+http://code.google.com/p/js-test-driver/ JsTestDriver}. To run the test, do the following:
+
+1. In a _separate_ terminal window or tab, go to the `angular-phonecat` directory and run
+`./scripts/test-server.sh` to start the test web server.
+
+2. Open a new browser window and navigate to {@link http://localhost:9876}.
+
+3. Choose "Capture this browser in strict mode".
+
+   At this point, you can leave this window open and forget about it. JsTestDriver will use it to
+execute the tests and report the results in the terminal.
+
+4. Execute the test by running `./scripts/test.sh`
+
+   You should see the following or similar output:
+
+             Chrome: Runner reset.
+             .
+             Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
+               Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
+
+  Yay! The test passed! Or not...
+
+  Note: If you see errors after you run the test, close the browser window and go back to the
+  terminal and kill the script, then repeat the procedure above.
+
+# Experiments
+
+* Add another binding to `index.html`. For example:
+
+          <p>Total number of phones: {{phones.length}}</p>
+
+* Create a new model property in the controller and bind to it from the template. For example:
+
+          $scope.hello = "Hello, World!"
+
+  Refresh your browser to make sure it says, "Hello, World!"
+
+* Create a repeater that constructs a simple table:
+
+          <table>
+            <tr><th>row number</th></tr>
+            <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
+          </table>
+
+  Now, make the list 1-based by incrementing `i` by one in the binding:
+
+          <table>
+            <tr><th>row number</th></tr>
+            <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
+          </table>
+
+* Make the unit test fail by changing the `toBe(3)` statement to `toBe(4)`, and rerun the
+`./scripts/test.sh` script.
+
+
+# Summary
+
+You now have a dynamic app that features separate model, view, and controller components, and you
+are testing as you go. Now, let's go to {@link step_03 step 3} to learn how to add full text search
+to the app.
+
+
+<ul doc-tutorial-nav="2"></ul>
@@ -0,0 +1,194 @@
+@ngdoc overview
+@name Tutorial: 3 - Filtering Repeaters
+@description
+
+<ul doc-tutorial-nav="3"></ul>
+
+
+We did a lot of work in laying a foundation for the app in the last step, so now we'll do something
+simple; we will add full text search (yes, it will be simple!). We will also write an end-to-end
+test, because a good end-to-end test is a good friend. It stays with your app, keeps an eye on it,
+and quickly detects regressions.
+
+
+<div doc-tutorial-reset="3"></div>
+
+
+The app now has a search box. Notice that the phone list on the page changes depending on what a
+user types into the search box.
+
+The most important differences between Steps 2 and 3 are listed below. You can see the full diff on
+{@link https://github.com/angular/angular-phonecat/compare/step-2...step-3
+ GitHub}:
+
+
+## Controller
+
+We made no changes to the controller.
+
+
+## Template
+
+__`app/index.html`:__
+<pre>
+  <div class="container-fluid">
+    <div class="row-fluid">
+      <div class="span2">
+        <!--Sidebar content-->
+
+        Search: <input ng-model="query">
+
+      </div>
+      <div class="span10">
+        <!--Body content-->
+
+        <ul class="phones">
+          <li ng-repeat="phone in phones | filter:query">
+            {{phone.name}}
+            <p>{{phone.snippet}}</p>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
+</pre>
+
+We added a standard HTML `<input>` tag and used angular's
+{@link api/ng.filter:filter $filter} function to process the input for the
+`ngRepeate` directive.
+
+This lets a user enter search criteria and immediately see the effects of their search on the phone
+list. This new code demonstrates the following:
+
+* Data-binding. This is one of the core features in Angular. When the page loads, Angular binds the
+name of the input box to a variable of the same name in the data model and keeps the two in sync.
+
+  In this code, the data that a user types into the input box (named __`query`__) is immediately
+available as a filter input in the list repeater (`phone in phones | filter:`__`query`__). When
+changes to the data model cause the repeater's input to change, the repeater efficiently updates
+the DOM to reflect the current state of the model.
+
+      <img  class="diagram" src="img/tutorial/tutorial_03.png">
+
+* Use of `filter` filter. The {@link api/ng.filter:filter filter} function uses the
+`query` value to create a new array that contains only those records that match the `query`.
+
+  `ngRepeat` automatically updates the view in response to the changing number of phones returned
+by the `filter` filter. The process is completely transparent to the developer.
+
+## Test
+
+In Step 2, we learned how to write and run unit tests. Unit tests are perfect for testing
+controllers and other components of our application written in JavaScript, but they can't easily
+test DOM manipulation or the wiring of our application. For these, an end-to-end test is a much
+better choice.
+
+The search feature was fully implemented via templates and data-binding, so we'll write our first
+end-to-end test, to verify that the feature works.
+
+__`test/e2e/scenarios.js`:__
+<pre>
+describe('PhoneCat App', function() {
+
+  describe('Phone list view', function() {
+
+    beforeEach(function() {
+      browser().navigateTo('../../app/index.html');
+    });
+
+
+    it('should filter the phone list as user types into the search box', function() {
+      expect(repeater('.phones li').count()).toBe(3);
+
+      input('query').enter('nexus');
+      expect(repeater('.phones li').count()).toBe(1);
+
+      input('query').enter('motorola');
+      expect(repeater('.phones li').count()).toBe(2);
+    });
+  });
+});
+</pre>
+
+Even though the syntax of this test looks very much like our controller unit test written with
+Jasmine, the end-to-end test uses APIs of {@link guide/dev_guide.e2e-testing Angular's end-to-end
+test runner}.
+
+To run the end-to-end test, open one of the following in a new browser tab:
+
+* node.js users: {@link http://localhost:8000/test/e2e/runner.html}
+* users with other http servers:
+`http://localhost:[port-number]/[context-path]/test/e2e/runner.html`
+* casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html}
+
+This test verifies that the search box and the repeater are correctly wired together. Notice how
+easy it is to write end-to-end tests in Angular. Although this example is for a simple test, it
+really is that easy to set up any functional, readable, end-to-end test.
+
+# Experiments
+
+* Display the current value of the `query` model by adding a `{{query}}` binding into the
+`index.html` template, and see how it changes when you type in the input box.
+
+* Let's see how we can get the current value of the `query` model to appear in the HTML page title.
+
+  You might think you could just add the {{query}} to the title tag element as follows:
+
+          <title>Google Phone Gallery: {{query}}</title>
+
+  However, when you reload the page, you won't see the expected result. This is because the "query"
+model lives in the scope defined by the body element:
+
+          <body ng-controller="PhoneListCtrl">
+
+  If you want to bind to the query model from the `<title>` element, you must __move__ the
+`ngController` declaration to the HTML element because it is the common parent of both the body
+and title elements:
+
+          <html ng-app ng-controller="PhoneListCtrl">
+
+  Be sure to *remove* the `ng-controller` declaration from the body element.
+
+  While using double curlies works fine in within the title element, you might have noticed that
+for a split second they are actually displayed to the user while the page is loading. A better
+solution would be to use the {@link api/ng.directive:ngBind
+ngBind} or {@link api/ng.directive:ngBindTemplate
+ngBindTemplate} directives, which are invisible to the user while the page is loading:
+
+          <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
+
+* Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`:
+
+  <pre>
+    it('should display the current filter value within an element with id "status"',
+        function() {
+      expect(element('#status').text()).toMatch(/Current filter: \s*$/);
+
+      input('query').enter('nexus');
+
+      expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);
+
+      //alternative version of the last assertion that tests just the value of the binding
+      using('#status').expect(binding('query')).toBe('nexus');
+    });
+  </pre>
+
+  Refresh the browser tab with the end-to-end test runner to see the test fail. To make the test
+pass, edit the `index.html` template to add a `div` or `p` element with `id` `"status"` and content
+with the `query` binding.
+
+* Add a `pause()` statement into an end-to-end test and rerun it. You'll see the runner pause; this
+gives you the opportunity to explore the state of your application while it is displayed in the
+browser. The app is live! You can change the search query to prove it. Notice how useful this is
+for troubleshooting end-to-end tests.
+
+
+# Summary
+
+We have now added full text search and included a test to verify that search works! Now let's go on
+to {@link step_04 step 4} to learn how to add sorting capability to the phone app.
+
+
+<ul doc-tutorial-nav="3"></ul>
+
@@ -0,0 +1,191 @@
+@ngdoc overview
+@name Tutorial: 4 - Two-way Data Binding
+@description
+
+<ul doc-tutorial-nav="4"></ul>
+
+
+In this step, you will add a feature to let your users control the order of the items in the phone
+list. The dynamic ordering is implemented by creating a new model property, wiring it together with
+the repeater, and letting the data binding magic do the rest of the work.
+
+
+<div doc-tutorial-reset="4"></div>
+
+
+You should see that in addition to the search box, the app displays a drop down menu that allows
+users to control the order in which the phones are listed.
+
+The most important differences between Steps 3 and 4 are listed below. You can see the full diff on
+{@link https://github.com/angular/angular-phonecat/compare/step-3...step-4 GitHub}:
+
+
+## Template
+
+__`app/index.html`:__
+<pre>
+  Search: <input ng-model="query">
+  Sort by:
+  <select ng-model="orderProp">
+    <option value="name">Alphabetical</option>
+    <option value="age">Newest</option>
+  </select>
+
+
+  <ul class="phones">
+    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
+      {{phone.name}}
+      <p>{{phone.snippet}}</p>
+    </li>
+  </ul>
+</pre>
+
+We made the following changes to the `index.html` template:
+
+* First, we added a `<select>` html element named `orderProp`, so that our users can pick from the
+two provided sorting options.
+
+      <img  class="diagram" src="img/tutorial/tutorial_04.png">
+
+* We then chained the `filter` filter with {@link api/ng.filter:orderBy `orderBy`}
+filter to further process the input into the repeater. `orderBy` is a filter that takes an input
+array, copies it and reorders the copy which is then returned.
+
+Angular creates a two way data-binding between the select element and the `orderProp` model.
+`orderProp` is then used as the input for the `orderBy` filter.
+
+As we discussed in the section about data-binding and the repeater in step 3, whenever the model
+changes (for example because a user changes the order with the select drop down menu), Angular's
+data-binding will cause the view to automatically update. No bloated DOM manipulation code is
+necessary!
+
+
+
+## Controller
+
+__`app/js/controller.js`:__
+<pre>
+function PhoneListCtrl($scope) {
+  $scope.phones = [
+    {"name": "Nexus S",
+     "snippet": "Fast just got faster with Nexus S.",
+     "age": 0},
+    {"name": "Motorola XOOM™ with Wi-Fi",
+     "snippet": "The Next, Next Generation tablet.",
+     "age": 1},
+    {"name": "MOTOROLA XOOM™",
+     "snippet": "The Next, Next Generation tablet.",
+     "age": 2}
+  ];
+
+  $scope.orderProp = 'age';
+}
+</pre>
+
+* We modified the `phones` model - the array of phones - and added an `age` property to each phone
+record. This property is used to order phones by age.
+
+* We added a line to the controller that sets the default value of `orderProp` to `age`. If we had
+not set the default value here, the model would stay uninitialized until our user would pick an
+option from the drop down menu.
+
+  This is a good time to talk about two-way data-binding. Notice that when the app is loaded in the
+browser, "Newest" is selected in the drop down menu. This is because we set `orderProp` to `'age'`
+in the controller. So the binding works in the direction from our model to the UI. Now if you
+select "Alphabetically" in the drop down menu, the model will be updated as well and the phones
+will be reordered. That is the data-binding doing its job in the opposite direction — from the UI
+to the model.
+
+
+
+## Test
+
+The changes we made should be verified with both a unit test and an end-to-end test. Let's look at
+the unit test first.
+
+__`test/unit/controllerSpec.js`:__
+<pre>
+describe('PhoneCat controllers', function() {
+
+  describe('PhoneListCtrl', function(){
+    var scope, ctrl;
+
+    beforeEach(function() {
+      scope = {},
+      ctrl = new PhoneListCtrl(scope);
+    });
+
+
+    it('should create "phones" model with 3 phones', function() {
+      expect(scope.phones.length).toBe(3);
+    });
+
+
+    it('should set the default value of orderProp model', function() {
+      expect(scope.orderProp).toBe('age');
+    });
+  });
+});
+</pre>
+
+
+The unit test now verifies that the default ordering property is set.
+
+We used Jasmine's API to extract the controller construction into a `beforeEach` block, which is
+shared by all tests in the parent `describe` block.
+
+To run the unit tests, once again execute the `./scripts/test.sh` script and you should see the
+following output.
+
+        Chrome: Runner reset.
+        ..
+        Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
+          Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
+
+
+Let's turn our attention to the end-to-end test.
+
+__`test/e2e/scenarios.js`:__
+<pre>
+...
+    it('should be possible to control phone order via the drop down select box',
+        function() {
+      //let's narrow the dataset to make the test assertions shorter
+      input('query').enter('tablet');
+
+      expect(repeater('.phones li', 'Phone List').column('phone.name')).
+          toEqual(["Motorola XOOM\u2122 with Wi-Fi",
+                   "MOTOROLA XOOM\u2122"]);
+
+      select('orderProp').option('Alphabetical');
+
+      expect(repeater('.phones li', 'Phone List').column('phone.name')).
+          toEqual(["MOTOROLA XOOM\u2122",
+                   "Motorola XOOM\u2122 with Wi-Fi"]);
+    });
+...
+</pre>
+
+The end-to-end test verifies that the ordering mechanism of the select box is working correctly.
+
+You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
+can see them running on {@link
+http://angular.github.com/angular-phonecat/step-4/test/e2e/runner.html
+Angular's server}.
+
+# Experiments
+
+* In the `PhoneListCtrl` controller, remove the statement that sets the `orderProp` value and
+you'll see that Angular will temporarily add a new "unknown" option to the drop-down list and the
+ordering will default to unordered/natural order.
+
+* Add an `{{orderProp}}` binding into the `index.html` template to display its current value as
+text.
+
+# Summary
+
+Now that you have added list sorting and tested the app, go to {@link step_05 step 5} to learn
+about Angular services and how Angular uses dependency injection.
+
+
+<ul doc-tutorial-nav="4"></ul>
@@ -0,0 +1,238 @@
+@ngdoc overview
+@name Tutorial: 5 - XHRs & Dependency Injection
+@description
+
+<ul doc-tutorial-nav="5"></ul>
+
+
+Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
+from our server using one of angular's built-in {@link api/ng services} called {@link
+api/ng.$http $http}. We will use angular's {@link guide/di dependency
+injection (DI)} to provide the service to the `PhoneListCtrl` controller.
+
+
+<div doc-tutorial-reset="5"></div>
+
+
+You should now see a list of 20 phones.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-4...step-5
+GitHub}:
+
+## Data
+
+The `app/phones/phone.json` file in your project is a dataset that contains a larger list of phones
+stored in the JSON format.
+
+Following is a sample of the file:
+<pre>
+[
+ {
+  "age": 13,
+  "id": "motorola-defy-with-motoblur",
+  "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
+  "snippet": "Are you ready for everything life throws your way?"
+  ...
+ },
+...
+]
+</pre>
+
+
+## Controller
+
+We'll use angular's {@link api/ng.$http $http} service in our controller to make an HTTP
+request to your web server to fetch the data in the `app/phones/phones.json` file. `$http` is just
+one of several built-in {@link api/ng angular services} that handle common operations
+in web apps. Angular injects these services for you where you need them.
+
+Services are managed by angular's {@link guide/di DI subsystem}. Dependency injection
+helps to make your web apps both well-structured (e.g., separate components for presentation, data,
+and control) and loosely coupled (dependencies between components are not resolved by the
+components themselves, but by the DI subsystem).
+
+__`app/js/controllers.js:`__
+<pre>
+function PhoneListCtrl($scope, $http) {
+  $http.get('phones/phones.json').success(function(data) {
+    $scope.phones = data;
+  });
+
+  $scope.orderProp = 'age';
+}
+
+//PhoneListCtrl.$inject = ['$scope', '$http'];
+</pre>
+
+`$http` makes an HTTP GET request to our web server, asking for `phone/phones.json` (the url is
+relative to our `index.html` file). The server responds by providing the data in the json file.
+(The response might just as well have been dynamically generated by a backend server. To the
+browser and our app they both look the same. For the sake of simplicity we used a json file in this
+tutorial.)
+
+The `$http` service returns a {@link api/ng.$q promise object} with a `success`
+method. We call this method to handle the asynchronous response and assign the phone data to the
+scope controlled by this controller, as a model called `phones`. Notice that angular detected the
+json response and parsed it for us!
+
+To use a service in angular, you simply declare the names of the dependencies you need as arguments
+to the controller's constructor function, as follows:
+
+    function PhoneListCtrl($scope, $http) {...}
+
+Angular's dependency injector provides services to your controller when the controller is being
+constructed. The dependency injector also takes care of creating any transitive dependencies the
+service may have (services often depend upon other services).
+
+Note that the names of arguments are significant, because the injector uses these to look up the
+dependencies.
+
+
+<img  class="diagram" src="img/tutorial/xhr_service_final.png">
+
+
+### '$' Prefix Naming Convention
+
+You can create your own services, and in fact we will do exactly that in step 11. As a naming
+convention, angular's built-in services, Scope methods and a few other angular APIs have a '$'
+prefix in front of the name.  Don't use a '$' prefix when naming your services and models, in order
+to avoid any possible naming collisions.
+
+### A Note on Minification
+
+Since angular infers the controller's dependencies from the names of arguments to the controller's
+constructor function, if you were to {@link http://en.wikipedia.org/wiki/Minification_(programming)
+minify} the JavaScript code for `PhoneListCtrl` controller, all of its function arguments would be
+minified as well, and the dependency injector would not being able to identify services correctly.
+
+To overcome issues caused by minification, just assign an array with service identifier strings
+into the `$inject` property of the controller function, just like the last line in the snippet
+(commented out) suggests:
+
+    PhoneListCtrl.$inject = ['$scope', '$http'];
+
+There is also one more way to specify this dependency list and avoid minification issues — using the
+bracket notation which wraps the function to be injected into an array of strings (representing the
+dependency names) followed by the function to be injected:
+
+    var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
+
+Both of these methods work with any function that can be injected by Angular, so it's up to your
+project's style guide to decide which one you use.
+
+
+## Test
+
+__`test/unit/controllersSpec.js`:__
+
+Because we started using dependency injection and our controller has dependencies, constructing the
+controller in our tests is a bit more complicated. We could use the `new` operator and provide the
+constructor with some kind of fake `$http` implementation. However, the recommended (and easier) way
+is to create a controller in the test environment in the same way that angular does it in the
+production code behind the scenes, as follows:
+
+<pre>
+describe('PhoneCat controllers', function() {
+
+  describe('PhoneListCtrl', function(){
+    var scope, ctrl, $httpBackend;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json').
+          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneListCtrl, {$scope: scope});
+    }));
+</pre>
+
+Note: Because we loaded Jasmine and `angular-mocks.js` in our test environment, we got two helper
+methods {@link api/angular.mock.module module} and {@link api/angular.mock.inject inject} that we'll
+use to access and configure the injector.
+
+We created the controller in the test environment, as follows:
+
+* We used the `inject` helper method to inject instances of
+{@link api/ng.$rootScope $rootScope},
+{@link api/ng.$controller $controller} and
+{@link api/ng.$httpBackend $httpBackend} services into the Jasmine's `beforeEach`
+function. These instances come from an injector which is recreated from scratch for every single
+test. This guarantees that each test starts from a well known starting point and each test is
+isolated from the work done in other tests.
+
+* We created a new scope for our controller by calling `$rootScope.$new()`
+
+* We called `scope.$new(PhoneListCtrl)` to get Angular to create the child scope associated with
+the `PhoneListCtrl` controller.
+
+Because our code now uses the `$http` service to fetch the phone list data in our controller, before
+we create the `PhoneListCtrl` child scope, we need to tell the testing harness to expect an
+incoming request from the controller. To do this we:
+
+* Request `$httpBackend` service to be injected into our `beforeEach` function. This is a mock
+mock version of the service that in production environment facilitates all XHR and JSONP requests.
+The mock version of this service allows you to write tests without having to deal with
+native APIs and the global state associated with them — both of which make testing a nightmare.
+
+* Use the `$httpBackend.expectGET` method to train the `$httpBackend` service to expect an incoming
+HTTP request and tell it what to respond with. Note that the responses are not returned until we call
+the `$httpBackend.flush` method.
+
+Now, we will make assertions to verify that the `phones` model doesn't exist on the scope, before
+the response is received:
+
+<pre>
+    it('should create "phones" model with 2 phones fetched from xhr', function() {
+      expect(scope.phones).toBeUndefined();
+      $httpBackend.flush();
+
+      expect(scope.phones).toEqual([{name: 'Nexus S'},
+                                   {name: 'Motorola DROID'}]);
+    });
+</pre>
+
+* We flush the request queue in the browser by calling `$httpBackend.flush()`. This causes the
+promise returned by the `$http` service to be resolved with the trained response.
+
+* We make the assertions, verifying that the phone model now exists on the scope.
+
+Finally, we verify that the default value of `orderProp` is set correctly:
+
+<pre>
+    it('should set the default value of orderProp model', function() {
+      expect(scope.orderProp).toBe('age');
+    });
+  });
+});
+</pre>
+
+To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
+output.
+
+       Chrome: Runner reset.
+       ..
+       Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
+         Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)
+
+
+# Experiments
+
+* At the bottom of `index.html`, add a `{{phones | json}}` binding to see the list of phones
+  displayed in json format.
+
+* In the `PhoneListCtrl` controller, pre-process the http response by limiting the number of phones
+to the first 5 in the list. Use the following code in the $http callback:
+
+         $scope.phones = data.splice(0, 5);
+
+
+# Summary
+
+Now that you have learned how easy it is to use angular services (thanks to Angular's dependency
+injection), go to {@link step_06 step 6}, where you will add some
+thumbnail images of phones and some links.
+
+
+<ul doc-tutorial-nav="5"></ul>
@@ -0,0 +1,106 @@
+@ngdoc overview
+@name Tutorial: 6 - Templating Links & Images
+@description
+
+<ul doc-tutorial-nav="6"></ul>
+
+
+In this step, you will add thumbnail images for the phones in the phone list, and links that, for
+now, will go nowhere. In subsequent steps you will use the links to display additional information
+about the phones in the catalog.
+
+
+<div doc-tutorial-reset="6"></div>
+
+
+You should now see links and images of the phones in the list.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-5...step-6
+GitHub}:
+
+
+## Data
+
+Note that the `phones.json` file contains unique ids and image urls for each of the phones. The
+urls point to the `app/img/phones/` directory.
+
+__`app/phones/phones.json`__ (sample snippet):
+<pre>
+ [
+  {
+   ...
+   "id": "motorola-defy-with-motoblur",
+   "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
+   "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
+   ...
+  },
+ ...
+ ]
+</pre>
+
+
+## Template
+
+__`app/index.html`:__
+<pre>
+...
+        <ul class="phones">
+          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
+            <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
+            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
+            <p>{{phone.snippet}}</p>
+          </li>
+        </ul>
+...
+</pre>
+
+To dynamically generate links that will in the future lead to phone detail pages, we used the
+now-familiar double-curly brace binding in the `href` attribute values. In step 2, we added the
+`{{phone.name}}` binding as the element content. In this step the `{{phone.id}}` binding is used in
+the element attribute.
+
+We also added phone images next to each record using an image tag with the {@link
+api/ng.directive:ngSrc ngSrc} directive. That directive prevents the
+browser from treating the angular `{{ expression }}` markup literally, and initiating a request to
+invalid url `http://localhost:8000/app/{{phone.imageUrl}}`, which it would have done if we had only
+specified an attribute binding in a regular `src` attribute (`<img  class="diagram" src="{{phone.imageUrl}}">`).
+Using `ngSrc` (`ng-src`) prevents the browser from making an http request to an invalid location.
+
+
+## Test
+
+__`test/e2e/scenarios.js`__:
+<pre>
+...
+    it('should render phone specific links', function() {
+      input('query').enter('nexus');
+      element('.phones li a').click();
+      expect(browser().location().url()).toBe('/phones/nexus-s');
+    });
+...
+</pre>
+
+We added a new end-to-end test to verify that the app is generating correct links to the phone
+views that we will implement in the upcoming steps.
+
+You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
+can see them running on {@link
+http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
+angular's server}.
+
+# Experiments
+
+* Replace the `ng-src` directive with a plain old `src` attribute. Using tools such as Firebug,
+or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed
+making an extraneous request to `/app/%7B%7Bphone.imageUrl%7D%7D` (or
+`/app/{{phone.imageUrl}}`).
+
+
+# Summary
+
+Now that you have added phone images and links, go to {@link step_07 step 7} to learn about angular
+layout templates and how angular makes it easy to create applications that have multiple views.
+
+
+<ul doc-tutorial-nav="6"></ul>
@@ -0,0 +1,261 @@
+@ngdoc overview
+@name Tutorial: 7 - Routing & Multiple Views
+@description
+
+<ul doc-tutorial-nav="7"></ul>
+
+
+In this step, you will learn how to create a layout template and how to build an app that has
+multiple views by adding routing.
+
+
+<div doc-tutorial-reset="7"></div>
+
+
+Note that when you now navigate to `app/index.html`, you are redirected to `app/index.html#/phones`
+and the same phone list appears in the browser. When you click on a phone link the stub of a phone
+detail page is displayed.
+
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-6...step-7
+GitHub}:
+
+
+## Multiple Views, Routing and Layout Template
+
+Our app is slowly growing and becoming more complex. Before step 7, the app provided our users with
+a single view (the list of all phones), and all of the template code was located in the
+`index.html` file. The next step in building the app is to add a view that will show detailed
+information about each of the devices in our list.
+
+To add the detailed view, we could expand the `index.html` file to contain template code for both
+views, but that would get messy very quickly. Instead, we are going to turn the `index.html`
+template into what we call a "layout template". This is a template that is common for all views in
+our application. Other "partial templates" are then included into this layout template depending on
+the current "route" — the view that is currently displayed to the user.
+
+Application routes in angular are declared via the
+{@link api/ng.$routeProvider $routeProvider}, which is the provider of the
+{@link api/ng.$route $route service}. This service makes it easy to wire together
+controllers, view templates, and the current
+URL location in the browser. Using this feature we can implement {@link
+http://en.wikipedia.org/wiki/Deep_linking deep linking}, which lets us utilize the browser's
+history (back and forward navigation) and bookmarks.
+
+
+### A Note About DI, Injector and Providers
+
+As you noticed the dependency injection is the core feature of AngularJS, so it's important for you
+to understand a thing or two about how it works.
+
+When the application bootstraps, Angular creates an injector that will be used for all DI stuff in
+this app. The injector itself doesn't know anything about what `$http` or `$route` services do, in
+fact it doesn't even know about the existence of these services unless it is configured with proper
+module definitions. The sole responsibilities of the injector are to load specified module
+definition(s), register all service providers defined in these modules and when asked inject
+a specified function with dependencies (services) that it lazily instantiates via their providers.
+
+Providers are objects that provide (create) instances of services and expose configuration apis
+that can be used to control the creation and runtime behavior of a service. In case of the `$route`
+service, the `$routeProvider` exposes apis that allow you to define routes for your application.
+
+Angular modules solve the problem of removing global state from the application and provide a way
+of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try to
+solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and
+both module systems can live side by side and fulfil their goals.
+
+## The App Module
+
+__`app/js/app.js`:__
+<pre>
+angular.module('phonecat', []).
+  config(['$routeProvider', function($routeProvider) {
+  $routeProvider.
+      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
+      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
+      otherwise({redirectTo: '/phones'});
+}]);
+</pre>
+
+In order to configure our application with routes, we need to create a module for our application.
+We call this module `phonecatApp` and using the `config` api we request the `$routeProvider` to be
+injected into our config function and use `$routeProvider.when` api to define our routes.
+
+Note that during the injector configuration phase, the providers can be injected as well, but they
+will not be available for injection once the injector is created and starts creating service
+instances.
+
+Our application routes were defined as follows:
+
+* The phone list view will be shown when the URL hash fragment is `/phones`. To construct this
+view, Angular will use the `phone-list.html` template and the `PhoneListCtrl` controller.
+
+* The phone details view will be shown when the URL hash fragment matches '/phone/:phoneId', where
+`:phoneId` is a variable part of the URL. To construct the phone details view, angular will use the
+`phone-detail.html` template and the `PhoneDetailCtrl` controller.
+
+We reused the `PhoneListCtrl` controller that we constructed in previous steps and we added a new,
+empty `PhoneDetailCtrl` controller to the `app/js/controllers.js` file for the phone details view.
+
+The statement `$route.otherwise({redirectTo: '/phones'})` triggers a redirection to `/phones` when
+the browser address doesn't match either of our routes.
+
+Note the use of the `:phoneId` parameter in the second route declaration. The `$route` service uses
+the route declaration — `'/phones/:phoneId'` — as a template that is matched against the current
+URL. All variables defined with the `:` notation are extracted into the
+{@link api/ng.$routeParams $routeParams} object.
+
+
+In order for our application to bootstrap with our newly created module we'll also need to specify
+the module name as the value of the {@link api/ng.directive:ngApp ngApp}
+directive:
+
+__`app/index.html`:__
+<pre>
+<!doctype html>
+<html ng-app="phonecat">
+...
+</pre>
+
+
+## Controllers
+
+__`app/js/controller.js`:__
+<pre>
+...
+function PhoneDetailCtrl($scope, $routeParams) {
+  $scope.phoneId = $routeParams.phoneId;
+}
+
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];
+</pre>
+
+
+## Template
+
+The `$route` service is usually used in conjunction with the {@link api/ng.directive:ngView
+ngView} directive. The role of the `ngView` directive is to include the view template for the current
+route into the layout template, which makes it a perfect fit for our `index.html` template.
+
+__`app/index.html`:__
+<pre>
+<html ng-app="phonecat">
+<head>
+...
+  <script src="lib/angular/angular.js"></script>
+  <script src="js/app.js"></script>
+</head>
+<body>
+
+  <div ng-view></div>
+
+</body>
+</html>
+</pre>
+
+Note that we removed most of the code in the `index.html` template and replaced it with a single
+line containing a div with `ng-view` attribute. The code that we removed was placed into the
+`phone-list.html` template:
+
+__`app/partials/phone-list.html`:__
+<pre>
+<div class="container-fluid">
+  <div class="row-fluid">
+    <div class="span2">
+      <!--Sidebar content-->
+
+      Search: <input ng-model="query">
+      Sort by:
+      <select ng-model="orderProp">
+        <option value="name">Alphabetical</option>
+        <option value="age">Newest</option>
+      </select>
+
+    </div>
+    <div class="span10">
+      <!--Body content-->
+
+      <ul class="phones">
+        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
+          <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
+          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
+          <p>{{phone.snippet}}</p>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</div>
+</pre>
+
+<div style="display:none">
+TODO!
+<img  class="diagram" src="img/tutorial/tutorial_07_final.png">
+</div>
+
+We also added a placeholder template for the phone details view:
+
+__`app/partials/phone-detail.html`:__
+<pre>
+TBD: detail view for {{phoneId}}
+</pre>
+
+Note how we are using `phoneId` model defined in the `PhoneDetailCtrl` controller.
+
+
+## Test
+
+To automatically verify that everything is wired properly, we wrote end-to-end tests that navigate
+to various URLs and verify that the correct view was rendered.
+
+<pre>
+...
+  it('should redirect index.html to index.html#/phones', function() {
+    browser().navigateTo('../../app/index.html');
+    expect(browser().location().url()).toBe('/phones');
+  });
+...
+
+ describe('Phone detail view', function() {
+
+    beforeEach(function() {
+      browser().navigateTo('../../app/index.html#/phones/nexus-s');
+    });
+
+
+    it('should display placeholder page with phoneId', function() {
+      expect(binding('phoneId')).toBe('nexus-s');
+    });
+ });
+</pre>
+
+
+You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
+can see them running on {@link
+http://angular.github.com/angular-phonecat/step-7/test/e2e/runner.html
+angular's server}.
+
+
+# Experiments
+
+* Try to add an `{{orderProp}}` binding to `index.html`, and you'll see that nothing happens even
+when you are in the phone list view. This is because the `orderProp` model is visible only in the
+scope managed by `PhoneListCtrl`, which is associated with the `<div ng-view>` element. If you add
+the same binding into the `phone-list.html` template, the binding will work as expected.
+
+<div style="display: none">
+* In `PhoneCatCtrl`, create a new model called "`hero`" with `this.hero = 'Zoro'`. In
+`PhoneListCtrl` let's shadow it with `this.hero = 'Batman'`, and in `PhoneDetailCtrl` we'll use
+`this.hero = "Captain Proton"`. Then add the `<p>hero = {{hero}}</p>` to all three of our templates
+(`index.html`, `phone-list.html`, and `phone-detail.html`). Open the app and you'll see scope
+inheritance and model property shadowing do some wonders.
+</div>
+
+# Summary
+
+With the routing set up and the phone list view implemented, we're ready to go to {@link step_08
+step 8} to implement the phone details view.
+
+
+<ul doc-tutorial-nav="7"></ul>
@@ -0,0 +1,197 @@
+@ngdoc overview
+@name Tutorial: 8 - More Templating
+@description
+
+<ul doc-tutorial-nav="8"></ul>
+
+
+In this step, you will implement the phone details view, which is displayed when a user clicks on a
+phone in the phone list.
+
+
+<div doc-tutorial-reset="8"></div>
+
+
+Now when you click on a phone on the list, the phone details page with phone-specific information
+is displayed.
+
+To implement the phone details view we will use {@link api/ng.$http $http} to fetch
+our data, and we'll flesh out the `phone-details.html` view template.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-7...step-8
+GitHub}:
+
+## Data
+
+In addition to `phones.json`, the `app/phones/` directory also contains one json file for each
+phone:
+
+__`app/phones/nexus-s.json`:__ (sample snippet)
+<pre>
+{
+  "additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
+  "android": {
+      "os": "Android 2.3",
+      "ui": "Android"
+  },
+  ...
+  "images": [
+      "img/phones/nexus-s.0.jpg",
+      "img/phones/nexus-s.1.jpg",
+      "img/phones/nexus-s.2.jpg",
+      "img/phones/nexus-s.3.jpg"
+  ],
+  "storage": {
+      "flash": "16384MB",
+      "ram": "512MB"
+  }
+}
+</pre>
+
+
+Each of these files describes various properties of the phone using the same data structure. We'll
+show this data in the phone detail view.
+
+
+## Controller
+
+We'll expand the `PhoneDetailCtrl` by using the `$http` service to fetch the json files. This works
+the same way as the phone list controller.
+
+__`app/js/controller.js`:__
+<pre>
+function PhoneDetailCtrl($scope, $routeParams, $http) {
+  $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
+    $scope.phone = data;
+  });
+}
+
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
+</pre>
+
+To construct the URL for the HTTP request, we use `$routeParams.phoneId` extracted from the current
+route by the `$route` service.
+
+
+## Template
+
+The TBD placeholder line has been replaced with lists and bindings that comprise the phone details.
+Note where we use the angular `{{expression}}` markup and `ngRepeater`s to project phone data from
+our model into the view.
+
+
+__`app/partials/phone-details.html`:__
+<pre>
+<img ng-src="{{phone.images[0]}}" class="phone">
+
+<h1>{{phone.name}}</h1>
+
+<p>{{phone.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in phone.images">
+    <img ng-src="{{img}}">
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+    ...
+  </li>
+    <span>Additional Features</span>
+    <dd>{{phone.additionalFeatures}}</dd>
+  </li>
+</ul>
+</pre>
+
+<div style="display: none">
+TODO!
+<img  class="diagram" src="img/tutorial/tutorial_08-09_final.png">
+</div>
+
+## Test
+
+We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in
+step 5.
+
+__`test/unit/controllerSpec.js`:__
+<pre>
+...
+  describe('PhoneDetailCtrl', function(){
+    var scope, $httpBackend, ctrl;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
+
+      $routeParams.phoneId = 'xyz';
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
+    }));
+
+
+    it('should fetch phone detail', function() {
+      expect(scope.phone).toBeUndefined();
+      $httpBackend.flush();
+
+      expect(scope.phone).toEqual({name:'phone xyz'});
+    });
+  });
+...
+</pre>
+
+To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
+output.
+
+    Chrome: Runner reset.
+    ...
+    Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
+      Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
+
+
+We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that the
+heading on the page is "Nexus S".
+
+__`test/e2e/scenarios.js`:__
+<pre>
+...
+  describe('Phone detail view', function() {
+
+    beforeEach(function() {
+      browser().navigateTo('../../app/index.html#/phones/nexus-s');
+    });
+
+
+    it('should display nexus-s page', function() {
+      expect(binding('phone.name')).toBe('Nexus S');
+    });
+  });
+...
+</pre>
+
+
+You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
+can see them running on {@link
+http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
+angular's server}.
+
+# Experiments
+
+* Using the {@link guide/dev_guide.e2e-testing Angular's end-to-end test runner API}, write a test
+that verifies that we display 4 thumbnail images on the Nexus S details page.
+
+
+# Summary
+
+Now that the phone details view is in place, proceed to {@link step_09 step 9} to learn how to
+write your own custom display filter.
+
+
+<ul doc-tutorial-nav="8"></ul>
@@ -0,0 +1,143 @@
+@ngdoc overview
+@name Tutorial: 9 - Filters
+@description
+
+<ul doc-tutorial-nav="9"></ul>
+
+
+In this step you will learn how to create your own custom display filter.
+
+
+<div doc-tutorial-reset="9"></div>
+
+
+Navigate to one of the detail pages.
+
+In the previous step, the details page displayed either "true" or "false" to indicate whether
+certain phone features were present or not. We have used a custom filter to convert those text
+strings into glyphs: ✓ for "true", and ✘ for "false". Let's see, what the filter code looks like.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-8...step-9
+GitHub}:
+
+
+## Custom Filter
+
+In order to create a new filter, you are going to create a `phonecatFilters` module and register
+your custom filter with this module:
+
+__`app/js/filters.js`:__
+<pre>
+angular.module('phonecatFilters', []).filter('checkmark', function() {
+  return function(input) {
+    return input ? '\u2713' : '\u2718';
+  };
+});
+</pre>
+
+The name of our filter is "checkmark". The `input` evaluates to either `true` or `false`, and we
+return one of two unicode characters we have chosen to represent true or false (`\u2713` and
+`\u2718`).
+
+Now that our filter is ready, we need to register the `phonecatFilters` module as a dependency for
+our main `phonecat` module.
+
+__`app/js/app.js`:__
+<pre>
+...
+angular.module('phonecat', ['phonecatFilters']).
+...
+</pre>
+
+
+## Template
+
+Since the filter code lives in the `app/js/filters.js` file, we need to include this file in our
+layout template.
+
+__`app/index.html`:__
+<pre>
+...
+ <script src="js/controllers.js"></script>
+ <script src="js/filters.js"></script>
+...
+</pre>
+
+The syntax for using filters in angular templates is as follows:
+
+    {{ expression | filter }}
+
+Let's employ the filter in the phone details template:
+
+
+
+__`app/partials/phone-detail.html`:__
+<pre>
+...
+    <dl>
+      <dt>Infrared</dt>
+      <dd>{{phone.connectivity.infrared | checkmark}}</dd>
+      <dt>GPS</dt>
+      <dd>{{phone.connectivity.gps | checkmark}}</dd>
+    </dl>
+...
+</pre>
+
+
+## Test
+
+Filters, like any other component, should be tested and these tests are very easy to write.
+
+__`test/unit/filtersSpec.js`:__
+<pre>
+describe('filter', function() {
+
+  beforeEach(module('phonecatFilters'));
+
+
+  describe('checkmark', function() {
+
+    it('should convert boolean values to unicode checkmark or cross',
+        inject(function(checkmarkFilter) {
+      expect(checkmarkFilter(true)).toBe('\u2713');
+      expect(checkmarkFilter(false)).toBe('\u2718');
+    }));
+  });
+});
+</pre>
+
+Note that you need to configure our test injector with the `phonecatFilters` module before any of
+our filter tests execute.
+
+To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
+output.
+
+        Chrome: Runner reset.
+        ....
+        Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
+          Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
+
+
+# Experiments
+
+* Let's experiment with some of the {@link api/ng.$filter built-in angular filters} and add the
+following bindings to `index.html`:
+  * `{{ "lower cap string" | uppercase }}`
+  * `{{ {foo: "bar", baz: 23} | json }}`
+  * `{{ 1304375948024 | date }}`
+  * `{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}`
+
+*  We can also create a model with an input element, and combine it with a filtered binding. Add
+the following to index.html:
+
+        <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
+
+
+# Summary
+
+Now that you have learned how to write and test a custom filter, go to {@link step_10 step 10} to
+learn how we can use angular to enhance the phone details page further.
+
+
+<ul doc-tutorial-nav="9"></ul>
@@ -0,0 +1,141 @@
+@ngdoc overview
+@name Tutorial: 10 - Event Handlers
+@description
+
+<ul doc-tutorial-nav="10"></ul>
+
+
+In this step, you will add a clickable phone image swapper to the phone details page.
+
+
+<div doc-tutorial-reset="10"></div>
+
+
+The phone details view displays one large image of the current phone and several smaller thumbnail
+images. It would be great if we could replace the large image with any of the thumbnails just by
+clicking on the desired thumbnail image. Let's have a look at how we can do this with angular.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-9...step-10
+GitHub}:
+
+
+## Controller
+
+__`app/js/controllers.js`:__
+<pre>
+...
+function PhoneDetailCtrl($scope, $routeParams, $http) {
+  $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
+    $scope.phone = data;
+    $scope.mainImageUrl = data.images[0];
+  });
+
+  $scope.setImage = function(imageUrl) {
+    $scope.mainImageUrl = imageUrl;
+  }
+}
+
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
+</pre>
+
+In the `PhoneDetailCtrl` controller, we created the `mainImageUrl` model property and set its
+default value to the first phone image url.
+
+We also created a `setImage` event handler function that will change the value of `mainImageUrl`.
+
+
+## Template
+
+__`app/partials/phone-detail.html`:__
+<pre>
+<img ng-src="{{mainImageUrl}}" class="phone">
+
+...
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in phone.images">
+    <img ng-src="{{img}}" ng-click="setImage(img)">
+  </li>
+</ul>
+...
+</pre>
+
+We bound the `ngSrc` directive of the large image to the `mainImageUrl` property.
+
+We also registered an {@link api/ng.directive:ngClick `ngClick`}
+handler with thumbnail images. When a user clicks on one of the thumbnail images, the handler will
+use the `setImage` event handler function to change the value of the `mainImageUrl` property to the
+url of the thumbnail image.
+
+<div style="display: none">
+TODO!
+<img  class="diagram" src="img/tutorial/tutorial_10-11_final.png">
+</div>
+
+## Test
+
+To verify this new feature, we added two end-to-end tests. One verifies that the main image is set
+to the first phone image by default. The second test clicks on several thumbnail images and
+verifies that the main image changed appropriately.
+
+__`test/e2e/scenarios.js`:__
+<pre>
+...
+  describe('Phone detail view', function() {
+
+...
+
+    it('should display the first phone image as the main phone image', function() {
+      expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
+    });
+
+
+    it('should swap main image if a thumbnail image is clicked on', function() {
+      element('.phone-thumbs li:nth-child(3) img').click();
+      expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg');
+
+      element('.phone-thumbs li:nth-child(1) img').click();
+      expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
+    });
+  });
+});
+</pre>
+
+You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
+can see them running on {@link
+http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
+angular's server}.
+
+# Experiments
+
+* Let's add a new controller method to `PhoneDetailCtrl`:
+
+          $scope.hello = function(name) {
+              alert('Hello ' + (name || 'world') + '!');
+          }
+
+  and add:
+
+          <button ng-click="hello('Elmo')">Hello</button>
+
+  to the `phone-details.html` template.
+
+<div style="display: none">
+TODO!
+  The controller methods are inherited between controllers/scopes, so you can use the same snippet
+in the `phone-list.html` template as well.
+
+* Move the `hello` method from `PhoneCatCtrl` to `PhoneListCtrl` and you'll see that the button
+declared in `index.html` will stop working, while the one declared in the `phone-list.html`
+template remains operational.
+</div>
+
+
+# Summary
+
+With the phone image swapper in place, we're ready for {@link step_11 step 11} (the last step!) to
+learn an even better way to fetch data.
+
+
+<ul doc-tutorial-nav="10"></ul>
@@ -0,0 +1,223 @@
+@ngdoc overview
+@name Tutorial: 11 - REST and Custom Services
+@description
+
+<ul doc-tutorial-nav="11"></ul>
+
+
+In this step, you will improve the way our app fetches data.
+
+
+<div doc-tutorial-reset="11"></div>
+
+
+The last improvement we will make to our app is to define a custom service that represents a {@link
+http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client. Using this client we
+can make xhr requests for data in an easier way, without having to deal with the lower-level {@link
+api/ng.$http $http} API, HTTP methods and URLs.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-10...step-11
+GitHub}:
+
+
+## Template
+
+The custom service is defined in `app/js/services.js` so we need to include this file in our layout
+template. Additionally, we also need to load the `angular-resource.js` file, which contains the
+`ngResource` module and in it the `$resource` service, that we'll soon use:
+
+__`app/index.html`.__
+<pre>
+...
+  <script src="js/services.js"></script>
+  <script src="lib/angular/angular-resource.js"></script>
+...
+</pre>
+
+## Service
+
+__`app/js/services.js`.__
+<pre>
+angular.module('phonecatServices', ['ngResource']).
+    factory('Phone', function($resource){
+  return $resource('phones/:phoneId.json', {}, {
+    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
+  });
+});
+</pre>
+
+We used the module API to register a custom service using a factory function. We passed in the name
+of the service - 'Phone' - and the factory function. The factory function is similar to a
+controller's constructor in that both can declare dependencies via function arguments. The Phone
+service declared a dependency on the `$resource` service.
+
+The {@link api/ngResource.$resource `$resource`} service makes it easy to create a
+{@link http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client with just a few
+lines of code. This client can then be used in our application, instead of the lower-level {@link
+api/ng.$http $http} service.
+
+
+## Controller
+
+We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
+lower-level {@link api/ng.$http $http} service, replacing it with a new service called
+`Phone`. Angular's {@link api/ngResource.$resource `$resource`} service is easier to
+use than `$http for interacting with data sources exposed as RESTful resources. It is also easier
+now to understand what the code in our controllers is doing.
+
+__`app/js/controllers.js`.__
+<pre>
+...
+
+function PhoneListCtrl($scope, Phone) {
+  $scope.phones = Phone.query();
+  $scope.orderProp = 'age';
+}
+
+//PhoneListCtrl.$inject = ['$scope', 'Phone'];
+
+
+
+function PhoneDetailCtrl($scope, $routeParams, Phone) {
+  $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
+    $scope.mainImageUrl = phone.images[0];
+  });
+
+  $scope.setImage = function(imageUrl) {
+    $scope.mainImageUrl = imageUrl;
+  }
+}
+
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone'];
+</pre>
+
+Notice how in `PhoneListCtrl` we replaced:
+
+    $http.get('phones/phones.json').success(function(data) {
+      $scope.phones = data;
+    });
+
+with:
+
+    $scope.phones = Phone.query();
+
+This is a simple statement that we want to query for all phones.
+
+An important thing to notice in the code above is that we don't pass any callback functions when
+invoking methods of our Phone service. Although it looks as if the result were returned
+synchronously, that is not the case at all. What is returned synchronously is a "future" — an
+object, which will be filled with data when the xhr response returns. Because of the data-binding
+in angular, we can use this future and bind it to our template. Then, when the data arrives, the
+view will automatically update.
+
+Sometimes, relying on the future object and data-binding alone is not sufficient to do everything
+we require, so in these cases, we can add a callback to process the server response. The
+`PhoneDetailCtrl` controller illustrates this by setting the `mainImageUrl` in a callback.
+
+
+## Test
+
+We have modified our unit tests to verify that our new service is issuing HTTP requests and
+processing them as expected. The tests also check that our controllers are interacting with the
+service correctly.
+
+The {@link api/ngResource.$resource $resource} service augments the response object
+with methods for updating and deleting the resource. If we were to use the standard `toEqual`
+matcher, our tests would fail because the test values would not match the responses exactly. To
+solve the problem, we use a newly-defined `toEqualData` {@link
+http://pivotal.github.com/jasmine/jsdoc/symbols/jasmine.Matchers.html Jasmine matcher}. When the
+`toEqualData` matcher compares two objects, it takes only object properties into account and
+ignores methods.
+
+
+__`test/unit/controllersSpec.js`:__
+<pre>
+describe('PhoneCat controllers', function() {
+
+  beforeEach(function(){
+    this.addMatchers({
+      toEqualData: function(expected) {
+        return angular.equals(this.actual, expected);
+      }
+    });
+  });
+
+
+  beforeEach(module('phonecatServices'));
+
+
+  describe('PhoneListCtrl', function(){
+    var scope, ctrl, $httpBackend;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json').
+          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneListCtrl, {$scope: scope});
+    }));
+
+
+    it('should create "phones" model with 2 phones fetched from xhr', function() {
+      expect(scope.phones).toEqual([]);
+      $httpBackend.flush();
+
+      expect(scope.phones).toEqualData(
+          [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+    });
+
+
+    it('should set the default value of orderProp model', function() {
+      expect(scope.orderProp).toBe('age');
+    });
+  });
+
+
+  describe('PhoneDetailCtrl', function(){
+    var scope, $httpBackend, ctrl,
+        xyzPhoneData = function() {
+          return {
+            name: 'phone xyz',
+                images: ['image/url1.png', 'image/url2.png']
+          }
+        };
+
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
+
+      $routeParams.phoneId = 'xyz';
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
+    }));
+
+
+    it('should fetch phone detail', function() {
+      expect(scope.phone).toEqualData({});
+      $httpBackend.flush();
+
+      expect(scope.phone).toEqualData(xyzPhoneData());
+    });
+  });
+});
+</pre>
+
+To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
+output.
+
+    Chrome: Runner reset.
+    ....
+    Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
+      Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
+
+
+# Summary
+
+There you have it!  We have created a web app in a relatively short amount of time. In the {@link
+the_end closing notes} we'll cover were to go from here.
+
+
+<ul doc-tutorial-nav="11"></ul>
@@ -0,0 +1,21 @@
+@ngdoc overview
+@name Tutorial: The End
+@description
+
+Our application is now complete. Feel free to experiment with the code further, and jump back to
+previous steps using the `git checkout` or `goto_step.sh` commands.
+
+For more details and examples of the angular concepts we touched on in this tutorial, see the
+{@link guide/ Developer Guide}.
+
+For several more examples of code, see the {@link cookbook/ Cookbook}.
+
+When you are ready to start developing a project using angular, we recommend that you bootstrap
+your development with the {@link https://github.com/angular/angular-seed angular seed} project.
+
+We hope this tutorial was useful to you and that you learned enough about angular to make you want
+to learn more. We especially hope you are inspired to go out and develop angular web apps of your
+own, and that you might be interested in {@link misc/contribute contributing} to angular.
+
+If you have questions or feedback or just want to say "hi", please post a message at {@link
+https://groups.google.com/forum/#!forum/angular}.
@@ -1 +0,0 @@
-NG_DOC={{{JSON}}};
@@ -1,9 +0,0 @@
-{{#all}}
-describe('{{name}}', function(){
-  beforeEach(function(){
-    browser().navigateTo('index.html#{{name}}');
-  });
-  // {{raw.file}}:{{raw.line}}
-{{{scenario}}}
-});
-{{/all}}
@@ -1,7 +0,0 @@
-function DocController($resource, $location){
-  this.docs = $resource('documentation.json').get();
-  this.getPartialDoc = function(){
-    return encodeURIComponent($location.hashPath) + '.html';
-  };
-}
-DocController.$inject=['$resource', '$location'];
@@ -1,33 +0,0 @@
-<h1><tt>{{name}}</tt></h1>
-<h2>Usage</h2>
-<h3>In HTML Template Binding</h3>
-<tt>
-  <span>{{</span>
-  {{paramFirst.name}}_expression
-  | {{shortName}}{{#paramRest}}{{^default}}:{{name}}{{/default}}{{#default}}<i>[:{{name}}={{default}}]</i>{{/default}}{{/paramRest}}
-  <span> }}</span>
-</tt>
-<h3>In JavaScript</h3>
-<tt ng:non-bindable>
-angular.filter.{{shortName}}({{paramFirst.name}}{{#paramRest}}, {{name}}{{/paramRest}} );
-</tt>
-
-<h3>Parameters</h3>
-<ul>
-  {{#param}}
-  <li><tt>{{name}}{{#type}}({{type}}){{/type}}</tt>: {{description}}</li>
-  {{/param}}
-</ul>
-
-<h3>Returns</h3>
-{{{returns}}}
-
-<h3>CSS</h3>
-{{{css}}}
-
-<h2>Description</h2>
-{{{description}}}
-
-<WIKI:SOURCE style="display:block;">
-{{{example}}}
-</WIKI:SOURCE>
--- a/Show More
+++ b/Show More