Onsen var m_index = Ons.bootstrap () initializes the frame M_index assignment increment object. M_index.value (' GetUser ', {///User:window.localStorage.getItem ("user")//Production Usercode: "Xuhaiyong"}); M_index.service ( ' Loadtaskcountservice ', function ($http, getuser,geturl) {this.loadtaskcount = function ($scope, done) {var user = Getuser.usercode; Get the object value var url = geturl.url; $http ({//http request, send Get Request method: ' Get ', url:url,params:{//Parameter AppID: ' Deptperformance ', Invoke: ' Gettaskcount ', Methodid: ' Gettaskcount ', Usercode:user,phonetype: ' HTML5 '}}. Success (function (Data,status, Headers,config) {//Return successful data request header and related information if (Data.rescode = = ' 0 ') {$scope. Countleadereval = data.countleadereval;//leaders evaluate to-dos /Add variable for $scope to complete data binding $scope.countfinalresult = data.countfinalresult;//final outgoing to-do number}else{ons.notification.alert ({message : ' Request failed! ‘});}}). Error (function (data,status,headers,config) {$scope. countleadereval = 0; Return failure adds a default value for the quantity. $scope. Countfinalresult = 0;ons.notification.alert ({message: ' Request timed out! ‘});}). Finally (function () {if (done) {done ();}})});
Initialize the controller,
M_index.controller (' C_index ', [' $scope ', ' $timeout ', ' loadtaskcountservice ',function($scope, $timeout , Loadtaskcountservice) { ons.ready(function() { Loadtaskcountservice.loadtaskcount ($ Scope,null); });
Page Jump Related actions:
/* Open to-do list * /$scope. getleadertasklist = function () { indexnavigator.pushpage (" Leadertasklist.html ", {animation:" Fade "});
Indexnavigator for <ons-navigator var = "Indexnavigator" ></ons-navigator>
modularity of the Angularjs :
Use the module to declare how the app should start. This approach has several advantages:
1. The start-up process is declarative, so it's easier to understand.
2. In unit testing, it is not necessary to load all modules, so this approach helps write unit tests.
3. Additional modules can be added to the test for specific situations, which can change the configuration to help with end-to-end testing.
4. Third-party code can be packaged into reusable modules.
5. Modules can be loaded in any order or in parallel (because the execution of the module itself is delayed).
Specifiedng-app
=
"myApp" 在想要 管理的内容内,这个内容就是一个模块了和其他的模块没有关系。
The recommendation is to split your application into the following modules:
1. A service module, used to make a statement of service.
2. An instruction module, which is used to make the declaration of the instruction.
3. A filter module, used to make a filter declaration.
4. An application-level module that relies on the above module, which contains initialization code.
<!doctype html>
<!doctype html><meta charset= "utf-8" ><link rel= "stylesheet" href= "Lib/onsen/css/onsenui.css" > <link rel= "stylesheet" href= "Lib/onsen/css/onsen-css-components.css" ><script src= "lib/onsen/js/angular/ Angular.js "></script><script src=" Lib/onsen/js/onsenui.js "></script><script> Ons.bootstrap (); Ons.ready (function () { ///ADD another Onsen UI element var content = document.getElementById ("my-content"); Content.innerhtml= "<ons-button>another button</ons-button>"; Ons.compile (content); The new element inserted in the DOM is the one that should be used in the Onsen framework );</script><body> <ons-navigator title= "navigator" var= " Mynavigator "> <ons-page> <ons-button onclick=" mynavigator.pushpage (' page2.html ') ">next page</ons-button> <div id= "my-content" ></div> </ons-page> </ Ons-navigator></body>
<!doctype html>
Official website: https://onsen.io/reference/javascript.html
Notes for using the Onsen UI in mobile development