Create a Top Level Angular Application Component

InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

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.

Georg Ochsner
~ 8 years ago

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 node_modules/? and in case to be using bower too, where should be defined to import from bower_components/?

Thanks

Ivo Santiago
~ 8 years ago

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

Lukas Ruebbelkeinstructor
~ 8 years ago

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?