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