Ionic Angularjs Extended Mobile development (view navigation one)

Directory:

1. Inline Template: Script
2. Routing mechanism: state machine
3. Navigation view: Ion-nav-view
4. Template view: Ion-view
5. Navigation bar: Ion-nav-bar
6. Fallback button: Ion-nav-back-button

Inline Template: Script

You may not have noticed that the script tags commonly used in HTML are redefined in ANGULARJS: In addition to the original script declaration functionality, if the type attribute of the script element is defined as Text/ng-template, it is called an inline template. For example:

1. 1.  script " Span style= "color: #ff0000;" >type  = "Text/ng-template"   ID  Span style= "color: #0000ff;"　　>= "a.html"  >  <  p  >  this is the content of the template.  <  / P>   script  >  

Inline templates are useful in single-page application (SAP) development. SAP applications often need to load numerous HTML fragments from the background via AJAX, which are stored in files, and seem uncomfortable to remember. With inline templates, you can put these fragmented HTML fragment templates in one file, and the maintenance and development will feel much better.

Angularjs at compile time, the id attribute value of the inline template and its contents, respectively, as key and value, are stored in the $templatecache Management hash table:

Working with inline templates

The use of inline templates is common in several situations.

• Using the ng-include directive

Inline templates can be used directly in HTML using the Ng-include directive, for example:

1. <ng-include= "' a.html '"></div>

Note: Where a.html is a string constant, it needs to be wrapped up in single quotes.

• Using the $templatecache service

You can also read its contents directly from the template cache using the method get () of the $templatecache service:

1. var partial = $templateCache. Get ("a.html");

• Using the $http service

Another common use is to specify the cache parameter when using the $http service, which will remove the template directly from the $templatecache without network access:

1. $http. Get ("a.html", {cache: $templateCache}). Success (function(d,s) {.}). Error (function(d,s) {...});

Routing mechanism: state machine

For the view route, Ionic does not use the ANGULARJS routing module (Ng-route), but instead uses the Ui-route module of the Angular-ui project. Ionic.bundle.js has packaged the Ui-route module, so we don't need to introduce it separately.

Unlike routing mechanisms, which are usually based on URL matching, Ui-route is a state machine-based navigation:

You can assume that a view element Ui-view has multiple states, such as State1/state2/state3. At any one point, the view element can only be in a certain state. These states are managed by the state machine.

The $state service in Ui-route is a state machine instance, and at any moment we can use its go () method to jump to the state of the specified name.

Configuring the State machine

It should be noted that the partitioning of States and the meta-information of each state (such as templates, URLs, etc.) is done through $stateprovider during the configuration phase:

1. Angular.module ("Ezapp", ["Ionic"]). config (function($stateProvider) {$stateProvider. State ( "State1", {...}). State ("State2", {...}). State3 ("State3", {...}) ;

Trigger State Migration

The directive Ui-sref defined in Ui-router is used to trigger the State migration:

1. <a ui-sref= "State1" >go State 1</a>

When the user clicks on this link, the $state service will find the corresponding meta information based on the status name State1, extract and compile the template, and display it in the view window specified by the Ui-view directive.

Navigation view: Ion-nav-view

In Ionic, we use the Ion-nav-view directive instead of the ui-view instruction in the Angularui route to render the template:

1. < Ion-nav-view > <!-- template content will be inserted here  - </ Ion-nav-view >

Like Ui-view, Ion-nav-view always extracts the corresponding template and renders it in the DOM tree, depending on the state of the change.

Template view: Ion-view

Although you can write HTML casually in the template view, in ionic, we always use directive Ion-view as a container for the contents of the template view for compatibility with the ionic navigation frame:

1. <ScriptID="..."type= "Text/ng-template"><Ion-View><!--Template View Content -</ion-view></Script>

The ion-view directive has some optional properties:

• View-title-View Title text

This property value is displayed in the navigation bar Ion-nav-bar when the template is loaded into the Navigation view Ion-nav-view display

• Cache-view-whether to cache this template view

Allowed values are: true | False, which is true by default

• Hide-back-button-whether to hide the back button in the navigation bar

When the template is loaded into the Navigation view, the return button (defined using directive Ion-nav-back-button) is automatically displayed on the navigation bar Ion-nav-bar by default if there are other templates. Clicking this button will return to the previous template.

The allowable value for Hide-back-button is: true | False, the default is False

Note: The return button must be explicitly declared in the navigation bar, or the button will not appear even if the Hide-back-button property is set to False:-)

• Hide-nav-bar-whether to hide the navigation bar

Allowed values are: true | False, the default is False

Navigation bar: Ion-nav-bar

The Ion-nav-bar directive is used to declare a navigation bar that resides at the top of the screen, and its contents automatically change as the state of the Navigation view changes:

1. <ion-nav-bar></ion-nav-bar>

The Ion-nav-bar has the following optional properties:

• Align-title-Title Alignment

Allowed values are: left | Right | Center Default to center, center aligned

• No-tap-scroll-Scrolls content to the top when you click the navigation bar.

Allowed values are: true | False The default is true, which means that if the content in the view is pulled down for a long time, clicking the navigation bar at any point can immediately return to the beginning of the content.

Fallback button: Ion-nav-back-button

You may have noticed in the example of the previous section that when switching to a novel page, Nowhere to go!

Fortunately Ionic's instruction Ion-nav-back-button command can automatically let you fall back to the previous view:

1. < Ion-nav-bar > < Ion-nav-back-button ></ Ion-nav-back-button > </ Ion-nav-bar >

When the view is toggled, the fallback button automatically appears in the navigation bar and displays the title of the previous view. Clicking the rewind button returns to the previous view.

The code in the example adds a fallback button on top of the previous section, switching to the fiction page and then looking!

Custom styles

We can customize the icon, text, and style of the fallback button:

1. <class= "Button-clear"><class= "Icon Ion-ios-arrow-back"></i>  return </  Ion-nav-back-button>

Ionic Angularjs Extended Mobile development (view navigation one)