Developing Mobile Apps with Ionic and Angular/

...

/

Guided Tour of the Ionic-Angular Code

Guided Tour of the Ionic-Angular Code

Break down the components and files of the Ionic-Angular project in this lesson.

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');
    });
  });
});
Your first Ionic-Angular Application

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.

HTML
<body>
  <app-root></app-root>
</body>

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.

TypeScript 3.3.4
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

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 ...