Hi,

I been building apps with Onsen and Angular 1 for a while now and I want to try Angular 2.

How do I go about creating a blank Onsen project using Visual Studio 2017 ? I know the project can be created using Monaca CLI … But how would I include the project created with CLI into the Visual Studio Apache Cordova blank project ?

With Angular 1 it’s pretty easy i normally use NPM and install onsen and Angular 1 into the project and link the JS files, but when creating the project with CLI there so many other directories and files.

Any advice ?

Thanks

Thanks for your help! I fixed the issue by retrieving the passed data like:

var params = myNavigator.topPage.data;

I also update my HTML:

    <ons-page>
        <ons-splitter var="mySplitter">
            <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable>
            </ons-splitter-side>
            <ons-splitter-content>
               <ons-navigator id="myNavigator" page="home.html"></ons-navigator>
            </ons-splitter-content>
        </ons-splitter>
    </ons-page>

@Fran-Diox I totally understand that from the link @munsterlander sent to me.

So I updated my code and this is what I now have:

    <!-- SPLITTER -->

    <ons-page>
        <ons-splitter var="mySplitter">
            <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable>
            </ons-splitter-side>
            <ons-splitter-content id="content" page="start.html"></ons-splitter-content>
        </ons-splitter>
    </ons-page>

    <ons-template id="start.html">
        <ons-page id="start">
            <ons-navigator id="myNavigator" page="home.html"></ons-navigator>
        </ons-page>
    </ons-template>

New JavaScript method to pushPage:

window.fn.load = function (page, data) {
    var content = document.getElementById('myNavigator');
    var menu = document.getElementById('menu');
    content.pushPage(page, data).then(menu.close.bind(menu));
};

This is how I call the new JavaScript method:

        var options = {
            data: {
                title: 'Another Page'
            }
        };
        
        fn.load("another_page.html", options);

How I try to retrieve the data passed through:

app.controller('AnotherPageCtrl', function ($scope, $http) {

    var model = this;

    model.init = function (event) {
        //DOES COME HERE
        model.title = event.target.data.title; //Supposed to be "Another Page" but it's an empty
    };

    console.log(model.title);

});

View:

<ons-page id="another-page" class="sub-page" ons-init="Ctrl3.init($event)" ng-controller="AnotherPageCtrl as Ctrl3">
...
</ons-page>
        

I can’t seem to retrieve the data thats being passed through to the page still.

Hi,

I’m trying to pass parameters to another page using this Javascript method:

    var content = document.getElementById('content');
    content.load(page);

I don’t have a ons-navigation on my page since I’m using a ons-splitter, so the .PushPage() method doesn’t seem to work.

My index.html page

    <ons-splitter>
        <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    </ons-splitter>

I saw that the .load() method accepts an [options] parameter:

From: https://onsen.io/v2/docs/js/ons-splitter-content.html#method-load

load(page, [options]): Promise
Show the page specified in page in the content.
Returns: Resolves to the new <ons-page> element

I have no idea what’s the [options] for or how to retrieve it on the other page.

Any help would great :)

Thanks!

@munsterlander the browser is faster, the app takes longer to load the image from an external source.

So should I fetch all those pages and store them locally ? is it possible to store the images locally so I never have to fetch them from the remote server the entire time ?

How would I do this ?

@munsterlander … So the API that I was calling did change… it now sends back a JSON object that looks likes:

{
title: "My Title",
img: "![image.jpg](http://www.domain.com/image.jpg")
}

After calling the API the images need to load on the app and that takes a while to fully load, how can I cache this ?

Hi,

I need some advice regarding an app I’m building.

So the app basically has pages, when you navigate to these pages, it does a call to an remote server that sends back data. This data is generated HTML with an image and some text.

The problem is sometimes there’s a lot of articles that get sent back and it takes some time to load.
What would be my best approach to reduce load time of these pages ?

I currently show a loader while the call is taking place.

Should I load the articles on app load and store them in a global variable or localStorage ? Any advice would be great!

Thanks!

@Fran-Diox thanks for the reply!

I tried the code from the code pen, but what seems to happen is…
When trying to open the menu, nothing happens I checked the console this is the error I get:

