update api docs to say page instead of view

This commit is contained in:
Tim Lancina
2015-10-07 14:37:19 -05:00
parent 613b438746
commit a3da0fa68f
6 changed files with 76 additions and 65 deletions

View File

@ -7,7 +7,8 @@ import {makeComponent} from '../../config/decorators';
import * as util from 'ionic/util'; import * as util from 'ionic/util';
/** /**
* The Modal is a content pane that can go over the user's main view temporarily. Usually used for making a choice or editing an item. * The Modal is a content pane that can go over the user's main view temporarily.
* Usually used for making a choice or editing an item.
* *
* @usage * @usage
* ```ts * ```ts

View File

@ -15,16 +15,16 @@ import * as util from 'ionic/util';
* *
* NavController is the base class for navigation controller components like * NavController is the base class for navigation controller components like
* [`Nav`](../Nav/) and [`Tab`](../../Tabs/Tab/). You use navigation controllers * [`Nav`](../Nav/) and [`Tab`](../../Tabs/Tab/). You use navigation controllers
* to navigate to [views](#creating_views) in your app. At a basic level, a * to navigate to [pages](#creating_pages) in your app. At a basic level, a
* navigation controller is an array of views representing a particular history * navigation controller is an array of pages representing a particular history
* (of a Tab for example). This array can be manipulated to navigate throughout * (of a Tab for example). This array can be manipulated to navigate throughout
* an app by pushing and popping views or inserting and removing them at * an app by pushing and popping pages or inserting and removing them at
* arbitrary locations in history. * arbitrary locations in history.
* *
* The current view is the last one in the array, or the top of the stack if we * The current page is the last one in the array, or the top of the stack if we
* think of it that way. [Pushing](#push) a new view onto the top of the * think of it that way. [Pushing](#push) a new page onto the top of the
* navigation stack causes the new view to be animated in, while [popping](#pop) * navigation stack causes the new page to be animated in, while [popping](#pop)
* the current view will navigate to the previous view in the stack. * the current page will navigate to the previous page in the stack.
* *
* Unless you are using a directive like [NavPush](../NavPush/), or need a * Unless you are using a directive like [NavPush](../NavPush/), or need a
* specific NavController, most times you will inject and use a reference to the * specific NavController, most times you will inject and use a reference to the
@ -71,16 +71,19 @@ import * as util from 'ionic/util';
* } * }
* ``` * ```
* *
* <h2 id="creating_views">View creation</h2> * <h2 id="creating_pages">Page creation</h2>
* Views are created when they are added to the navigation stack. For methods * _For more information on the `@Page` decorator see the [@Page API
* reference](../../../config/Page/)._
*
* Pages are created when they are added to the navigation stack. For methods
* like [push()](#push), the NavController takes any component class that is * like [push()](#push), the NavController takes any component class that is
* decorated with [@Page](../../../config/Page/) as its first * decorated with @Page as its first argument. The NavController then
* argument. The NavController then [compiles]() that component, adds it to the * [compiles]() that component, adds it to the DOM in a similar fashion to
* DOM in a similar fashion to Angular's [DynamicComponentLoader](https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-interface.html), * Angular's [DynamicComponentLoader](https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-interface.html),
* and animates it into view. * and animates it into view.
* *
* By default, views are cached and left in the DOM if they are navigated away * By default, pages are cached and left in the DOM if they are navigated away
* from but still in the navigation stack (the exiting view on a `push()` for * from but still in the navigation stack (the exiting page on a `push()` for
* example). They are destroyed when removed from the navigation stack (on * example). They are destroyed when removed from the navigation stack (on
* [pop()](#pop) or [setRoot()](#setRoot)). * [pop()](#pop) or [setRoot()](#setRoot)).
* *
@ -100,13 +103,13 @@ import * as util from 'ionic/util';
* } * }
* ``` * ```
* *
* - `onViewLoaded` - Runs when the view has loaded. This event only happens once per view being created and added to the DOM. If a view leaves but is cached, then this event will not fire again on a subsequent viewing. The `onViewLoaded` event is good place to put your setup code for the view. * - `onViewLoaded` - Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The `onViewLoaded` event is good place to put your setup code for the page.
* - `onViewWillEnter` - Runs when the view is about to enter and become the active view. * - `onViewWillEnter` - Runs when the page is about to enter and become the active page.
* - `onViewDidEnter` - Runs when the view has fully entered and is now the active view. This event will fire, whether it was the first load or a cached view. * - `onViewDidEnter` - Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.
* - `onViewWillLeave` - Runs when the view is about to leave and no longer be the active view. * - `onViewWillLeave` - Runs when the page is about to leave and no longer be the active page.
* - `onViewDidLeave` - Runs when the view has finished leaving and is no longer the active view. * - `onViewDidLeave` - Runs when the page has finished leaving and is no longer the active page.
* - `onViewWillUnload` - Runs when the view is about to be destroyed and have its elements removed. * - `onViewWillUnload` - Runs when the page is about to be destroyed and have its elements removed.
* - `onViewDidUnload` - Runs after the view has been destroyed and its elements have been removed. * - `onViewDidUnload` - Runs after the page has been destroyed and its elements have been removed.
* *
*/ */
export class NavController extends Ion { export class NavController extends Ion {

View File

@ -3,7 +3,7 @@ import {NavController} from './nav-controller';
import {NavRegistry} from './nav-registry'; import {NavRegistry} from './nav-registry';
/** /**
* Directive for declaratively linking to a new view instead of using * Directive for declaratively linking to a new page instead of using
* [NavController.push()](../NavController/#push). Similar to ui-router's `ui-sref`. * [NavController.push()](../NavController/#push). Similar to ui-router's `ui-sref`.
* *
* Basic usage: * Basic usage:
@ -14,7 +14,9 @@ import {NavRegistry} from './nav-registry';
* ```html * ```html
* <button [nav-push]="pushPage" [nav-params]="params"></button> * <button [nav-push]="pushPage" [nav-params]="params"></button>
* ``` * ```
* Where `pushPage` and `params` are specified in your component: * Where `pushPage` and `params` are specified in your component, and `pushPage`
* contains a reference to a [@Page component](../../../config/Page/):
*
* ```ts * ```ts
* import {LoginPage} from 'login'; * import {LoginPage} from 'login';
* @Page({ * @Page({
@ -29,7 +31,8 @@ import {NavRegistry} from './nav-registry';
* ``` * ```
* *
* ### Alternate syntax * ### Alternate syntax
* You can also use syntax similar to Angular2's router, passing an array to NavPush: * You can also use syntax similar to Angular2's router, passing an array to
* NavPush:
* ```html * ```html
* <button [nav-push]="[pushPage, params]"></button> * <button [nav-push]="[pushPage, params]"></button>
* ``` * ```

View File

@ -9,13 +9,14 @@ import {NavController} from './nav-controller';
* docs._ * docs._
* *
* Nav is a basic navigation controller component. As a subclass of NavController * Nav is a basic navigation controller component. As a subclass of NavController
* you use it to navigate to views in your app and manipulate the navigation stack. * you use it to navigate to pages in your app and manipulate the navigation stack.
* Nav automatically animates transitions between views for you. * Nav automatically animates transitions between pages for you.
* *
* For more information on using navigation controllers like Nav or [Tabs](../../Tabs/Tabs/), * For more information on using navigation controllers like Nav or [Tab](../../Tabs/Tab/),
* take a look at the [NavController API reference](../NavController/). * take a look at the [NavController API reference](../NavController/).
* *
* You must set a root view to be loaded initially for any Nav you create, using * You must set a root page (where page is any [@Page](../../config/Page/)
* component) to be loaded initially by any Nav you create, using
* the 'root' property: * the 'root' property:
* *
* ```ts * ```ts
@ -31,8 +32,8 @@ import {NavController} from './nav-controller';
* ``` * ```
* *
* <h2 id="back_navigation">Back navigation</h2> * <h2 id="back_navigation">Back navigation</h2>
* If a [view](../NavController/#creating_views) you navigate to has a [NavBar](../NavBar/), * If a [page](../NavController/#creating_pages) you navigate to has a [NavBar](../NavBar/),
* Nav will automatically add a back button to it if there is a view * Nav will automatically add a back button to it if there is a page
* before the one you are navigating to in the navigation stack. * before the one you are navigating to in the navigation stack.
* *
* Additionally, specifying the `swipe-back-enabled` property will allow you to * Additionally, specifying the `swipe-back-enabled` property will allow you to
@ -41,7 +42,7 @@ import {NavController} from './nav-controller';
* <ion-nav swipe-back-enabled="false" [root]="rootPage"></ion-nav> * <ion-nav swipe-back-enabled="false" [root]="rootPage"></ion-nav>
* ``` * ```
* *
* Here is a diagram of how Nav animates smoothly between [views](../NavController/#creating_views): * Here is a diagram of how Nav animates smoothly between pages:
* *
* <div class="highlight less-margin"> * <div class="highlight less-margin">
* <pre> * <pre>
@ -56,7 +57,7 @@ import {NavController} from './nav-controller';
* &lt;ion-nav&gt; * &lt;ion-nav&gt;
* | * |
* | * |
* Pane 3 +--------------------+ * Pane 3 +--------------------+ LoginPage
* Pane 2 +--------------------+ | Has header, animates into pane 1 * Pane 2 +--------------------+ | Has header, animates into pane 1
* Pane 1 +--------------------+ | | +--------------------+ * Pane 1 +--------------------+ | | +--------------------+
* | | Header (Pane 1) |&lt;-----------------| Login | * | | Header (Pane 1) |&lt;-----------------| Login |
@ -95,27 +96,28 @@ import {NavController} from './nav-controller';
* *
* ### Panes * ### Panes
* *
* NOTE: You don't have to do anything with panes, Ionic takes care of animated * NOTE: You don't have to do anything with panes because Ionic takes care of
* transitions for you. This is an explanation of how Nav works to accompany the diagram above. * animated transitions for you. This is an explanation of how Nav works to
* accompany the diagram above.
* *
* When you push a new view onto the navigation stack using [NavController.push()](../NavController/#push) * When you push a new page onto the navigation stack using [NavController.push()](../NavController/#push)
* or the [NavPush directive](../NavPush/), Nav animates the new view into the * or the [NavPush directive](../NavPush/), Nav animates the new page into the
* appropriate pane. * appropriate pane.
* *
* Panes are the containers Nav creates to animate views into. They do not have * Panes are the containers Nav creates to animate views into. They do not have
* any content of their own, as they are just a structural reference for where * any content of their own, as they are just a structural reference for where
* views should animate into. * the various parts of a page (header, footer, content) should animate into.
* *
* The easiest scenario is animating between views with the same structure. If * The easiest scenario is animating between pages with the same structure. If
* you have a view with a header and content, and navigate to another view that * you have a page with a header and content, and navigate to another page that
* also has a header and content, Nav can smoothly animate the incoming view into * also has a header and content, Nav can smoothly animate the incoming page
* the pane the exiting view is leaving. This allows for things like seamless header * into the pane the exiting page is leaving. This allows for things like
* animations between views that both have headers. * seamless header animations between pages that both have headers.
* *
* But suppose you have a view with a header and content and want to navigate to * But suppose you have a page with a header and content and want to navigate to
* a view with no header. The view controller creates a new pane with no header * a page with no header. Nav creates a new pane with no header that is directly
* that is directly behind the current pane. It then animates the exiting view * behind the current pane. It then animates the exiting page out of the current
* out of the current pane and the new view into the new content-only pane. * pane and the new page into the new content-only pane.
* *
*/ */
@ConfigComponent({ @ConfigComponent({

View File

@ -11,7 +11,7 @@ import {Tabs} from './tabs';
* *
* Tab components are basic navigation controllers used with Tabs. Much like * Tab components are basic navigation controllers used with Tabs. Much like
* Nav, they are a subclass of NavController and can be used to navigate * Nav, they are a subclass of NavController and can be used to navigate
* to views and manipulate the navigation stack of a particular tab. * to pages in and manipulate the navigation stack of a particular tab.
* *
* For more information on using navigation controllers like Tab or [Nav](../../nav/Nav/), * For more information on using navigation controllers like Tab or [Nav](../../nav/Nav/),
* take a look at the [NavController API reference](../NavController/). * take a look at the [NavController API reference](../NavController/).
@ -19,7 +19,7 @@ import {Tabs} from './tabs';
* See the [Tabs API reference](../Tabs/) for more details on configuring Tabs * See the [Tabs API reference](../Tabs/) for more details on configuring Tabs
* and the TabBar. * and the TabBar.
* *
* Like Nav, you must set a root view to be loaded initially for each Tab with * Like Nav, you must set a root page to be loaded initially for each Tab with
* the 'root' property: * the 'root' property:
* ``` * ```
* import {GettingStartedPage} from 'getting-started'; * import {GettingStartedPage} from 'getting-started';
@ -82,9 +82,9 @@ export class Tab extends NavController {
injector: Injector, injector: Injector,
zone: NgZone zone: NgZone
) { ) {
// A Tab is both a container of many views, and is a view itself. // A Tab is both a container of many pages, and is a page itself.
// A Tab is one ViewController within it's Host Tabs (which extends NavController) // A Tab is one page within it's Host Tabs (which also extends NavController)
// A Tab is a NavController for its child ViewControllers // A Tab is a NavController for its child pages
super(tabs, injector, elementRef, zone); super(tabs, injector, elementRef, zone);
this.tabs = tabs; this.tabs = tabs;

View File

@ -15,14 +15,17 @@ class PageImpl extends View {
} }
/** /**
* The Page decorator indicates that the decorated class is an Ionic * _For more information on how pages are created, see the [NavController API
* navigation view, meaning it can be navigated to using a [NavController](../../Nav/NavController/#creating_views) * reference](../../Nav/NavController/#creating_pages)._
* *
* Ionic views have all [IONIC_DIRECTIVES](../IONIC_DIRECTIVES/), which include * The Page decorator indicates that the decorated class is an Ionic
* all Ionic components, as well as Angular's [CORE_DIRECTIVES](https://angular.io/docs/js/latest/api/core/CORE_DIRECTIVES-const.html) * navigation component, meaning it can be navigated to using a NavController.
*
* Pages have all [IONIC_DIRECTIVES](../IONIC_DIRECTIVES/), which include
* all Ionic components and directives, as well as Angular's [CORE_DIRECTIVES](https://angular.io/docs/js/latest/api/core/CORE_DIRECTIVES-const.html)
* and [FORM_DIRECTIVES](https://angular.io/docs/js/latest/api/core/FORM_DIRECTIVES-const.html), * and [FORM_DIRECTIVES](https://angular.io/docs/js/latest/api/core/FORM_DIRECTIVES-const.html),
* already provided to them, so you only need to supply custom directives to * already provided to them, so you only need to supply custom components and
* your Ionic views: * directives to your pages:
* *
* ```ts * ```ts
* @Page({ * @Page({
@ -53,21 +56,20 @@ class PageImpl extends View {
*``` *```
* Alternatively, you could: * Alternatively, you could:
* ```ts * ```ts
* import {Checkbox} from 'ionic/ionic' * import {Checkbox, Icon} from 'ionic/ionic'
* ``` * ```
* along with any other components and add them individually: * along with any other components and add them individually:
* ``` * ```
* @View({ * @View({
* directives: [Checkbox] * directives: [Checkbox, Icon]
* }) * })
* ``` * ```
* However, using IONIC_DIRECTIVES will always Just Work :tm: with no * However, using IONIC_DIRECTIVES will always *Just Work* with no
* performance overhead, so there is really no reason to not always use it. * performance overhead, so there is really no reason to not always use it.
* *
* Ionic views are also automatically wrapped in `<ion-view>`, so although you * Pages have their content automatically wrapped in `<ion-view>`, so although
* may see these tags if you inspect your markup, you don't need to include them * you may see these tags if you inspect your markup, you don't need to include
* in your templates. * them in your templates.
*
*/ */
export function Page(args) { export function Page(args) {
return function(cls) { return function(cls) {