Angular transition to 2.0, part 9, the final video

BrieBug Solutions has created an online video series that provides information, tips, and insight on the transition from Angular 1.x to Angular 2.0. This video is a great resource for those in the industry who are interested in programming, typically programmers, to be aware of the Angular changes, as well as receptive to technology growth.

The final part in our series on how to transition from Angular 1.x controllers/views to Angular 2.0. This video covers how to complete the final step and update your code from Angular 1.x to 2.0.

Today we are going to continue our discussion on transitioning to angular 2.0. We are actually going to build our first angular 2.0. Previously, we took john papa’s hottowel startup project and we refactored that to use component bases on it. We moved logic out of controllers and into directives. And then we later converted that into a typescript angular 1.0 application. And all of this was done in preparation for making the move to angular 2.0. So today we are going to look at that same application but implement it to angular 2.0 and we are going to step through some of it and see the basics of how to construct an angular 2.0 application.

So to recap, angular 2.0 is a complete rewrite of angularjs. It doesn’t have controllers, it doesn’t have scopes and application is just a component tree so each component knows about its child, child component so there is no register modules with angular and the codebase itself is written typescript finally. Angular 2.0 has excellent support for typescript because of that we highly recommend using typescript when building in angular 2.0. And again at the time of this recording angular 2.0 is an alpha product and many other features are still in development so we are going to stay away from some of the services and stuff that angular 2.0 provides because they’re still being changed. We will just start with the basics today.

So previously we showed this typescript angular 1.x example. It’s very simple, very basic. It is just the service, the controller, our directive. The controller injects the service to populate data that can then get rendered within the directive. All these components are registered with the same application in angular 2.0. It looks like this. We just declare a class, my service as the function that we expect, the market is injectable and then we have our app component, our root component that represents the application itself.

The selector for that to you to place it in the html is myapp and the view that will get rendered is that simple template right there. So we inject the service simply by saying that we want an instance of my service and it just works. So it is very basic, very simple, you’re not registering components, not doing a lot of scaffolding. So today we are going to look at an angular 2.0 application. So if you want to do a comparison you can take a look at the typescript version of this app that we will be looking at today.

There is the URL for it and there is the URL for the new one that we will be stepping through. So today we are going to look at how to bootstrap an angular 2.0 application, how to set up some basic routing, and what that component tree looks like and then some simple transclusion. So loading an angular 2.0 app on a page is a little different than angular 1.0. Angular 1.0 is the one most of you have used ngi in your html tracks. They specify which app that you want to load. Now in angular 2.0 since were just loading a component and they have child components we do it a little bit differently.

Let’s take a look at what that looks like. So here we are actually bootstrapping the helloworldapp component which is the route component for application. You can see were pulling it in from components hello world, hello world component and we’re saying that this is the actual route components and these are the dependencies that that we have. So each the index and HTML right here as you can see there’s no NG app or anything like that. we’re simply were using system js to pull in all of our JavaScript files or our compiled typescript JavaScript files and then we simply have our route components just injected right there in the body hello world. As I mentioned is no need to register components of services or anything like that so you just pretty straightforward. So routing, let’s take a look at routing.

So we have hello world there is our route application. Let’s take a look at what hello world looks like so go into our app, components and then we go to Hello world. here’s the HTML we have our header there we have a top nav component were we are passing in outline object into that component we have a sidebar here and we have a div where we have our router outlet and that is where is the placeholder for the view we want rendered when we go to different routes. When we look at the actual component itself, again not very big, not too much you have to write here so first we bring in everything that we need, angular 2, we are pulling in component bootstrap, you probably don’t need bootstrap here so bring in router and we need to bring in our components that we’re loading in this page our top notch components our sidebar component our dashboard and admin components for routing.

So the routing itself we can figure with this approute config decorator for our component there are some things that you navigate / dashboard then you want to load the dashboard component if you’re going to / admin you want to look at the admin component. In addition you’ll see here how we have to inject router directives. We have to specify that we need those that were using those directives in our helloworld. Html file and that’s how we can use the router outlet tag that directive. So that’s basic routing right there. It’s that component tree. So app is just a component tree.

This is the component as you can see here we’re saying that this component as to child components top notch component and sidebar component that were utilized and if we go back to the HTML that’s where we’re using those two components, top notch and side bar. now for injecting nav line in which you can see here that were creating that in the constructor here putting it right on our component class so it’s available to use in our template and there’s the object that were passing in. we are also here saying that by default navigate to dashboard when you load the app.

