Navigating to new page from controller using AngularJS and Onsen UI - javascript

I have a cross platform app developed using Onsen UI, Monaca and AngularJS.
I am trying to navigate to a new page from a controller when the user clicks a button on my view. I am following a solution from THIS SO post but I keep getting the error: TypeError: Cannot read property 'pushPage' of undefined at Scope.$scope.getDateAndPushPage
I have my view set up to display a listview of dates using ng-repeat and when the user clicks on any of the listview items, I get the selected date item and and use it in my controller to perform some calculations. Once this is done I need to segue to the next page to display the calculations.
My listview looks as follows and displays the list of dates stored in data:
<ul class="list">
<li ng-repeat="myDate in data" class="list__item list__item--chevron" ng-click="getDateAndPushPage(myDate.date)")>
{{myDate.date}}
</li>
</ul>
In my views controller I try and push the new page as with the the example mentioned above as per my code below:
var dateReports = angular.module("dateReportsController", []);
dateReports.controller("DateReportsController", function($scope, $http, $rootScope)
{
$scope.getDateAndPushPage = function (myDate)
{
var page = "date-report-details.html";
console.log("Page: " + page); // OK here - outputs page: date-report-details.html
console.log("My Date: " + myDate); // OK here and do calculation
$rootScope.ons.myNavigator.pushPage(page); // Error here
}
});
And finally in my index.html I have my navigator defined as:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<!-- Usual content goes here - omitted because not relevant -->
</head>
<body>
<!-- The first page in the navigation stack -->
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
</body>
</html>
I have tried all the solutions offered on the above mentioned SO post but none seems to be working for me. I have my app setup in such a way that all controllers are split into their separate files to make it easier to manage. To this effect my main app.js file looks as follows and Im not sure is this where the issue is coming from
var app = angular.module("myApp", ['onsen', 'loginController', 'dateReportsController']);

your code is not able to find myNavigator variable. Try changing :
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
to <ons-navigator id="myNavigator" page="login.html"></ons-navigator>
and use: $rootScope.ons.$get('#myNavigator').pushPage(page);

To navigate to from page to another page, you can use the following code.
HTML
<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
In controller
$rootScope.myNavigator.pushPage('page2.html');

Related

AngularJS: Dynamically loading HTML with a controller

I'm new to AngularJS and I'm working on a small project to get the hang of how things work.
Basically I want to have a single-page app where I can dynamically change part of the page to include html from some other file. This other file has a controller and such. I would like the url to stay the same. I need the page to be loaded dynamically with a variable name.
Right now, I can get the HTML to load from the imported template, but a lot of HTML is excluded and all of the "ng" tags are gone. I take this to mean that this new page can't find the controller or a lot of the stuff is getting compiled out or something. Maybe I'm not importing things in the correct order? I have no idea. Here's my basic layout:
app.js
var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
$scope.htmlContent = 'somepage.html';
$scope.externalPage = 'otherpage';
$scope.changePage = function(page) {
$scope[page]();
}
$scope.otherpage = function() {
$scope.htmlContent = 'otherpage.html';
}
});
app.controller('InternalPage', function($scope) {
alert('hello world');
$scope.content = "This is not showing";
});
index.html
<div ng-controller="Main">
<!-- This all works. Clicking "Change Page" changes the
HTML referenced by the <div> tag -->
<a ng-click="changePage(externalPage)">Change Page</a>
<div ng-bind-html="htmlContent"></div>
</div>
otherpage.html
<div ng-controller="InternalPage">
<p>{{content}}</p>
</div>
I have tried including the javascript in the html file itself to no avail. I also could not get the ng-include thing to work either.
Try looking into ng-include instead of ng-bind-html:
https://www.w3schools.com/angular/angular_includes.asp

Angular js show/hide only working in page refresh

I am new to AngularJS.
Here i want to display some html while switching from one controller to another.
This is my HomeController
function HomeController($scope) {
alert("hi");
$scope.myValue = true;
}
This is my MainController.
Initially it is false in my MainController.
function MainController($scope,$location) {
$scope.myValue = false;
}
and this is my body.
<body ng-controller="MainController as main">
<div id="sradha" ng-show="myValue" >Show-side-bar</div>
<div ui-view></div>
<!--<script src="js/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="../js/ui-router/angular-ui-router.min.js"></script>
<script src="../js/all.js"></script>
</body>
My problem is Show-side-bar is showing for 2 to 3 seconds when i am doing the refresh ,then it hides .I have checked in console .It is hidden in the HTML.Here i want to show this show-side-bar when I am redirecting from login response ( $window.location.href = 'http://localhost/Angular-js-admin/admin/#/home';) to home page of my project
I have attached some screen shorts ,please have a look.
https://i.stack.imgur.com/BWnlz.png
https://i.stack.imgur.com/JKzsh.png
Thank You.
As you are using controller as syntax. So, the controller function we declare as usual, just using the this Object instead of $scope.
app.controller('MainController', function () {
this.myValue = true;
});
This is more of a class based setup, and when instantiating a Controller in the DOM we get to instantiate against a variable :
// MainController doesn't exist, we get the `main` instance only
To reflect this.myValue based check in the DOM, we need to do this :
<div ng-controller="MainController as main">
<div id="sradha" ng-show="main.myValue" >Show-side-bar</div>
</div>
Demo!
We can use ngStorage to keep scope variable on page reload by using $localStorage in controller.
$scope.var1 = $localStorage.var1;
$scope.var2 = $localStorage.var2;
$scope.var3 = $localStorage.var3;
and in your function update $localStorage variables the same as $scope variables (assign) new values.
it works with me to keep div element shown using ng-show (depending on $scope variable) after page reload.
Example: to keep chat inbox opened after page reload without re-opening it.
we can find more on github page.

