javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

update api docs to say page instead of view

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
ionic/components/modal/modal.ts
View File

@ -7,7 +7,8 @@ import {makeComponent} from '../../config/decorators';
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
* ```ts

45
ionic/components/nav/nav-controller.ts
View File

@ -15,16 +15,16 @@ import * as util from 'ionic/util';
*
* NavController is the base class for navigation controller components like
* [`Nav`](../Nav/) and [`Tab`](../../Tabs/Tab/). You use navigation controllers
* to navigate to [views](#creating_views) in your app. At a basic level, a
* navigation controller is an array of views representing a particular history
* to navigate to [pages](#creating_pages) in your app. At a basic level, a
* navigation controller is an array of pages representing a particular history
* (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.
*
* The current view 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
* navigation stack causes the new view to be animated in, while [popping](#pop)
* the current view will navigate to the previous view in the stack.
* 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 page onto the top of the
* navigation stack causes the new page to be animated in, while [popping](#pop)
* the current page will navigate to the previous page in the stack.
*
* 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
@ -71,16 +71,19 @@ import * as util from 'ionic/util';
* }
* ```
*
* <h2 id="creating_views">View creation</h2>
* Views are created when they are added to the navigation stack. For methods
* <h2 id="creating_pages">Page creation</h2>
* _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
* decorated with [@Page](../../../config/Page/) as its first
* argument. The NavController then [compiles]() that component, adds it to the
* DOM in a similar fashion to Angular's [DynamicComponentLoader](https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-interface.html),
* decorated with @Page as its first argument. The NavController then
* [compiles]() that component, adds it to the DOM in a similar fashion to
* Angular's [DynamicComponentLoader](https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-interface.html),
* and animates it into view.
*
* By default, views 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
* By default, pages are cached and left in the DOM if they are navigated away
* 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
* [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.
* - `onViewWillEnter` - Runs when the view is about to enter and become the active view.
* - `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.
* - `onViewWillLeave` - Runs when the view is about to leave and no longer be the active view.
* - `onViewDidLeave` - Runs when the view has finished leaving and is no longer the active view.
* - `onViewWillUnload` - Runs when the view is about to be destroyed and have its elements removed.
* - `onViewDidUnload` - Runs after the view has been destroyed and its elements have been removed.
* - `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 page is about to enter and become the active page.
* - `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 page is about to leave and no longer be the active page.
* - `onViewDidLeave` - Runs when the page has finished leaving and is no longer the active page.
* - `onViewWillUnload` - Runs when the page is about to be destroyed and have its elements removed.
* - `onViewDidUnload` - Runs after the page has been destroyed and its elements have been removed.
*
*/
export class NavController extends Ion {

9
ionic/components/nav/nav-push.ts
View File

@ -3,7 +3,7 @@ import {NavController} from './nav-controller';
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`.
*
* Basic usage:
@ -14,7 +14,9 @@ import {NavRegistry} from './nav-registry';
* ```html
* <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
* import {LoginPage} from 'login';
* @Page({
@ -29,7 +31,8 @@ import {NavRegistry} from './nav-registry';
* ```
*
* ### 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
* <button [nav-push]="[pushPage, params]"></button>
* ```

46
ionic/components/nav/nav.ts
View File

@ -9,13 +9,14 @@ import {NavController} from './nav-controller';
* docs._
*
* 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.
* Nav automatically animates transitions between views for you.
* you use it to navigate to pages in your app and manipulate the navigation stack.
* 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/).
*
* 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:
*
* ```ts
@ -31,8 +32,8 @@ import {NavController} from './nav-controller';
* ```
*
* <h2 id="back_navigation">Back navigation</h2>
* If a [view](../NavController/#creating_views) you navigate to has a [NavBar](../NavBar/),
* Nav will automatically add a back button to it if there is a view
* 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 page
* before the one you are navigating to in the navigation stack.
*
* 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>
* ```
*
* 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">
* <pre>
@ -56,7 +57,7 @@ import {NavController} from './nav-controller';
* &lt;ion-nav&gt;
* |
* |
* Pane 3 +--------------------+
* Pane 3 +--------------------+ LoginPage
* Pane 2 +--------------------+ | Has header, animates into pane 1
* Pane 1 +--------------------+ | | +--------------------+
* | | Header (Pane 1) |&lt;-----------------| Login |
@ -95,27 +96,28 @@ import {NavController} from './nav-controller';
*
* ### Panes
*
* NOTE: You don't have to do anything with panes, Ionic takes care of animated
* transitions for you. This is an explanation of how Nav works to accompany the diagram above.
* NOTE: You don't have to do anything with panes because Ionic takes care of
* 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)
* or the [NavPush directive](../NavPush/), Nav animates the new view into the
* When you push a new page onto the navigation stack using [NavController.push()](../NavController/#push)
* or the [NavPush directive](../NavPush/), Nav animates the new page into the
* appropriate pane.
*
* 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
* 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
* you have a view with a header and content, and navigate to another view that
* also has a header and content, Nav can smoothly animate the incoming view into
* the pane the exiting view is leaving. This allows for things like seamless header
* animations between views that both have headers.
* The easiest scenario is animating between pages with the same structure. If
* 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 page
* into the pane the exiting page is leaving. This allows for things like
* 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
* a view with no header. The view controller creates a new pane with no header
* that is directly behind the current pane. It then animates the exiting view
* out of the current pane and the new view into the new content-only pane.
* But suppose you have a page with a header and content and want to navigate to
* a page with no header. Nav creates a new pane with no header that is directly
* behind the current pane. It then animates the exiting page out of the current
* pane and the new page into the new content-only pane.
*
*/
@ConfigComponent({

10
ionic/components/tabs/tab.ts
View File

@ -11,7 +11,7 @@ import {Tabs} from './tabs';
*
* Tab components are basic navigation controllers used with Tabs. Much like
* 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/),
* 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
* 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:
* ```
* import {GettingStartedPage} from 'getting-started';
@ -82,9 +82,9 @@ export class Tab extends NavController {
injector: Injector,
zone: NgZone
) {
// A Tab is both a container of many views, and is a view itself.
// A Tab is one ViewController within it's Host Tabs (which extends NavController)
// A Tab is a NavController for its child ViewControllers
// A Tab is both a container of many pages, and is a page itself.
// A Tab is one page within it's Host Tabs (which also extends NavController)
// A Tab is a NavController for its child pages
super(tabs, injector, elementRef, zone);
this.tabs = tabs;

28
ionic/config/decorators.ts
View File

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