mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-05-22 03:13:11 +08:00
379 lines
14 KiB
HTML
379 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en" ng-app="docsApp" ng-strict-di ng-controller="DocsController">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="Description"
|
|
content="AngularJS is what HTML would have been, had it been designed for building web-apps.
|
|
Declarative templates with data-binding, MVC, dependency injection and great
|
|
testability story all implemented with pure client-side JavaScript!">
|
|
<meta name="fragment" content="!">
|
|
<title ng-bind-template="AngularJS: {{ currentArea.name }}: {{ currentPage.name || 'Error: Page not found'}}">AngularJS</title>
|
|
|
|
<script type="text/javascript">
|
|
// dynamically add base tag as well as css and javascript files.
|
|
// we can't add css/js the usual way, because some browsers (FF) eagerly prefetch resources
|
|
// before the base attribute is added, causing 404 and terribly slow loading of the docs app.
|
|
(function() {
|
|
var indexFile = (location.pathname.match(/\/(index[^\.]*\.html)/) || ['', ''])[1],
|
|
rUrl = /(#!\/|api|guide|misc|tutorial|error|index[^\.]*\.html).*$/,
|
|
baseUrl = location.href.replace(rUrl, indexFile),
|
|
production = location.hostname === 'docs.angularjs.org',
|
|
headEl = document.getElementsByTagName('head')[0],
|
|
sync = true;
|
|
|
|
addTag('base', {href: baseUrl});
|
|
|
|
|
|
{% for stylesheet in doc.stylesheets %}addTag('link', {rel: 'stylesheet', href: '{$ stylesheet $}', type: 'text/css'});
|
|
{% endfor %}
|
|
|
|
{% for script in doc.scripts %}addTag('script', {src: '{$ script $}' }, sync);
|
|
{% endfor %}
|
|
|
|
function addTag(name, attributes, sync) {
|
|
var el = document.createElement(name),
|
|
attrName;
|
|
|
|
for (attrName in attributes) {
|
|
el.setAttribute(attrName, attributes[attrName]);
|
|
}
|
|
|
|
sync ? document.write(outerHTML(el)) : headEl.appendChild(el);
|
|
}
|
|
|
|
function outerHTML(node){
|
|
// if IE, Chrome take the internal method otherwise build one
|
|
return node.outerHTML || (
|
|
function(n){
|
|
var div = document.createElement('div'), h;
|
|
div.appendChild(n);
|
|
h = div.innerHTML;
|
|
div = null;
|
|
return h;
|
|
})(node);
|
|
}
|
|
})();
|
|
|
|
// GA asynchronous tracker
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-8594346-3']);
|
|
_gaq.push(['_setDomainName', '.angularjs.org']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="viewport" layout="column" layout-fill>
|
|
|
|
<!-- HEADER -->
|
|
<md-toolbar
|
|
class="md-whiteframe-z2"
|
|
layout="row"
|
|
layout-align="start center"
|
|
md-theme="grey"
|
|
ng-controller="HeaderController as header">
|
|
|
|
<!-- LEFT SIDENAV TOGGLE -->
|
|
<md-button
|
|
aria-label="Toggle table of contents"
|
|
class="stretched toolbar-btn"
|
|
ng-click="vu.openSidenav('toc')"
|
|
ng-if="!vu.media('gt-sm')">
|
|
<i class="fa fa-bars"></i>
|
|
</md-button>
|
|
|
|
<!-- LOGO -->
|
|
<!-- FIXME: While changing sizes, the logo flashes stretched/shrinked. -->
|
|
<!-- Seems like the `src` is adapting quicker than the `width`. -->
|
|
<div
|
|
class="logo-container"
|
|
layout="row"
|
|
layout-align="center"
|
|
ng-attr-flex="{{vu.getFlex('toc')}}">
|
|
<img
|
|
alt="AngularJS logo"
|
|
class="logo"
|
|
height="60"
|
|
ng-src="//docs.angularjs.org/{{vu.media('gt-sm')?'img/angularjs-for-header-only.svg':'favicon.ico'}}"
|
|
width="{{vu.media('gt-sm')?'210':'85'}}"
|
|
/>
|
|
</div>
|
|
|
|
<!-- MENUS -->
|
|
<md-list class="md-toolbar-tools" flex="" layout="row">
|
|
<md-item
|
|
class="clickable stretched"
|
|
layout="row"
|
|
layout-align="center center">
|
|
<md-item-content>
|
|
<a href="//angularjs.org"><i class="icon-home icon-white"></i> Home</a>
|
|
</md-item-content>
|
|
</md-item>
|
|
<md-item
|
|
class="clickable stretched"
|
|
layout="row"
|
|
layout-align="center center">
|
|
<md-item-content>
|
|
<a href="" responsive-menu rm-items="header.learnItems">
|
|
<i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
|
|
</a>
|
|
</md-item-content>
|
|
</md-item>
|
|
<md-item
|
|
class="active clickable stretched"
|
|
layout="row"
|
|
layout-align="center center">
|
|
<md-item-content>
|
|
<a href="" responsive-menu rm-items="header.developItems">
|
|
<i class="icon-book icon-white"></i> Develop <b class="caret"></b>
|
|
</a>
|
|
</md-item-content>
|
|
</md-item>
|
|
<md-item
|
|
class="clickable stretched"
|
|
layout="row"
|
|
layout-align="center center">
|
|
<md-item-content>
|
|
<a href="" responsive-menu rm-items="header.discussItems">
|
|
<i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
|
|
</a>
|
|
</md-item-content>
|
|
</md-item>
|
|
</md-list>
|
|
|
|
<!-- SEARCH FAB -->
|
|
<!-- FIXME: Add the icon -->
|
|
<md-button
|
|
aria-label="Search"
|
|
class="md-fab md-primary toolbar-fab"
|
|
md-theme="red"
|
|
ng-click="vu.openSidenav('search')"
|
|
ng-if="!vu.media('gt-lg')">
|
|
<i class="fa fa-search"></i>
|
|
</md-button>
|
|
|
|
</md-toolbar>
|
|
|
|
<!-- BODY -->
|
|
<div flex="" layout="row">
|
|
|
|
<!-- LEFT SIDENAV (TOC) -->
|
|
<!-- TODO: Have a separate controller for this section ? -->
|
|
<!-- TODO: Add proper classes in CSS (those returned by `navClass`/`linkClass`) -->
|
|
<!-- TODO: Test appearance of nav-items with extras -->
|
|
<md-sidenav
|
|
class="md-sidenav-left md-whiteframe-z2"
|
|
id="sidenav-toc"
|
|
md-component-id="toc"
|
|
md-is-locked-open="vu.media('gt-sm')"
|
|
md-theme="red"
|
|
ng-attr-flex="{{vu.getFlex('toc')}}">
|
|
<md-content>
|
|
<md-list layout="column">
|
|
<md-item>
|
|
<md-subheader class="tight">
|
|
<h2>Version Picker</h2>
|
|
</md-subheader>
|
|
<div ng-controller="DocsVersionsCtrl" class="picker version-picker">
|
|
<select ng-options="v as ('v' + v.version + (v.isSnapshot ? ' (snapshot)' : '')) group by getGroupName(v) for v in docs_versions"
|
|
ng-model="docs_version"
|
|
ng-change="jumpToDocsVersion(docs_version)"
|
|
class="docs-version-jump">
|
|
</select>
|
|
</div>
|
|
</md-item>
|
|
<md-item ng-repeat="navGroup in currentArea.navGroups track by navGroup.name">
|
|
<md-subheader class="tight">
|
|
<h2><a href="{{navGroup.href}}" xng-class="navClass(navGroup)">{{navGroup.name}}</a></h2>
|
|
</md-subheader>
|
|
<md-list>
|
|
<md-item
|
|
layout="row"
|
|
xng-class="navClass(navItem)"
|
|
ng-repeat="navItem in navGroup.navItems">
|
|
<md-button
|
|
flex=""
|
|
ng-class="{'md-primary':isCurrentPath(navItem.extra.href)}"
|
|
xng-class="navClass(navItem.extra)"
|
|
ng-click="vu.closeSidenav('toc')"
|
|
ng-href="{{navItem.extra.href}}"
|
|
ng-if="navItem.extra.href">
|
|
{{navItem.extra.text}}
|
|
<i class="icon-{{navItem.extra.icon}}" ng-if="navItem.extra.icon"></i>
|
|
</md-button>
|
|
<md-button
|
|
flex=""
|
|
ng-class="{'md-primary':isCurrentPath(navItem.href)}"
|
|
xng-class="linkClass(navItem)"
|
|
ng-click="vu.closeSidenav('toc')"
|
|
ng-href="{{navItem.href}}">
|
|
{{navItem.name}}
|
|
</md-button>
|
|
</md-item>
|
|
</md-list>
|
|
<md-divider ng-if-start="!$last"></md-divider>
|
|
<br ng-if-end="" />
|
|
</md-item>
|
|
</md-list>
|
|
</md-content>
|
|
</md-sidenav>
|
|
|
|
<!-- LEFT SIDENAV PLACEHOLDER -->
|
|
<div ng-if="vu.media('gt-sm')" flex="{{vu.getFlex('toc')}}"></div>
|
|
|
|
<!-- CONTENT WRAPPER -->
|
|
<div class="positioned" flex="" layout="column">
|
|
|
|
<!-- CONTENT -->
|
|
<md-content flex="">
|
|
|
|
<!-- TOP ANCHOR -->
|
|
<div id="top-anchor"></div>
|
|
|
|
<!-- LOADER -->
|
|
<div id="loading" ng-show="loading">Loading...</div>
|
|
|
|
<!-- Breadcrumb Back Button -->
|
|
<div ng-if="breadcrumb.length > 1" layout="row">
|
|
<md-button
|
|
class="md-primary md-raised back-breadcrumb"
|
|
href="{{breadcrumb[breadcrumb.length-2].url}}"
|
|
md-theme="red"
|
|
ng-mouseenter="bttHovered=true"
|
|
ng-mouseleave="bttHovered=false"
|
|
ng-style="{opacity:bttHovered?'1.0':null}">
|
|
Back to {{breadcrumb[breadcrumb.length-2].name}}
|
|
</md-button>
|
|
</div>
|
|
|
|
<!-- MAIN CONTENT AREA -->
|
|
<md-content
|
|
class="content-area md-padding"
|
|
ng-hide="loading"
|
|
ng-include="partialPath"
|
|
autoscroll>
|
|
</md-content>
|
|
|
|
<!-- FOOTER -->
|
|
<md-toolbar
|
|
class="footer reverse-whiteframe-z1"
|
|
layout="row"
|
|
layout-align="start center"
|
|
md-theme="grey"
|
|
ng-controller="FooterController as footer">
|
|
<div flex="5"></div>
|
|
<div
|
|
class="stretched"
|
|
flex="90"
|
|
layout="column"
|
|
layout-align="space-around start">
|
|
<span></span>
|
|
<span class="stretched">
|
|
Super-powered by Google ©2010-2014
|
|
(<a
|
|
href="htps://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{footer.versionNumber}}"
|
|
ng-bind-template="v{{footer.version}}">
|
|
</a>)
|
|
</span>
|
|
<span class="stretched">
|
|
Code licensed under
|
|
<a href="https://github.com/angular/angular.js/blob/master/LICENSE" target="_blank">The MIT License</a>.
|
|
Documentation licensed under
|
|
<a href="//creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
|
|
</span>
|
|
<span></span>
|
|
</div>
|
|
</md-toolbar>
|
|
|
|
</md-content>
|
|
|
|
<!-- BACK-TO-TOP BUTTON -->
|
|
<md-button
|
|
class="md-primary md-raised back-to-top"
|
|
href=""
|
|
md-theme="red"
|
|
ng-mouseenter="bttHovered=true"
|
|
ng-mouseleave="bttHovered=false"
|
|
ng-style="{opacity:bttHovered?'1.0':null}"
|
|
scroll-to="#top-anchor">
|
|
Back to top
|
|
</md-button>
|
|
|
|
</div>
|
|
|
|
<!-- RIGHT SIDENAV PLACEHOLDER -->
|
|
<div ng-if="vu.media('gt-lg')" flex="{{vu.getFlex('search')}}"></div>
|
|
|
|
<!-- RIGHT SIDENAV (SEARCH) -->
|
|
<!-- TODO: Put a directive on the sidenav to perform certain actions when opening/closing -->
|
|
<!-- E.g. focus the search-field when opening, clearing it when closing etc -->
|
|
<md-sidenav
|
|
class="md-sidenav-right md-whiteframe-z2"
|
|
id="sidenav-search"
|
|
layout="column"
|
|
md-component-id="search"
|
|
md-is-locked-open="vu.media('gt-lg')"
|
|
md-theme="red"
|
|
ng-attr-flex="{{vu.getFlex('search')}}">
|
|
<div ng-controller="DocsSearchController">
|
|
|
|
<!-- SEARCH HEADER -->
|
|
<md-toolbar class="md-whiteframe-z2" md-theme="grey">
|
|
<form ng-submit="submit()">
|
|
<md-text-float
|
|
label="Search"
|
|
layout-margin=""
|
|
md-fid="search-field"
|
|
md-theme="red"
|
|
ng-model="q"
|
|
ng-model-options="{
|
|
updateOn: 'default blur',
|
|
debounce: {default: 333, blur: 0}
|
|
}"
|
|
type="text">
|
|
<!-- docs-search-input // TODO: Do we still need this directive -->
|
|
</md-text-float>
|
|
</form>
|
|
</md-toolbar>
|
|
|
|
<!-- SEARCH RESULTS -->
|
|
<md-content class="md-padding">
|
|
<h2>Results</h2>
|
|
<md-list>
|
|
<md-item ng-repeat="(key, value) in results">
|
|
<md-item-content layout="column" layout-align="start start">
|
|
<h2>{{key}}</h2>
|
|
<md-list>
|
|
<md-item ng-repeat="item in value">
|
|
<md-item-content
|
|
class="clickable"
|
|
ng-click="hideResults(item.path)"
|
|
ng-mouseenter="hovered=true"
|
|
ng-mouseleave="hovered=false">
|
|
<div class="md-tile-left"><i class="fa fa-anchor"></i></div>
|
|
<div class="md-tile-content"><md-button ng-class="{'md-primary':hovered}">{{item.name}}</md-button></div>
|
|
</md-item-content>
|
|
</md-item>
|
|
</md-list>
|
|
</md-item-content>
|
|
<md-divider ng-if="!$last"></md-divider>
|
|
</md-item>
|
|
</md-list>
|
|
<i ng-if="!hasResults">No results</i>
|
|
</md-content>
|
|
</div>
|
|
</md-sidenav>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|