Angular transition to 2.0, part 2

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.

This video is part 2 of the full transition from Angular 1.x to Angular 2.0. Part 2 will focus on Angular 1.x controllers/views to Angular 2.0. This video covers reorganizing the project structure and creating our first component base directive by refactoring the existing dashboard page.

Today what we are doing, is we are going to refactor our project that we created in video 1 and were going to create our first component-based directive so before we do this though were going to go ahead and refactor some of our existing code and were going to go ahead and more our dashboard and our admin into the app folder and create a new folder here called features. We like to separate our feature pages and put them into a folder so that they are not cluttering up the rest of the app. So in our case here just going to pulled him into there. Great! And same with Admin. Alright Great! Now with that we also want to create a module.

Right now if we look at our module it’s referencing admin and dashboard directly and we really don’t want that. We want to have our app module be cleaner and it only deal with top-level components. So we will be changing this out to be app.features. The only problem with that is that we do not have an app features yet. The next thing we need to do is go ahead and create it. Alright so I’m going to create a new JavaScript file inside the features folder called features.modules.js. The first thing that I’m going to do here is we want to use an ify so this prevents us from accidentally contaminating the global main space. So Great! There’s an ify.

Now were are going to add our use strict and we are going to go ahead and declare a new module, Angular.module.app.features. Great! Don’t forget to add the braces there or the square brackets so that we are declaring this as a new one, not as an existing one. We have our feature module. When we look at this here we have our features module. So let’s go back and look at our geo. We’ve broken something. So also what happens with a hottowel project as we make our major changes like this? No mod and this whole co process doesn’t pick up all the changes so we just need to restart it. Let’s see if that doesn’t fix it for us. Now we have some problems here that we are on a 404 or what I found are great. Let’s see here.

We are going to go ahead and start refactoring some of this. Now part of the problem is I know with this is that in a route we have our template url and unfortunately we have moved so that template url is no longer valid so let’s go ahead and change this in both spots and tada we are back. So notice I didn’t have to refresh, it automatically picked up my changes and were back in business so that’s the first step. Now part of the problem here is where in our module here were however still under our module app admin well that would be okay except as we add 50 pages to this project this is going to get very cumbersome to find all of these and manage them. What I would rather do is go ahead and change them there so we are going to go ahead and make these part of the features and now we have to go change these in a few spots. So there’s that. We are going to have to go find them in our spec here and great. So quite a few changes to get this all up and running. Oh we are going to need to add it here and here. So that was just the admin one so let’s go ahead and repeat this for the dashboard. So again since we are changing the structure here were going to have to go ahead and make these changes and just bite the bullet and get it done right now so that all this code will work.

The great news is that we have tests that we can run and validate that we have all of this done correctly and it will run properly. So let’s go ahead and choose that there and there. So we are good in our new route spec. So that’s were its expected that from and excellent. So now we come back over and were broken. Oh no what happened? Well it’s actually pretty simple. We don’t have any modules left anymore. What do you mean by that? Well what has happened here before our modules were declared in here admin and dashboard. We need to move those out and place them into the features so still not right because they are no longer directly under their app, app features. So great refresh and look we are back. So what’s truly interesting about this is that we can add and remove features just by removing the module. So put that back in and it refreshes and oh we are still on 404. So we go ahead and switch that. Great. Now we are back. So are in our case here this will allow us to bring in and out of features of the application just by adding or removing from the module.

Now that we got our features refactored we’ve got our admin and our dashboard page in there now and everything is still working. So now our next level is were going to create a new directory called components to place all of our directives that have HTML templates with them and place them in the components directory so that also with this we are going to create another folder and call in people and what I want to look at here is I want to take what we have raised here and make this a reusable component. Let’s say the company that were working for decides that they want to make this a reusable component and we want to have it on 3 or 4 pages. Now we could easily copy the code from page to page to page and make that work, however that is really bad practice. So let’s go ahead and refactor this out and create our first directive base component. Alright so first we are going to create a couple of files, people component directory and didn’t want to take just JavaScript and I want just JavaScript file. This first one I want is people.directive.js. And I’m just going to copy this guy. Alright! There we go. Paste them again and I want a people.html. I can change the file type on the fly and the last one I want here is module. Oh the one of things I almost forgot is to create a components.module.js. Great! So you want to go ahead and just like we did in features and create a components module so this component module is going to use an ify. And if you want to know why we are doing this and you want more detail on it please go look at John Papa’s style guide, it covers this in detail, covers all the different reasons why you want to do this and why you want to do this. So great and your module and you want this to be app.components.

