Move from Server Based Application to Component Based SPA - Angular.js

Currently I have a Server Based Application running on MEAN Stack. I have node/express.js server and a backend API. Currently my structure is something like this:

Current Approach

Home Page
   |________ Home Controller (calls methods from service)
   |________ Home Service    (connects to API & Node/Express Server)  

Profile Page
   |________ Profile Controller (calls methods from service)
   |________ Profile Service    (connects to API & Node/Express Server) 

Now I am moving my App to a Single Page Application (SPA). So somewhere along the line of this:

        // route for the home page
        .when('/', {
            templateUrl: '/home.ejs',
            controller: 'homeCtrl',
            resolve: {data: function(homeService){

               return homeService.someMethod();
            }}
        })

        // route for the profile page
        .when('/profile', {
            templateUrl : 'profile.ejs',
            controller  : 'profileCtrl',
            resolve: {data: function(profileService){

               return profileService.someMethod();
            }}
        });

Now I have recently (yesterday) been introduced to the concept of angular .component(). I want convert the above SPA structure into a Component Based SPA.

My Questions:

1. How to setup and use components with angularjs Controllers and Services.
2. Whats a basic good architecture for setting up a component based SPA.
3. How do I connect components with my ngRoute and how to use services with components to get the data from API.