The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Create a Top Level Angular Application Component

Create a Top Level Angular Application Component

4:31
The entry point for any Angular 2 is a single, top-level component that all other components branch off of. We will apply this pattern to our Angular 1.x applications by creating our first component using the `.component` syntax and adding it to our application to serve as our root component.
Watch this lesson now
Avatar
egghead.io

The entry point for any Angular 2 is a single, top-level component that all other components branch off of. We will apply this pattern to our Angular 1.x applications by creating our first component using the .component syntax and adding it to our application to serve as our root component.

Avatar
Georg

Hi,

When this line exports the 'libraries':

import 'bootstrap-css-only';
import 'normalize.css';
import angular from 'angular';

Where is defined that they should be imported from nodemodules/? and in case to be using bower too, where should be defined to import from bowercomponents/?

Thanks

Avatar
Ivo

Great example! Thanks Lukas!

My question is related to the app.html template. If I'm not misunderstanding you are describing the app structure, i.e. a list at the left side with the categories and the main content on the right (the bookmarks). What should we do if we have a login screen that has a different layout? app.html would have an ng-if to show a different template in this case? This is something people never show how they do in real production apps...

Thanks

Avatar
Lukas

There are a few things that I left out for the sake of simplicity but in this case, the easiest way to handle this is through protected routes with ui-router. I would separate my application into two main container components, one for authentication and one for the rest of the application. From there you can do something like this...

$transitions.onStart({
      to: 'auth.*' 
    }, function () {
      if (AuthService.isAuthenticated()) { // The user is authenticated 
        return $state.target('app'); // So send them to the application
      }
    });

Does this make sense?

In reply to Ivo
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?