Angular.js - How to load different menu

I 'm starting jquery migrating an application to angular, but it has made ​​me a bit complex. I need to know if someone could help me as routing and load controllers, when login any user. There are two types of users
Students
Teachers
Each has a different menu , which in turn has different html pages. Depending on the role the user to enter then load the specific menu.
Using the jQuery load event , and changed the content which changes within a div . I would like to know how to perform this process with angular .
index.html
<html>
<head> Files ... </head>
<body>
<div id="container"></div>
</body>
</html>
student-menu.html
<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>
students-pages
option-1.html
option-2.html
option-3.html
option-N.html
teacher-menu.html
<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>
teachers-pages
option-1.html
option-2.html
option-3.html
option-N.html
Appreciate a clear explanation.
Please consider reading about including ui-router in your amazing application and learn about templateProviderusage.
As soon as you done with above things all you need is:
Create Service that will have getCurrentUserStatus() that should acquire from loaded data about user his status in your system
Depending on status configure your child views: { 'menu': { ... } } with
//somewhere above
const TEMP = {
user: 'path/to/file.tpl.html',
admin: 'path/to/admin.tpl.html'
}
//somewhere in view configuretion
...,
templateProvider (AuthService) {
return TEMP[AuthService.getCurrentUserStatus()];
},
...
Create all another pages with totally same approach of choosing needed template.
P.S. This allows you to expand list of variable templates unless your imagination will empty :D
P.P.S. Noobs way - lot of ng-include with ng-if on every view that will be changed depending on viewer.

Login automatically with stored credentials PhoneGap Onsen UI app

I have this mobile application made with PhoneGap, Onsen UI and AngularJS.
I have a single index.html file, where I have the following page structure:
index.html
- <ons-navigator var="myNavigator" page="login.html">
- <ons-template id="login.html">
- <ons-page ng-controller="LoginController" id="login">
- <ons-template id="main.html">
- <ons-page ng-controller="AppController" id="main">
- <ons-tabbar>
- <ons-tab active="true" page="upcoming.html">
- <ons-tab active="true" page="completed.html">
- <ons-tab active="true" page="settings.html">
- <ons-template id="upcoming.html">
- <ons-template id="completed.html">
- <ons-template id="settings.html">
The login.html page asks for user credentials, and when the user click Login, these will be stored in the window.localStorage object.
The next time I load the page, I want the app to not navigate to the login.html page (not show it), but check for the credentials in the localStorage, and use the myNavigator to push to the main.html page, just like a succesfull login would do.
I have a main.js file that has both the controllers in it, and outside the controller definitions, I have a ons.ready function which is triggered when the Onsen framework is loaded.
ons.ready(function() {
var storage = window.localStorage;
if(credentials_found_in_localStorage)
myNavigator.pushPage('main.html');
}
});
This function is working, but before the pushPage happens, the login.html page is shown for a couple of seconds (until I get back if the login was succesfull or not)
How can I have a functional automated login, that uses the stored credentials and is skipping the login.html page?
What would be the best approach to handle this? (maybe a splash screen?)
You can start your navigator without a specified page (remove page="login.html" attribute), and then load the page you want on ons.ready():
ons.ready(function() {
if(credentials_found_in_localStorage) {
nav.resetToPage('main.html');
} else {
nav.resetToPage('login.html');
}
});
Working here (change the value of isLogged): http://codepen.io/frankdiox/pen/eNmNoz
Another possible solution is to remove your ons-navigator, since I think you only use it for logging purposes, and use an ons-modal instead. For this you have to make your ons-tabbar the main element (remove the ons-template id="main.html" wrapper). Inside the modal you can include your actual login.html page and only do myModal.show() on ons.ready if the user is not logged in. When he logs in you just need to do myModal.hide(). If you don't want to load the first page in the tabbar until the user is logged in, just use myTabbar.loadPage(...) after the login check.
Hope it helps!

Transferring the data printed by NG-repeat in one html to another html

ok, so i started getting the hang of ng-repeat and how to use it. but now i have a table which is rendered by ng-repeat in one html page and i have to print the same table on another html page.
<tr ng-class-odd="b" ng-class-even="" ng-repeat="result in teamResults">
<td>{{$index+1}}</td>
<td>{{result.lastName}}</td>
<td>{{result.teamName}}</td>
<td>{{result.location}}</td>
</tr>
teamResults is an array in my controller which gets data from a ajax call. i want to print the same table on another html page when a link is clicked. what i observed when i linked the controller to the new html page is that the controller is re instantied and the array is empty. how can i transfer the data from the first html page to the second page without having to make another service call in the second html page ?? im a noob in angular and any in sight into this would be helpful . thank in advance for all the answer and sorry again if this a noob question
UPDATE : when i click a link a new html page opens up and i need to print the same data on that page.but the data disappears. I even used a service to store the data but i cant seem to pass it to the controller linked to the new HTML page
Consider this as an Sample example model :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
</head>
<body ng-app>
<table ng-controller="MyController">
<tr ng-class-odd="b" ng-class-even="" ng-repeat="result in teamResults">
<td>{{$index+1}}</td>
<td>{{result.lastName}}</td>
<td>{{result.teamName}}</td>
<td>{{result.location}}</td>
<button ng-click="getRowData(result)">view</button>
</tr>
</div>
</table>
<script>
function MyController($scope, $http) {
$scope.getRowData = function(data) {
console.log(data);
}
}
</script>
</body>
</html>
try defining teamResults in $rootScope
$rootScope.teamResults=yourdata;

Categories