In this chapter, you will learn how to add new and unique elements to and modify your current Ionic project from a practical point of view. Among other things, I will show you how to modify the tab icons and add a new tab controller. This chapter will guide you and give you the necessary knowledge that is required to have a deep understanding of how to create and modify your own mobile applications.
Most importantly, you will also get acquainted with the AngularJS JavaScript framework, which lies at the heart of the functionality of Ionic.
The entire source code of this modified project is available on the GitHub repository, which can be viewed by visiting https://github.com/stefanbuttigieg/nodejs-ionic-mongodb.
In the process of creating a project in the previous chapters, we created a directory entitled myfirstionicapp, which can be found in the root folder. We recommend that you open this project folder with an
Integrated Development Environment (IDE) or a text editor. In our case, we are comfortable using Atom, which is an advanced open source text editor.
Note
You can download Atom from https://atom.io/.
Once you open your IDE and add the project folder to your workspace, you will see the following folder structure:
Let's take a closer look at each of the folders shown in the preceding screenshot in turn:
hooks: This folder is where our project will store automatically (or manually) generated hooks for the underlying Cordova system, which provides most of of our project's runtime.platforms: This folder contains the necessary files and configurations that are required to deploy a project on a specific platform, such as Android or iOS.plugins: This stores the various Cordova plugins for our project. If you examine it closely, you will observe that it already contains a number of default plugins such ascom.ionic.keyboard, which makes it easier to work with each platform's native keyboard functionality.resources: This contains global and platform-specific resources, such as app logos, splash screens, and so on.scss: This contains the core Sass (Syntactically Awesome Style Sheets) files for our projects. By modifying these, we can extensively alter the appearance of our app on the various platforms that it targets.www: This is the folder that you will find yourself working with more than any other folder.If you have previously worked with web apps, its contents will be familiar to you:
css: This contains the CSS files for your app.img: This contains the static images for your app.js: This contains the JavaScript files for your app. This is also where most of your custom application logic will reside.lib: This contains third-party libraries and applications that can be used in your project. Among other things, this folder contains AngularJS itself, along with its associated dependencies.templates: This contains the AngularJS template files, which are HTML files that may contain AngularJS-specific content, such as data bindings and directives (don't worry, we will explain what these are in a bit).
As mentioned earlier, your own work will predominantly be confined to the www folder. This makes sense, since the projects that we create with Ionic are actually a special breed of web apps that are customized to run on mobile devices.
Now that we are familiar with the structure of our project, let's dip our toes into AngularJS, the framework that makes it all work. It only gets better.