移动开发中使用Onsen UI的笔记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动开发中使用Onsen UI的笔记相关的知识,希望对你有一定的参考价值。
onsen var m_index = ons.bootstrap() 初始化框架 m_index 赋值 增加对象。 m_index.value(‘getUser‘,{ // user:window.localStorage.getItem("user")//生产 userCode:"xuhaiyong" }); m_index.service(‘loadTaskCountService‘,function($http,getUser,getUrl){ this.loadTaskCount = function($scope,done){ var user = getUser.userCode; //获得对象值 var url = getUrl.url; $http({ //http请求,发送get请求 method:‘GET‘, url:url, params:{ //参数 appId:‘deptperformance‘, Invoke:‘getTaskCount‘, methodId:‘getTaskCount‘, userCode:user, phoneType:‘html5‘ } }) .success(function(data,status,headers,config){//返回成功 获得数据 请求头 和相关信息 if(data.resCode == ‘0‘){ $scope.countLeaderEval = data.countLeaderEval;//领导评估待办数 //为$scope 添加变量 完成数据绑定 $scope.countFinalResult = data.countFinalResult;//最终下发待办数 }else { ons.notification.alert({message:‘请求失败!‘}); } }).error(function(data,status,headers,config){ $scope.countLeaderEval = 0; //返回失败 为数量 添加默认值。 $scope.countFinalResult = 0; ons.notification.alert({message:‘请求超时!‘}); }).finally(function(){ if(done){ done(); } }) } });
初始化 控制器,
m_index.controller(‘c_index‘, [‘$scope‘,‘$timeout‘,‘loadTaskCountService‘,function($scope,$timeout,loadTaskCountService){ ons.ready(function(){ loadTaskCountService.loadTaskCount($scope,null); });
页面跳转 相关操作:
/* 打开待办列表 */ $scope.getLeaderTaskList = function(){ IndexNavigator.pushPage("leaderTaskList.html",{animation:"fade"}); }
IndexNavigator为<ons-navigator var = "IndexNavigator"></ons-navigator>
IndexNavigator位置 位于<body>之下 个人认为是为了替换当前dom
angularjs 的模块化:
使用模块来声明应用应该如何启动。这种方式有以下几个优点:
1.启动过程是声明式的,所以更容易懂。
2.在单元测试是不需要加载全部模块的,因此这种方式有助于写单元测试。
3.可以在特定情况的测试中增加额外的模块,这些模块能更改配置,能帮助进行端对端的测试。
4.第三方代码可以打包成可重用的模块。
5.模块可以以任何先后或者并行的顺序加载(因为模块的执行本身是延迟的)。
指定ng-app
=
"myApp" 在想要 管理的内容内,这个内容就是一个模块了和其他的模块没有关系。
推荐是将你的应用拆分成以下几个模块:
1.一个服务模块,用来做服务的声明。
2.一个指令模块,用来做指令的声明。
3.一个过滤器模块,用来做过滤器声明。
4.一个依赖以上模块的应用级模块,它包含初始化代码。
<!doctype html> <html ng-app="xmpl"> <head> <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="XmplController"> {{ greeting }}! </div> </body> </html> [/code] script.js: [code] angular.module(‘xmpl.service‘, []). //服务模块 value(‘greeter‘, { //自定义greeter对象 salutation: ‘Hello‘, localize: function(localization) { this.salutation = localization.salutation; }, greet: function(name) { return this.salutation + ‘ ‘ + name + ‘!‘; } }). value(‘user‘, { //自定义user对象 load: function(name) { this.name = name; } }); angular.module(‘xmpl.directive‘, []); //指令模块 angular.module(‘xmpl.filter‘, []); //过滤器模块 angular.module(‘xmpl‘, [‘xmpl.service‘, ‘xmpl.directive‘, ‘xmpl.filter‘]). //模块xmpl依赖于数组中的模块 run(function(greeter, user) { // 初始化代码,应用启动时,会自动执行 greeter.localize({ salutation: ‘Bonjour‘ }); user.load(‘World‘); }) // A Controller for your app var XmplController = function($scope, greeter, user) { $scope.greeting = greeter.greet(user.name); }
<!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); //dom中插入新元素 是onsen 框架 中的 应该是用这个处理下的 }); </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> <html lang="en"> <head> <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> var module = ons.bootstrap(‘my-app‘, [‘onsen‘]); module.controller(‘AppController‘, function($scope) { }); module.controller(‘PageController‘, function($scope) { ons.ready(function() { // Init code here }); }); </script> </head> <body ng-controller="AppController"> <ons-navigator var="navigator"> <ons-page ng-controller="PageController"> <!-- Page content --> </ons-page> </ons-navigator> </body> </html>
官方网站:https://onsen.io/reference/javascript.html
以上是关于移动开发中使用Onsen UI的笔记的主要内容,如果未能解决你的问题,请参考以下文章
使用存储的凭据自动登录 PhoneGap Onsen UI 应用程序
Meteor + Onsen UI + Monaca 云构建
带有颜色、Cordova、Onsen 的 Angular 文本交换