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