Angular Fullstack 1.3.0 released!

Testing and debugging your full stack applications just got a lot easier!

Added grunt support for Node Inspector, which is basically the javascript debugger from webkit (Chrome and Safari) for node applications. Simply can run grunt serve:debug to launch your server with an initial breakpoint and a new node inspector tab will open up.

The generator now also scaffolds a server side test folder that uses the Mocha test framework. grunt test will run through both your server side and client side tests, if you prefer to only run one group you can use grunt test:client or grunt test:server.

For more details on this release, see the changelog.

Read more about the Angular Fullstack generator.

Share Button
  • Scott Conklin

    I am fairly new to NodeJS and Angular and have spent some time just creating a simple CRUD app in each to master the fundamentals. In doing so, i came across MEAN and began to evaluate different generators in an effort to familiarize myself with what seems to be a great stack of technologies.

    I picked “Angular Fullstack” generator as my first one of these to wrap my mind around and while studying the architecture and layout i came across something that i can’t seem to fully master:

    The responsibility and role of the routing/templating systems between Node and Angular.

    In my small node CRUD app i built, I learned that you can set a default layout template and then use handlebars (my preferred templating engine) to inject views from my node routes into the body of the layout using a handlebar expression like so: {{body}}… I also do the same with partials in inject a header and a footer.
    eg:
    {{> header}}

    It would appear that AF is setting up EJS in similar manner but making no use of it, is that correct? As best i can tell, the default route is simply returning a full index.html file back to the client,with no parsing. is that right?

    If this is correct, is it so that Angular then triggers the app module which then runs the angular routes to get the views on the front-end?

    Could one do it the other way around?

    How would handle a standard header and footer kept in separate “partial” files.
    (looks like your definition of a partial is different than mine)

    I also do not fully understand what this controller function is for and when it would ever match:
    app.get(‘/partials/*’, index.partials);

    /**
    * Send partial, or 404 if it doesn’t exist
    */
    exports.partials = function(req, res) {
    var stripped = req.url.split(‘.’)[0];
    var requestedView = path.join(‘./’, stripped);
    res.render(requestedView, function(err, html) {
    if(err) {
    console.log(“Error rendering partial ‘” + requestedView + “‘n”, err);
    res.status(404);
    res.send(404);
    } else {
    res.send(html);
    }
    });
    };

    Thanks for any insight you can offer.

    • tylerhenkel

      The partials folder contains all the ‘angular’ partials. In app/scripts/app.js, the angularJS routing system will fetch certain partials when we change the url. Unfortunately, Express doesn’t handle subdirectories in the views folder, so we need to manually handle the rendering of those partials for them to work.

      Yes, index.html is just being returned as a full document, and not using ejs/jade partials to create it. The default templating for the project is done through angularJS ng-view.

      There’s several ways to handle templating. You can setup an includes folder in the views or partials folders, and mix those into your partials or index file the same way you would with any server templating engine. You could also do all your templating using partials through ng-includes/directives. Or you could swap out the router with angular-ui and use their nested view system. It’s up to you to decide which approach you want to take.

      • Scott Conklin

        @tylerhenkel:disqus
        thanks for the response. that clears a lot up.

        >> Express doesn’t handle subdirectories in the views folder, so we need to manually handle the rendering of those partials for them to work.

        I thought the angularJS routing system was fetching the partials.. Why does Express need to know about this and have anything to do with serving these up?

  • Christian Huening

    Hi Tyler, thanks for the greate generator!
    However I’ve got one question: If I scaffolded with an older version, how may I upgrade to the newer additions of your updates? Or is that not supported and I am not getting somethin here? ;-)
    I am also interested in updating to Angular 1.3.x. Is that possible? When I run bower update angular, from the scaffolded directory it only tells me I am on the latest version (1.2.11).

    Thanks,
    Christian

    • tylerhenkel

      With the latest version of bower, you can add a ~ to the angular packages version numbers in your bower.json, and then run bower update to get the latest version. E.g:

      “angular”: “~1.2.11″,
      “angular-resource”: “~1.2.11″,
      “angular-cookies”: “~1.2.11″,
      “angular-sanitize”: “~1.2.11″,
      “angular-route”: “~1.2.11″

      For advice on updating your project with the latest version of the generator: http://stackoverflow.com/questions/18480316/how-to-upgrade-existing-project-scaffolded-with-yeoman

      • Christian Huening

        Thanks, will try it now!

  • Christian Huening

    Hi again,

    what is the best way to switch from COMPASS/SASS to standard Bootstrap with LESS in a project? I’ve chosen to use SASS since it was the default option, but feel more comfortable with standard LESS now.

    Is there an easy way to change?

    regards,
    christian

    • tylerhenkel

      For now, you’ll have to install grunt-contrib-less and replace the grunt `compass` tasks with `less`. However, the upcoming 2.0 release will be adding support for less.

      • Christian Huening

        thx!

  • Christian Huening

    Aaaand Again ;-)
    I am having a quite weird error:
    I am trying to deploy my web app through TeamCity and Octopus Deploy onto my WebServer which happens to be an IIS 8 with the iisnode addon.

    The deployment path looks like so:
    1. Push changed to repository
    2. TeamCity gets triggered, starts build
    2.1 TeamCity executes “grunt build” to create the minified dist folder version of the app
    2.2 TeamCity executes NuGet pack to create a .nupkg file
    2.3 TeamCity pushes this NuGetPackage to Octopus Deploy, which then copies it over to the server and extracts it.

    this all works very well, but with one exception: The resulting index.html does contain a reference to “styles/vendor.css”, which is not present in the dist folder.
    As a result no bootstrap styles are applied to the page.
    Now I checked, that the NuGet pack command does pack all the contents from the resulting output folder. So it seems to be a grunt problem.

    Even more oddly: When I execute “grunt build” locally on my dev machine, everything is cool. However there also is the difference that the index.html in my local dist folder is not referencing “styles/vendor.css”, but ” ” instead.

    I am really lost here. I don’t get why the behaviour is so different on my dev machine and on the server. I tried on several dev machines (2x Win8 and 1 x Mac). It’s the same on every machine.

    I guess I am still not getting something about the overall toolchain here. Any ideas?

    regards,
    Christian

  • Jerónimo Carrizo

    Hello! IThenks for you framework look so good!

    I Only have a question related to WebSocket, I implement in my APP AngularJs with your generator, but I can’t configure the websocket work!

    I would appreciate if you would know as I can do it!
    Thenks!

  • Ouwen Huang

    Love your framework, absolutely love it.