Home > Developer > Web Develop
Welcome Dabigatran Study: 457351423 There are more than 4,000 learning videos, covering a variety of technologies, there is a need to welcome to the group to learn!
First, the layout
The Ionic template provides a sample project for the sidebar menu and a Label tab sample project. This case combines two layouts with a brief introduction to the layout of the ionic. Ionic is combined with custom tags and standard HTML tags. Custom labels are more readable than the whole div approach. Ionic interface rendering can be rendered either using static page mode or using the routing mechanism and controller provided by angular to control the rendering and data binding of the control page.
Use VS to create a blank ionic project. The project contains a script that index.html pages and app.js. After you have modified the basic properties of the project as usual, open the Index.html page and the App.js script.
<body ng-app= "starter" > <ion-pane> <ion-header-bar class= "bar-stable" >There is a custom property Ng-app on the body tag, which is angular used to identify the application module, typically the program startup module. <ion-pane> Label content is Ionic label, about Ionic label please consult related documents, here no longer repeat.
Angular.module (' starter ', [' Ionic ']). Run (function ($ionicPlatform) { $ionicPlatform. Ready (function () { if ( Cordova.platformid = = = ' iOS ' && Window.cordova && window.cordova.plugins.Keyboard) { Cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true); Cordova.plugins.Keyboard.disableScroll (True); } if (window. StatusBar) { statusbar.styledefault (); } );})Angular.module (' starter ', []) is used to define the application's startup module while loading the Ionic module. The above code is concatenating notation, the normal wording is as follows:
Angular.module (). Run (). config ();Or:
var app = Angular.module (); App.run (); app. Config ();In this way, basic reading is no problem.
The run () method is used to start the run program. Subsequent addition of the Config () and other related methods.
Second , Routing and Controller
Create a Templates folder under the WWW directory and add a home.html blank page. Also create a controllers.js file in the JS folder.
Modify the index.html content as follows:
<! DOCTYPE html>Add the original body content to the home.html and add a view label:
<ion-view view-title= "Home" > <ion-pane> <ion-header-bar class= "bar-stable" >Open App.js, after the Run () method concatenating the Config () method, the following configuration:
. config (function ($stateProvider, $urlRouterProvider) { $stateProvider. State (' app ', { URL: '/app ', Templateurl: ' templates/home.html ' }); $urlRouterProvider. Otherwise ('/app ');});Here, the $stateprovider.state () method is used to declare a state (route). $urlRouterProvider. Otherwise ('/app ') sets the default route. The code function above is to request a/app route when the program starts, which directs the Home.html view template and renders the view content on the <ion-nav-view> Navigation View tab.
The function of the controller is to send the data to view processing before the view is rendered. The data content can be obtained from the server using a network request or with local data.
For example, the above case requires a dynamic display of the caption before the view is rendered, which is handled in the controller as follows:
Open the Controllers.js file and add the following code:
Angular.module (' starter.controllers ', []). Controller (' Homectrl ', function ($scope) { $scope. msg = ' Hello ';});At the same time modify the App.js file related configuration, the full app.js as follows:
Angular.module (' starter ', [' Ionic ', ' starter.controllers '])//Add Controller module. Run (function ($ionicPlatform) { $ Ionicplatform.ready (function () { if (cordova.platformid = = = ' iOS ' && Window.cordova && Window.cordova.plugins.Keyboard) { Cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true); Cordova.plugins.Keyboard.disableScroll (True); } if (window. StatusBar) { statusbar.styledefault (); } );}). Config (function ($stateProvider, $urlRouterProvider) { $stateProvider. State (' app ', { URL: '/app '), Templateurl: ' templates/home.html ', controller : ' Homectrl '//Increase control processing }); $urlRouterProvider. Otherwise ('/app ');});You can use expressions for data binding in home.html.
<ion-view view-title= "Home" > <ion-pane> <ion-header-bar class= "bar-stable" > <!- -Change here to data binding, get-The angular binding expression uses the {{}} method.
Conclusion: The above is one of the simplest request-routing-control cases. The operation of the data is usually placed on the service side, and the mobile program uses the $http object to fetch the data from the server. The simplest way to store local data is to use JSON storage. The next section gives a case for a sidebar menu and Tab tabs as a skeleton for future development.
Welcome Dabigatran Study: 457351423 There are more than 4,000 learning videos, covering a variety of technologies, there is a need to welcome to the group to learn!
cordova+angularjs+ionic+vs2015 Development (IV)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
