Using angular-fullstack structure

Question

I have installed angular fullstack and need to follow the same structure for components.

angular-fullstack

I get no error but HTML does not get rendered either.

This html rendered is to be rendered as soon as the app loads i.e at '/', so where do I set the state for this? I have a controller file ,an html and a javascript file.

music.js looks like this:

'use strict';

angular.module('Todo')
    .config(function($stateProvider) {
        $stateProvider
            .state('music', {
                url: '/',
                templateUrl: 'app/music/music.html',
                controller: 'MusicCtrl'
            });
    });

Since I have '/' in URL, I supposed music.html would load at that. But it does. It gives a blank page.

In the default structure that they provide, they have a file that loads at this URL. I have commented out that part and though it should be good to go.

Am I supposed to make changes anywhere else for it to render? I believe I have code in place and there are no erros as it worked with express directory structure.

Can I get some pointers on using angular-fullstack generated by yeoman?

What else do I need to do to render it at the given url?

Answer 1

With generator-angular-fullstack you don't need to manually add routes. You can use

yo angular-fullstack:route myroute

to have the files generated for you. You'll be asked to specify the directory for the generated files and the url route.

In your case answer '/' for the latter, then delete the 'main' folder in /client/app. The route '/' will now be left pointing towards the boilerplate files you just generated.

You can then copy the contents of your HTML into the newly generated HTML file in the sub-directory you named.