Notes for using the Onsen UI in mobile development

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.