1.1. Ionic routing mechanism: state
1.2. Ion-nav-view
<body ng-controller= "Firstctrl" >
<a class= "button" ui-sref= "Map" >map</a>
<a class= "button" ui-sref= "Music" >music</a>
<a class= "button" ui-sref= "Class" >class</a>
<ion-nav-view></ion-nav-view>
<script type= "text/ng-template" id= "class.html" > Content of the Template.class </script>
<script>
var app = Angular.module ("myApp", ["Ionic"]);
App. Config (function ($stateProvider) {
$stateProvider
. State ("map", {
Templateurl: "Templates/map.html"
})
. State ("Music", {
Templateurl: "Templates/music.html"
}). State ("class", {
Templateurl: "Class.html"
});
}). controller (' Firstctrl ', function ($scope, $state) {
$state. Go (' music ');
})
</script>
</body>
Trigger State Migration
² Call the $state.go () method, which is an advanced convenience method;
² Click on the link containing the UI-SREF directive <a ui-sref= "State1" >go State 1</a>
² Navigate to the URL associated with the state.
1.3. Ionic in the inline template
Single-page implementation of multiple modules,
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:
There are several common cases.
n use ng-include Directive <div ng-include= "' a.html '" ></div>
n Use $templatecache service var partial = $templateCache. Get ("a.html");
n Use the $http service $http. Get ("a.html", {cache: $templateCache}). Success (function (D,s) {.}). Error (function (d,s) {...} );
1.4. Template view: Ion-view
Custom title: Ion-nav-title, Specific button: Ion-nav-buttons, switching mode: nav-transition, switching direction: nav-direction
<ion-view view-title= "Home111" >
<!--This view is visible, the contents of Ion-nav-title will be loaded into the navigation bar as the title Ion-nav-buttons will be loaded into the navigation bar by the navigation frame--
<ion-nav-title>
</ion-nav-title>
<ion-nav-buttons side= "Right" >
<button class= "button" ng-click= "DoSomething ()" > Register </button>
</ion-nav-buttons>
<ion-content>
<ion-list type= "List-inset" >
<ion-item ui-sref= "Music" class= "Item-icon-right" >
Map
<i class= "icon Ion-ios-arrow-right" ></i>
</ion-item>
<ion-item ui-sref= "Music" class= "Item-icon-right" nav-transition= "ios" > Custom view switch mode iOS simulation
Go to music page!
<i class= "icon Ion-ios-arrow-right" ></i>
</ion-item>
<ion-item ui-sref= "Music" class= "Item-icon-right" nav-direction= "swap" > Transition direction of view transitions
Go to music page!
<i class= "icon Ion-ios-arrow-right" ></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
1.5. Navigation bar: Ion-nav-bar
Fallback button: Ion-nav-back-button
< navigation bar!--navigation frame--
<ion-nav-bar align-title= "center" class= "Bar-positive" >
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
1.6. Script interface: $ionicNavBarDelegate
1.7. Access history: $ionicHistory
Ionic Learning Notes 4_ionic Routing (page switching)