Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Onsen UI 2 and AngularJS 1.6 does not work
-
Hello, I’m starting to create an application with Onsen UI v2.0.5 and AngularJS v1.6.1.
I have created two controllers, the “MainController” works fine but the second controller “LoginController” does not work.
index.html
<!doctype html> <html lang="en" ng-app="my-app"> <head> <title>Onsen</title> <meta charset="utf-8"> <!-- CSS --> <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/> <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css"/> </head> <body ng-controller="MainController"> <ons-navigator id="myNavigator" ></ons-navigator> <ons-template id="login.html"> <ons-page ng-controller="LoginController"> <p>OnsenUI 2 and AngularJS v1.6.1</p> <p>{{greeting}}</p> </ons-page> </ons-template> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <script src="node_modules/onsenui/js/onsenui.js"></script> <script src="node_modules/onsenui/js/angular-onsenui.js"></script> <!-- Controllers --> <script src="js/MainController.js"></script> <script src="js/LoginController.js"></script> </body> </html>
MainController.js
var app = angular.module('my-app', ['onsen']); app.controller('MainController', function($scope) { myNavigator.pushPage('login.html'); });
LoginController.js
app.controller('LoginController', function($scope) { $scope.greeting="Hello"; });
The result is:
Console:
Thank you!
-
@anderson That’s a mix between pure JS version and AngularJS version. Actually this doesn’t crash due to a “hidden” feature of HTML/JavaScript where a global object is created for every ID. Use
var
attribute instead ofid
(var="myNavigator"
) and then call navigator with$scope.myNavigator.pushPage(...)
. Also, instead of pushing when your controller runs, you can simply usepage="login.html"
attribute and the navigator will load it when it’s ready.