Front-End Designer Turned Programmer


#1

I need help BAD. I could really use a mentor or something but I am trying to figure this out all on my own. I self-taught myself javascript, jquery, html, css, and a bunch of other js frameworks. I just need some guidance on how all this ionic stuff comes together and works.

This is incredibly confusing and daunting. Tutorial videos are out of date and scarce. YouTube channel is basically worthless. And apparently something as simple as finding the project files on my machine is impossible.

I am not a whiz with the CLI yet. I have yet to figure out Git yet. I haven’t even tried Angular yet. I am approaching this entire process from my front-end skill set.

What I really need to know is how do I create an interactive front-end for prototyping? And when I need to implement a custom component or custom styling, how do I go about doing that?

If anyone has updated resources for a beginner in the area of learning Angular or building demo ionic projects it would be greatly appreciated! Thanks!

Alex


#2

Just to make sure you are set up correctly, here is an installation guide for Ionic:
http://ionicframework.com/docs/guide/installation.html

If you run into any errors during the install, try searching the forums to see if there is a topic created already with a resolution to the error. If not, post your error here for some help.

When it comes to mastering the CLI, typing ionic help will give you all of the commands that you can use, as well as a description of each one. You can create a sample app from the command line using ionic start myApp sidemenu - which creates an app based on the sidemenu template. Then you can change into that directory cd myApp/ and run ionic serve to launch the application in a browser for testing.

@andrewmcgivery put together a blog with 100+ Ionic Framework Resources here: http://mcgivery.com/100-ionic-framework-resources/

That should help you get a better understanding of both Ionic and how it works with Angular.

If you want some working examples of Ionic, you can check out their codepen account: http://codepen.io/ionic/


#3

Thank you!

Last question…I want a split pane view similar to Apple Mail on the iPad. Each column with its own header and header buttons and each column with their own ion-content scrollable region. Can Ionic handle iPad layouts? It seems to be specifically tailored to mobile phones based on my early tests.

Using the grid system, is it possible, to set up two scrollable regions on the same screen?

I have something like this so far as a test:

<ion-pane>
  <div class="row">
    <div class="col col-75">
      <div style="height: 56px; background-color: green;">
        <h1>Testing</h1>
      </div>
      <ion-content>
        <ul class="list">
          <li class="item"></li>
          <li class="item"></li>
          <li class="item"></li>
        </ul>
      </ion-content>
    </div>
    <div class="col">
      <div style="height: 56px; background-color: skyblue;">
        <h1>sidebar</h1>
      </div>
    </div>
  </div>
  
  <div class="bar bar-footer bar-dark">
    <div class="title">Footer</div>
  </div>
</ion-pane>

The issue is that the ion-content doesn’t adhere to the grid structure and just overlays itself (absolutely positioned?) on top of the columns.


#4

Your best bet is to use the side menu layout and expose-aside-when. Here is a blog post on this: http://blog.ionic.io/splitview-has-landed/

And here is a codepen example of it: http://codepen.io/ionic/pen/cDbFg

You can resize the window of the codepen and see that the menu will hide when it is smaller.


#5

Also, take a quick look through the docs - there is a header class that you can use:

<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>

Or if you want to take full advantage of AngularJS with Ionic, you can use the ion-header-bar which is an angular directive that adds the header for you.

<ion-header-bar class="bar-positive">
   <h1 class="title">bar-positive</h1>
</ion-header-bar>

#6

Perfect! This looks like it will be exactly what I need! Appreciate it! Thanks!


#7

I used this code from what you gave me and it is exactly what I was looking for!

 <ion-side-menus>
  <ion-side-menu-content>
    <ion-header-bar class="bar-energized">
      Ordering
    </ion-header-bar>
    <ion-content>
      <div class="list">
            <div class="item">
              A few
            </div>
            <div class="item">
              of my
            </div>
            <div class="item">
              favorite
            </div>
            <div class="item">
              things
            </div>
          </div>
    </ion-content>
  </ion-side-menu-content>
  <ion-side-menu expose-aside-when="large" side="right">
    <ion-header-bar class="bar-positive">
      rightmenu
    </ion-header-bar>
  </ion-side-menu>
</ion-side-menus>

#8

Glad to hear it. :slight_smile: Don’t hesitate to post questions if you can’t find the answer on here!