onsenui.js:21337 Uncaught (in promise) Splitter side is locked.

This is exactly what I use:

document.querySelectorAll('ons-tab')[0].onClick = fn.open;

HTML:

    <!-- SPLITTER -->

    <ons-splitter>
        <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    </ons-splitter>


    <!-- PAGE: HOME -->
    <ons-template id="home.html">
        <ons-toolbar>
            <div class="center logo"><img src="images/logo.png" /></div>
        </ons-toolbar>
        <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
            <ons-tab icon="ion-navicon, material:md-menu"></ons-tab>
            <ons-tab page="views/contact.html" icon="ion-ios-cart, material:md-account-box-mail"></ons-tab>
            <ons-tab page="views/home.html" active="true"><img src="images/heart-btn.png" /></ons-tab>
            <ons-tab icon="ion-ios-cart, material:md-shopping-cart"></ons-tab>
            <ons-tab page="views/search.html" icon="ion-search, material:md-search"></ons-tab>
        </ons-tabbar>
    </ons-template>

@munsterlander thanks for the reply, sorry I didn’t include the splitter code.

So my code does work, the splitter-side does open up.

The weird glitch that’s happening is that, for example:

If I’m on the shop.html page and if I click on hamburger to open the splitter-side, the splitter-content changes to the contact.html page content and then the splitter-side opens up.

This is my code:

    <!-- SPLITTER -->
    <ons-splitter>
        <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="home.html">
        </ons-splitter-content>
    </ons-splitter>


    <!-- PAGE: HOME -->
    <ons-template id="home.html">
        <ons-toolbar>
            <div class="center logo"><img src="images/logo.png" /></div>
        </ons-toolbar>
        <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
            <ons-tab>
                <ons-button onclick="fn.open()">
                    <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
                </ons-button>
            </ons-tab>
            <ons-tab page="views/contact.html">
                <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
            </ons-tab>
            <ons-tab page="views/home.html" label="Home" active="true">
            </ons-tab>
            <ons-tab page="views/shop.html">
                <ons-icon icon="ion-ios-cart, material:md-shopping-cart" size="32px, material:24px"></ons-icon>
            </ons-tab>
            <ons-tab page="views/search.html">
                <ons-icon icon="ion-search, material:md-search" size="32px, material:24px"></ons-icon>
            </ons-tab>
        </ons-tabbar>
    </ons-template>

JavaScript I’m now using thanks to you :)

window.fn = {};
fn.open = function () {
    document.getElementById('menu').toggle();
}

I also tested something, I changed the URL of the second tabbar button:

<!-- WHAT I HAD -->
<ons-tab page="views/contact.html">
<ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
</ons-tab>

<!-- CHANGED IT TO -->
<ons-tab page="views/search.html"> <!-- CHANGED FROM contact.html TO search.html -->
<ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
</ons-tab>

After doing this I noticed that when I clicked on the hamburger to open the splitter-side the splitter-content then changed to the search.html page content. really weird!

It seems like when I click on the hamburger to open the splitter-side, the splitter-content changes to the content of the next ons-tab page. If this makes sense.

Hi,

I added a button on my tabbar to open the splitter-side menu, however it seems that when I click on the button the page content changes to the contact.html page

    <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
        <ons-tab>
            <ons-button onclick="fn.open()">
                <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
            </ons-button>
        </ons-tab>
        <ons-tab page="views/contact.html">
            <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
        </ons-tab>
        <ons-tab page="views/home.html" label="Home" active="true">
        </ons-tab>
        <ons-tab page="views/shop.html">
            <ons-icon icon="ion-ios-cart, material:md-shopping-cart" size="32px, material:24px"></ons-icon>
        </ons-tab>
        <ons-tab page="views/search.html">
            <ons-icon icon="ion-search, material:md-search" size="32px, material:24px"></ons-icon>
        </ons-tab>
    </ons-tabbar>

window.fn.open = function () {
    var menu = document.getElementById('menu');
    menu.open();
};

no matter what page I’m on if I click the button -> fn.open() … the page content change to the contact.html page.

Any ideas why this would happen ?

Thanks