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.