Pardon the question if this seems pretty basic. In order to make the Slide Box functionality work, what JS code do I need to move into my JS folder?
Troy McKnight
The slide box code can be found in the ionic.bundle.js. Is this what you mean? Or do you specifically want the code that relates to it in that file?
Brandy - thanks so much for the guidance. Two follow up questions - again, sorry if these seem overly basic (1) do I need to put that ionic.bundle.js into the js folder within the Project Folder, and (2) do I need some special “call” in the html code to make it work?
Best Regards,
Troy
You need to either include the file in your project’s www/ folder or reference the file from Ionic’s server like this: <script src="//code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.js"></script>
If you create an app from the command line using (for example) ionic start myApp blank you will see that Ionic adds the files you need in www/lib/ionic/js/ and also references the bundle file in index.html:
<script src="lib/ionic/js/ionic.bundle.js"></script>
I would suggest keeping the files here, since you can run the command ionic lib update in order to update to the latest version of Ionic.
You should not need any special calls to make it work, just this kind of structure:
<ion-slide-box>
<ion-slide>Slide 1</ion-slide>
<ion-slide>Slide 2</ion-slide>
</ion-slide-box>
Here is an example codepen with slides added in the JS: http://codepen.io/brandyshea/pen/EjxVEe
Let me know if anything I said wasn’t clear. 
Brandy - you are super helpful. After comparing your code (which clearly works) with mine (which is not), I have the following questions:
(1) ionic.css:
I am linking it href=“lib/ionic/css/ionic.css” whereas you are linking it to the http://code.ionicframework.com/.../ionic.min.css ; what does the ‘min’ mean? And is the reason you are linking it to the http is to be able to get the latest code easier?
“Same question with the ionic.bundle.min.js”
(2) In the body tag, I have ng-app=“starter” ; you have ng-controller “AppController”… what is the difference?
(3) In the body, in my starter template I am using ‘ion-pane’ which it does not appear you use. What are you using that might render this unnecessary?
(1) So the difference between the ionic.css and ionic.min.css is the latter is minified. They share the same functionality, but one of them is compressed to remove unnecessary characters. The same goes for the javascript files. Here is the wikipedia on minification which explains it in more detail.
As for linking it to the http, I am doing that just for the Codepen example. I have the ability to upload JS/CSS files to Codepen, but it’s easier to just point to Ionic’s codebase, mostly because it’s easy to switch between different versions of Ionic.
(2) ng-app and ng-controller are completely different. I am defining the ng-app tag on the html tag instead of the body. It’s ok to put them in either place, see the documentation for ngApp. ng-app is telling the application what the module is called:
In my html:
<html ng-app="myApp">
In my js:
angular.module('myApp', ['ionic'])
ng-controller is defining the controller to be used for the view: ngController docs.
(3) The ionPane doesn’t do much except add the pane class. I don’t ever use it, but you can take a look at what the class adds.
I recommend reading through the guide: http://ionicframework.com/docs/guide/preface.html and also getting a better understanding of UI-Router and AngularJS: https://blog.nraboy.com/2014/11/using-ui-router-navigate-ionicframework/
Brandy - in your css section on Codepen, you have .scroll .slider .slider-slide and .slider.card — where do those get used at?
Troy
They are added by the ion-slide-box and ion-slide directives, if you inspect the element you can see where the clases are added.
OK. I appear to have a booboo in my code. here is what the output looks like currently. Any guesses on where to debug?
It looks like an Angular error. Open the console and see if there are any errors.
Brandy - sorry for my minimal (but growing) knowledge of the subject matter, but when you say ‘Open the console’, what are you referring to?
Troy
I’m not sure which browser you are using, but here are some instructions for Google Chrome: https://developer.chrome.com/devtools
Read through that page to understand more about the dev tools. If you are launching your ionic app using ionic serve you will be able to debug it like this.
OK. I am learning (slowly). I have the debugging console working in Safari. I have two errors.
(1) SyntaxError: Unexpected identified ‘newTitle’. Expected ‘}’ to end a object literal. — app.js:126
(2) Error: [injector:modelrr] Failed to instatiate module starter due to: ionic.bundle.js:12757 [$injector:nomad] Module ‘starter’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
WOW. This is way outside my skills. Any ideas?
Troy
Brandy - good news. i was able to find the web debugging tools in Safari and figure out (kind of) how to use the debugging console. I had two errors. The first one was in my app.js file, which was code inserted in from a friend who was trying to help me use the Eddy Verbruggen Calendar plugin. When I removed that code, the slide boxes work! But, now I have 4 errors. Which I will try and figure out later. Looks like, step 1 (of 100) is complete. Thanks so much, you are a rock star.
Best Regards,
Troy