We already know that the first module that we want to require in is going in here. Go ahead and add this in here. We know that we are going to want our people component and we can go ahead and add that module in there. It automatically loaded. Oh we got a little mistake there. Great! Thank you web storm for pointing that out to me. Alright. Fantastic. So now we have the components module and actually just kind of copy what we have here. I’m going to paste it into the people’s module just in the interest of saving a little bit of time. I think we are missing one other thing here, the semi colon. So let’s go back over and fix that one. And let’s go back over here and create this one. Nope got that one right. Excellent! So now we have our people module as part of components, the components module loads it. Oh we forgot we need to go over to app module so now we got core widgets features. We need components. So go ahead and add that in, otherwise what will happen is that our index html here. I think we should see already that it may not be in there yet since we didn’t add it to the module. However at some point this will pick up that change and add our quote in there. I’m not sure what mysteriously happens. We actually may need to see exit this out and reserve it up. Great! So let’s see if it actually added. Oh look here, so there’s our components module and here is our people module. I didn’t have to do anything. It automatically added those to the project for me. Absolutely fantastic. Alright so let’s go ahead and write up our people directive. So again were going to use an ify. Great! So we have that. And now were going to create our directive. And so were going to use our existing module components.

We are going to declare a directive. And were just going to call it people. And often what you see is we go ahead and use square brackets and we define our dependencies and we would then pass in the function. We would want to marginalize this code as well a little bit and keep this a little more simple. So in this case here I’m just going to type in people directive. We don’t have a people directive yet. That’s ok. We are going to copy that and the first thing we are going to do is we are going to have a named function called people directive and now these two match. Great! Why do we do this? Well best practices tell you and again this something you can read on john papas, it is something we have also found on our own that using named functions, things just work better. Why? Well let’s see if we have multiple functions in our file here. The problem is that functions can change so now we have to start using stuff like var self = this and now self.callsomeotheraction. This becomes you know monotonous and difficult. So instead we just use name functions. I can just call the function assuming again here. You know I can just call it by the name and not worry about the name and what not. That’s why we move towards it. If you look at John Papa’s guide you can also find some other reasons that he will talk about why that’s the best practice. So now what we need to do is we have our people directive.

We need to return what defines the directive. So here is the definition. Since this is a component based directive it has its own template, we want to restrict it to element. So well go ahead and use either and go ahead and give it its template url and that’s going to look like app/components/people/people.html Right! And were going to go ahead and add our isolated scope. In this case here, it is a little premature. However we are going to need it for later so we are going to add it now by putting this in here it is going to isolate the scope from the parent and allows us at a later point where we can actually place in stuff to our directive to use later. Controller, were going to. We don’t have anything called people controller. Notice also People is capitalized. There’s some reasons for that. We will cover in a second. Controllers. We want to use the controller as syntax so we can get rid of scope. Scope is going away. Controllers are going away. So we want to do everything that we can do to repair for angular 20 when those go away it 20. We are not going to have them and we need to be use to already being away from them. Now as you know with our dashboard and our admin teachers, they have controllers and were not going to be able to get rid of those controllers quite yet so what we are going to do is make them as thin as possible so that when they do go away we don’t have as big of a refactor to handle. Alright so now we are going to add bindtocontroller: true. What this says is that anything that we pass in on the isolated scope will automatically get bound to vm. vm also stands for ViewModel. We want that so that we don’t have to take the extra step to bind each one of those items from vm from the vm scope to just vm. Whatever. So that’ll save us time later.

Alright, again I’m going to create another named function called Peoplecontroller. Now we do this as people controller with a capital P. so that the letter does not come back and say that this is invalid format. I do not remember what the exact areas over by doing it this way it’s used as a constructor. Because it’s a constructor it allows us to do this and not complain about it .If you want to find out what it does otherwise you could use a lowercase. Change it up here as well when the winter runs you’ll see that you actually get an error regarding this and that the best way to handle this is to use a capital. So in our controller here, this is where we’re going to actually start moving our functionality from dashboard over to here. However, one of the other things that we are going to want to do.

