Monaca Onsen UI Discord Chat Github Repo

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!


  • 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.