Onsenui无法添加onsen模块
Onsenui can not add onsen module
我已经通过 Monaca 创建了一个新项目 IDE。该页面有 ons.bootstrap() 和 onsenui 版本是 v1.3.8 - 2015-07-27。
我尝试添加
<script> angular.module('app', ['onsen'])</script>
但是当我添加一个控制器时,例如 app.MyController 它给我这个错误
Uncaught ReferenceError: app is not defined
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="components/loader.js"></script>
<script>
ons.bootstrap();
</script>
<script> angular.module('app', ['onsen']);</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/roundProgress.min.js"></script>
<script src="js/controller.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ons-page>
<ons-tabbar position="top" >
<ons-tabbar-item page="dashboard.html" style="margin-top:20px"><span style="margin-top:20px"><img src="img/icon.svg" width="34"/></span></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
<ons-tabbar-item page="settings.html" icon="ion-android-settings"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</body>
</html>
timeline.html
<ons-page ng-controller="CActivity">
<ons-toolbar>
<div class="center">History</div>
</ons-toolbar>
</page>
控制器文件,controller.js
app.controller('CActivity', ['$scope', '$http', function($scope, $http) {
// do stuff here alert('hello');
}]);
并且也得到这个错误:
CActivity is not a function got undefined
如错误所述,app
不存在。 ons.bootstrap()
returns 一个 AngularJS 模块 as explained in the docs,所以你可以这样做:
var app = ons.bootstrap();
app.controller('CActivity', ... );
希望对您有所帮助!
我已经通过 Monaca 创建了一个新项目 IDE。该页面有 ons.bootstrap() 和 onsenui 版本是 v1.3.8 - 2015-07-27。
我尝试添加
<script> angular.module('app', ['onsen'])</script>
但是当我添加一个控制器时,例如 app.MyController 它给我这个错误
Uncaught ReferenceError: app is not defined
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="components/loader.js"></script>
<script>
ons.bootstrap();
</script>
<script> angular.module('app', ['onsen']);</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/roundProgress.min.js"></script>
<script src="js/controller.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ons-page>
<ons-tabbar position="top" >
<ons-tabbar-item page="dashboard.html" style="margin-top:20px"><span style="margin-top:20px"><img src="img/icon.svg" width="34"/></span></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
<ons-tabbar-item page="settings.html" icon="ion-android-settings"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</body>
</html>
timeline.html
<ons-page ng-controller="CActivity">
<ons-toolbar>
<div class="center">History</div>
</ons-toolbar>
</page>
控制器文件,controller.js
app.controller('CActivity', ['$scope', '$http', function($scope, $http) {
// do stuff here alert('hello');
}]);
并且也得到这个错误:
CActivity is not a function got undefined
如错误所述,app
不存在。 ons.bootstrap()
returns 一个 AngularJS 模块 as explained in the docs,所以你可以这样做:
var app = ons.bootstrap();
app.controller('CActivity', ... );
希望对您有所帮助!