3. Onsen UI 2 and AngularJS 1.6 does not work

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:
    0_1484693912893_Screen Shot 2017-01-17 at 23.53.34.png

    Console:
    0_1484693930631_Screen Shot 2017-01-17 at 23.53.40.png

    Thank you!

    0 1 Reply
  • Onsen UI

    @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 of id (var="myNavigator") and then call navigator with $scope.myNavigator.pushPage(...). Also, instead of pushing when your controller runs, you can simply use page="login.html" attribute and the navigator will load it when it’s ready.

    1