Guided Tour of the Ionic-Angular Code
Explore the foundational code of an Ionic Angular app, including index.html, app-root, components, routing, and page structure. Learn how navigation paths work and how Angular services integrate to create dynamic pages. This lesson helps you understand key files and concepts to confidently develop and customize hybrid mobile apps.
We'll cover the following...
For this tour, have a look at the code we generated in the previous lesson for reference:
import { AppPage } from './app.po';
describe('new App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
describe('default screen', () => {
beforeEach(() => {
page.navigateTo('/Inbox');
});
it('should say Inbox', () => {
expect(page.getParagraphText()).toContain('Inbox');
});
});
});
Every web application starts with index.html, right? Well, it is not always true, but it is the default with an Ionic-Angular app. The index.html file can be seen opened in the above coding playground.
At the top of the file are a bunch of HTML meta tags inside the page head. The folks at Ionic have already done the hard part of figuring these out, and I recommend that you do not mess with them.
The HTML body tag contains a single custom HTML element, app-root. That is how the app is created. So, look at where app-root is defined.
app.component.ts
Open the file src/app/app.component.ts. This is where you will find app-root.
To review, the component decorator near the top defines some information about the component and how it should be rendered. The selector tells Angular that the tag name will be app-root. The HTML markup is in a file called app.component.html, which you will see in a ...