Create a Top Level Angular Application Component
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.
[00:00] In this lesson, we are going to learn how to create our first root level component. In Angular 2, we no longer use ng-app to bootstrap our application, but rather kickoff the bootstrap process by pointing it to a single top-level component that all our other components will branch off of.
[00:17] We can simulate that pattern in Angular 1 by creating a single top-level component that lives within our index.html file that serves as the entry point to all of our other components.
[00:31] To get started with our first app component, let's create some files. We're going to hop into the command line, and we'll jump into the app directory. We're going to create our app.html, which is our template; app.style, which will hold our css; and then app.component.js, which is going to hold our component configuration object for app component.
[00:58] Now, let's hop into app.html. I'm just going to paste some HTML into here so I don't have to type it, as well as let's hop into our style, app.style, and we'll paste in our styles here, as well. Not important to the concept that we're covering, so let's hop into our app.component. We're going to import our template from app.html. Then, we will also import our styles via app.style.
[01:29] From here, let's go ahead and create our component configuration objects. We're going to create an object called "appComponent." We could do template colon template, but using the new ES6 object literal syntax, we can just put in template and ES6 will figure it out for us.
[01:50] From here, we're going to export this appComponent that we just created. You'll notice that we have our template and our styles. This is similar to in Angular 2 where you actually attach your template and your styles directly to the component object.
[02:08] Now, let's hop into our app.js, and we're going to import a few utility files. Bootstrap CSS only, normalize.css, and now let's import Angular from Angular so that we can create our module. Then, we'll also import appComponent from app.component that we're going to use to define our component.
[02:32] Angular.module will create our app module, no dependencies, and .component. We're going to create our component, app, which is really our selector. Then, we'll pass it in the appComponent configuration object.
[02:50] From here, let's hop onto our body tag. We're going to go "ng-app = app," so we're going to bootstrap to the app module. Then, we're going to do ng-strict-di, which just forces us to use dependency injection safe syntax, and ng-cloak, just to make things a bit smoother. Let's delete this tag right here.
[03:13] We're going to go app, so this creates the app component or initializes it into our application. Now let's go npm start to see this in action. White packet's compiling. It looks like we're good.
[03:30] Let's hop into the browser, refresh. Now, you can see we have our categories column and our bookmarks column being picked up by our appComponent that we put into our index.html.
[03:45] Just to review, we created our app module, which then we attached our app component to that contains our app.html template as well as our styling. Then, within our component, we are importing those and attaching our template to our appComponent configuration object.
[04:11] From there, once we've exported that, then we will hop into our index.html, and you can see that we're adding that to the page using the app element, which then renders like this in the page. This is how you create your first top-level root component.
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
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?
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