So those components, lets of take a look at some of these. Top nav and sidebar now. Let’s take a look at top nav real quick, at this one this one doesn’t have any child components itself so that is a leaf on the tree. And pretty straight forward it just loads the top nav html which is a pretty simple one there. Now for routing we took we saw how dashboard and the admin. Let’s take a look at the dashboard. It is a good example tree structure. So dashboard itself has its own child components; the container component, the use component, and the people component that are used in its template. You are injecting people service which are pulling out from services which we should take a quick look at that in a second.

We are using that to load the people data that we need from the server and make it available for the template. Alright template here we’ve got our containers here we’re using it twice one of them for people, one of them for that which as you can see our first of these two components on the page. Then we’re transcluding into those components. This people component and this news component. So taking a look at that we set this people in this news on the component class that there are available in the Html here. So we touched on tranclusions. Transclusions, if you’re not familiar with the term is dynamically including one component inside of another. In angular 1.0 it is called transclusion and you would use the transclude property on a directive and angular 2.0 the solutions based on Web Components so you use an ng content tag where you want the content to render. So we take a look at the container component we see in the html that we have this ng content here. So what that means is when we pass in the people component or the news component from dashboard it’s going to render in that spot.

So what you end up with this wrapper around the component where we have the title. So if we look at the html we can see how the border here and the title here are part of the container component and then inside of it we are rendering people, or rendering news. now one thing we’re not demonstrating here but one of the nice things about using content so in angular 1 you basically you have your transclude property and you said where you used ng tranclude I believe to specify where you want to load just like what we saw here. Our ng content is much more powerful, you can actually use a select attribute on the ng content tag and use ts as selectors to specify where you want a specific transcluded component to render. So for example if we were to take a look at your ng content select equals.

First and then we had a second ng content let’s say up here in the header that was ng content select equals. Second something like that. Then in our dashboard we could actually specify in here we could have people we can give it a class of first and it would render where we had our first selector. And then we could have a second component in there that had a class of second that was maybe a span and it had the title in it and that would render wherever we said we wanted to inject first. So you can see how this can be pretty powerful where you can really have some nice flexible designs here and be able to inject multiple components in multiple places. And that’s kind of what we wanted to cover here in our first steps into angular 2.0. You can feel free to go take a look at that project in this under briebug consulting, hello world angular 2.0.

There are instructions here on how to install it and it’s based on I’m not sure which version, but it’s based on that uses a beta version of angular 2.0. Sorry an alpha version of angular 2. So if you want to dive in deeper to angular 2.0, since they do have weekly releases, and new features and whatnot it can be difficult to find up-to-date tutorials and as you’ll find articles that tell you how to do something and then you realize when you failed to implement it that actually change the way that gets implemented. For some good up-to-date resources versus the angular.io site. This is pretty up to date they’re actually doing a good job of building up their documentation.

You can go in and take a look you can see a preview and you can actually go and see the API preview and see all the different things. So in angular 2 you’ve got the router here and if want to see what the router directives look like. They give you some example code and whatnot. So it’s a pretty good resource. Another one is actual repo itself, take a look at the actual code, a good way to learn how to write angular 2 code is to take a look at how they do it. You can look at how to create the route components that it’s providing out of the box. You can use as a template for your own. Lastly there’s a very nice curated repo here. Language/education and it has all kinds of articles, tutorials, example applications, books, tools, and whatnot. That’s a really good place to go and find some pretty good content for learning angular 2.0. That’s what we’ve got for today. We will follow up with some more presentation soon, diving deeper into angular 2.0. And we will add some more features to this hello world application and show you how they work. so thanks for joining us today

Please enjoy, learn, subscribe, and like our channel on YouTube.

We would love to hear from you so don’t hesitate to share your ideas or provide us with constructive feedback.

BrieBug Solutions a Denver based website and mobile application development agency that specializes in Angular and Full Stack development. If this is a technology that you would be interested in to boost your business, feel free to contact us so we can get you started on your vision!

  • Contact Us
  • Telephone: 888.679.2201
  • Address:
    BrieBug |
    12596 W Bayaud Ave Suite 201 | Lakewood, CO 80228