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. AngularJS recursive(递归)

    工作中我们经常要遍历多层数据,如果数据是已知层级的话,用 ng-repeat 就搞定了,要是数据深度是无限的呢,或者我们要实现一个无限层级的 tree 的时候,该怎么办? 答案是使用 ng-inclu ...

  2. C# DES加密

    需要引用名称空间 using System; using System.Text; using System.Security.Cryptography; using System.IO; 具体代码: ...

  3. HDU 2255 二分图最佳匹配 模板题

    题目大意: 给定每一个人能支付的房子价值,每个人最多且必须拥有一套房子,问最后分配房子可得到的最大收益 抄了个别人的KM模板,就这样了... #include <cstdio> #incl ...

  4. MyEclipse取消验证Js的两种方法

    MyEclipse取消验证Js的两种方法 作者: 字体:[增加 减小] 类型:转载 通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下 前言:有时我们通过j ...

  5. vi编辑器选项

    Vi编辑器有一些选项设置可以帮助人们更好的使用. 在vi中选项分为两种: 1.  开关选项,如果要打开这类选项就使用ex命令——:set 选项:如果要关闭这类选项就是用ex命令——:set  no选项 ...

  6. LOGISTIC REGRESSION

    In logistic regression we learn a family of functions

  7. swift语言之多线程操作和操作队列（上）———坚持51天吃掉大象

    欢迎有兴趣的朋友,参与我的美女同事发起的活动<51天吃掉大象>,该美女真的很疯狂,希望和大家一起坚持51天做一件事情,我加入这个队伍,希望坚持51天每天写一篇技术文章.关注她的微信公众号: ...

  8. 一篇介绍jquery很好的

    本文基于jQuery1.7.1版本,是对官方API的整理和总结,完整的官方API见http://api.jquery.com/browser/ 0.总述 jQuery框架提供了很多方法,但大致上可以分 ...

  9. java中判断字符串是否为数字的三种方法

    以下内容引自  http://www.blogjava.net/Javaphua/archive/2007/06/05/122131.html 1用JAVA自带的函数   public static ...

  10. ubuntu16.04操作练习&问题解决

    1. 安装更新时提示/boot空间不足: boot文件夹里存放的是系统引导文件和内核的一些东西,旧内核的东西需要手动删除,释放空间.所以: step1:查看 dpkg --get-selections ...