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的笔记的更多相关文章

  1. Android开发中内存和UI优化

    1.内存||效率 GC这东西对于开发人员用起来比较爽,但对于技术总监或产品总监来说,他们并不在乎,在乎的是用户运行App的流畅度,待你开发完了,笑眯眯的走过来,让你测试N个适配器,烦都烦死你. 说到这 ...

  2. iOS开发中视图相关的小笔记:push、modal、popover、replace、custom

    在storyboard中,segue有几种不同的类型,在iphone和ipad的开发中,segue的类型是不同的. 在iphone中,segue有:push,modal,和custom三种不同的类型, ...

  3. 基于AngularJS的Onsen UI --Onsen UI学习笔记

    AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...

  4. 《Maven在Java项目开发中的应用》论文笔记（十七）

    标题:Maven在Java项目开发中的应用 一.基本信息 时间:2019 来源:山西农业大学 关键词:Maven:Java Web:仓库:开发人员:极限编程; 二.研究内容 1.Maven 基本原理概 ...

  5. C#多线程开发中如何更新UI界面控件内容

    子线程不能修改UI线程的状态(比如文本框里面的内容). 解决的办法是写一个用来更新文本框内容的函数,然后在Worker线程里面通过BeginInvoke来利用delegate调用这个函数更新文本框. ...

  6. Onsen UI for React文档

    注:采用ES6+JSX语法 1.开始一个项目 在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块. 可以使用monaca CLI工具包快速初始化一个应用: ...

  7. IOS开发中UI编写方式——code vs. xib vs.StoryBoard

    最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面.iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关 ...

  8. iOS开发UI篇—IOS开发中Xcode的一些使用技巧

    iOS开发UI篇—IOS开发中Xcode的一些使用技巧 一.快捷键的使用 经常用到的快捷键如下: 新建 shift + cmd + n     新建项目 cmd + n             新建文 ...

  9. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

随机推荐

  1. 小记：获取系统时间的long值，格式化成可读时间。

    /** * 返回的字符串形式是形如:2013年10月20日 20:58 * */ public static String formatTimeInMillis(long timeInMillis) ...

  2. --投资情况统计详情sql

    --投资情况统计详情sqlselect BidRecord.*, RegInfo.UserName,UserInfo.phone,BorrowInfo.Title,BorrowInfo.BorrowC ...

  3. [Js]面向对象的选项卡实例

    中间过渡环节:把面向过程的程序,改写成面向对象的形式 <html xmlns="http://www.w3.org/1999/xhtml"><head>&l ...

  4. 转: HTTP协议的头信息详解

    通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息.这两种类型的消息由一个起始行,一个或者多个头域,一个只是头域结束的空行和可 选的消息体组成.HTTP的头域包括通用头,请求头,响 ...

  5. 二模 （10）day1

    第一题: 题目描述: 一个阅览室每天都要接待大批读者.阅览室开门时间是0,关门时间是T.每位读者的到达时间都不一样,并且想要阅读的刊物不超过5本.每位读者心里对自己想看的刊物都有一个排位,到达之后他会 ...

  6. CodeIgniter 让控制器可以支持多级子目录的 Router 类库

    MY_Router.php 放到 system/application/libraries 目录下,就可以让 CI 的控制器支持多级子目录了.这样,你就可以在 system/application/c ...

  7. http://bootswatch.com/

    http://bootswatch.com/ http://v3.bootcss.com/examples/dashboard/

  8. SharePoint 2013 重复的管理账户错误：已添加项。字典中的关键字 所添加的关键字

    博客地址:http://blog.csdn.net/FoxDave 今天在管理中心创建新的Web应用程序时,想注册一个新的管理账户,一着急点了两次按钮,结果就出现了这样的错误...怎么说呢,太奇葩 ...

  9. Properties类与读取properties文件

    Properties类 在Java中,其配置文件常为.properties文件,格式为文本文件,文件的内容的格式是“键=值”的格式,文本注释信息可以用"#"来注释. 这个类的几个常 ...

  10. <转>thinkphp自动验证无效的问题

    新手入门thinkphp,试用自动验证表单输入数据功能,却发现怎么都不能调用自动验证,自动验证无效,原因竟是一个小细节的疏忽,学习一定要细心啊! Action方法: IndexAction下的adds ...