移动开发中使用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的笔记的更多相关文章
- Android开发中内存和UI优化
1.内存||效率 GC这东西对于开发人员用起来比较爽,但对于技术总监或产品总监来说,他们并不在乎,在乎的是用户运行App的流畅度,待你开发完了,笑眯眯的走过来,让你测试N个适配器,烦都烦死你. 说到这 ...
- iOS开发中视图相关的小笔记:push、modal、popover、replace、custom
在storyboard中,segue有几种不同的类型,在iphone和ipad的开发中,segue的类型是不同的. 在iphone中,segue有:push,modal,和custom三种不同的类型, ...
- 基于AngularJS的Onsen UI --Onsen UI学习笔记
AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...
- 《Maven在Java项目开发中的应用》论文笔记（十七）
标题:Maven在Java项目开发中的应用 一.基本信息 时间:2019 来源:山西农业大学 关键词:Maven:Java Web:仓库:开发人员:极限编程; 二.研究内容 1.Maven 基本原理概 ...
- C#多线程开发中如何更新UI界面控件内容
子线程不能修改UI线程的状态(比如文本框里面的内容). 解决的办法是写一个用来更新文本框内容的函数,然后在Worker线程里面通过BeginInvoke来利用delegate调用这个函数更新文本框. ...
- Onsen UI for React文档
注:采用ES6+JSX语法 1.开始一个项目 在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块. 可以使用monaca CLI工具包快速初始化一个应用: ...
- IOS开发中UI编写方式——code vs. xib vs.StoryBoard
最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面.iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关 ...
- iOS开发UI篇—IOS开发中Xcode的一些使用技巧
iOS开发UI篇—IOS开发中Xcode的一些使用技巧 一.快捷键的使用 经常用到的快捷键如下: 新建 shift + cmd + n 新建项目 cmd + n 新建文 ...
- iOS开发UI篇—iOS开发中三种简单的动画设置
iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...
随机推荐
- Android 主页面顶部栏的通知Notification ,可以自定义通知消息栏的风格，并且点击通知栏进人本程序。
常用的程序通知,显示到主页面的顶部栏. package com.lixu.tongzhi; import android.app.Activity; import android.app.Notifi ...
- bzoj 2561: 最小生成树
#include<cstdio> #include<iostream> #include<cstring> #define M 100009 #define inf ...
- Ibatis.Net 数据库操作(四)
一.查询select 还记得第一篇示例中的是如何读出数据库里的3条数据吗? 就是调用了一个QueryForList方法,从方法名就知道,查询返回列表. 1.QueryForList 返回List< ...
- IP数据报的格式
1. IP数据报首部的固定部分中的各字段 ①版本:占4位,指IP协议的版本.通信双方使用的 IP协议版本必须一致.日前广泛使用的 IP协议版本号为 4 (即 IPv4). IPv6 目前还处于起步阶段 ...
- HDU 4627 E(Contest #3)
Description There are many unsolvable problem in the world.It could be about one or about zero.But t ...
- 【转】./configure && make && make install详解
在Linux中利用源码包安装软件最重要的就是要仔细阅读安装包当中的README INSTALL两个说明文件,这两个文件会清楚的告诉你如何可以正确的完成这个软件的安装! 我们都知道源 ...
- 隐藏与显示：display/visibility/visible区别
说到标签的隐藏,你们会用到什么呢?display?visibility?还是服务器控件的visible? 显然,这三者都能起到隐藏与显示的效果,但是用途确完全不一样,请看用法与区别: <div ...
- STM32串口USART1的使用方法
前言: 通用同步异步收发器(USART)提供了一种灵活的方法来与使用工业标准NR 异步串行数据格式的外部设备之间进行全双工数据交换. USART利用分数波特率发生器提供宽范围的 波特率选择,支持同 ...
- Eclipse中一些快捷键
用到哪里更新到哪里~~~ 1,代码自动对齐 ctrl+shift+f 2,自动填充相关的包 alt+/ 注意选择好需要的包 3,注释某几行代码 选定后ctrl+/ 4,设置自动补全 最简单的修改方 ...
- Ubuntu 升级VisualBox后无法启动 Kernel driver not installed (rc=-1908)
VisualBox之所以在Linux上比传统的VMware快得多,关键一点就是它和Linux内核的结合比较紧密,这也是开源的优点. 不过Linux内核更新很频繁,每次更新内核后启动VirtualBox ...