移动开发中使用Onsen UI的笔记

最新推荐文章于 2025-08-13 15:47:16 发布

weixin_30326745

最新推荐文章于 2025-08-13 15:47:16 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

文章标签： ui 移动开发测试

原文链接：http://www.cnblogs.com/wupeng88/p/5183000.html

本文介绍如何在AngularJS项目中集成Onsen UI框架，实现移动应用开发。包括初始化框架、控制器设置、服务模块定义及页面跳转等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 οnclick="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

转载于:https://www.cnblogs.com/wupeng88/p/5183000.html