You have a couple different options here, you could use m=ng.inject or in our case here we are just going to use $inject for the purpose of this demo or you could do it either way and maybe more later demos will show how to do it the other way as well. So the one thing that we know we need is data service this. This is where all the data is coming from. Bring this in and have injected into the people controller and this is what we’re using to mock the data and simulate that it is coming from the database. So let’s see we are also going to add var vm=this. Why do we need this? Well the idea here is that we want to have a ViewModel in our controller that also maps to the ViewModel that is going to be used in out HTML. That way we don’t get confused. We could call this anything. We could call it bob. We could call it ctrl or you know. I’ve seen all sorts of stuff. We prefer to go ahead and call it vm. The same vm that we’re thinking about in the controller for this directive is the same vm that we are using in the HTML. It helps us keep things straight.

Alright, so now we need to do is we need to look at our dashboard controller? What do we need from here? What can we refactor out of here and pull over to the other side? Well, the first thing that we could use is getPeople. Let’s just go ahead and remove this function. This is going to cause some other stuff to break. However it’s a starting point. We are going to pull this over and place it here. And also we are not going to need this People array anymore. We will just add it over here. Alright and now the problem is that we have this promise that once it resolves you want to have this logger info say that the dashboard is active. That’s great, we can still do that to remove getPeople. That will no longer be part of that and the only thing we will have is just get messagecount. When that one resolves it will go ahead and display that message. We will leave everything else in here can stay in here and then we are good to go. Excellent.

So coming back over to our people directive. Now what we have is a directive that is defined, it has a controller that is capsulated and this controller is exposing people onto the ViewModel. So this will be available vm.people available in the HTML to be able to use and you can see here I like to my indents on the second line. You may like it differently. Great. Paste that to reformat it. Alright so that looks like what I want. Their case here we’re going to get data back, were going to then set that data to ViewModel people object and for whatever reason it’s also turning this, I believe that someone or something once calling this directly which it was before. Yes. So before it was being called by the screen handled here by these promises so we needed to go ahead and return that still unresolved, the data itself.

Realistically we actually don’t need that anymore and we don’t really need the return here because were not having getPeople actually return a promise to anybody. All we really want to do is adjust the data. Alright, great. So I believe we have everything there. Now the only problem is we don’t have any HTML. Ok so let’s go look at the dashboard HTML. And we can see right here. First name, last name, age. So this is our component and right now we’re just going to go ahead and grab the whole thing. The header and everything and go ahead and pull this out of here. And now when we come over here. Oh it’s gone. Okay so come back over to webstorm. And let’s go ahead and paste this guy in. alright lets go look at our page. Still gone. Oh yeah. We need to go ahead and add our directive to the dashboard. So now we are going to add that. Well we don’t have any data. Its rendering but there’s no data. Why’s that? Well because we are not actually calling. Let’s go find our people directive. We are not actually calling the getPeople method. Now one technique we could use here is we could go ahead and just call getPeople directly. However, this can be a bad technique because of testing what happens here is before we can get the controller all set up and get everything mocked, potentially that this fires before the testing actually can run. And spy on it and what not. So it’s an okay technique. However not ideal so our preference.

We will go ahead and expose this method onto the ViewModel and in that way we can get to it from the view model. So a couple other little things that we are going to have to fix. Let’s go ahead and I’m going to place it here on the table. That’s closest and as we refactor that I don’t want to forget about it later. Vm.getPeople. Alright great. Let’s go look at our template here. There’s our data. Alright. So as you can see. Here is our repeat, it’s using ViewModel from before. Here is our people, our ng and it is actually calling our directives. We get our data. So what we’ve learned so far is how to go ahead and refactor out our widget, our reusable component that we can then use over and over again. We could add another one. So we want to go ahead on the dashboard here. If we wanted to add another row for each we could do so. Now we have got two people and a reusable component and we are able to do so very easily and without breaking the existing application. Great! So this is everything for this video for this lesson.

Stay tuned for step 3 video 3 on this. And what we’re going to do is going to create a news directive very much like how we’re doing this one and reinforce the techniques that we just learned. Alright thank you have a good day.

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