johnpapa/hottowel-angular

HotTowel with Angular (for NuGet)

Hot Towel Angular SPA Template

Hot Towel: Because you don't want to go to the SPA without one!

Want to build a SPA but can't decide where to start? Use Hot Towel Angular and in seconds you'll have a SPA and all the tools you need to build on it!

Hot Towel Angular creates a great starting point for building a Single Page Application (SPA). Out of the box it provides a modular structure for your code, view navigation, data binding, separation of services, and simple but elegant styling. Hot Towel provides everything you need to build a SPA, so you can focus on your app, not the plumbing.

Learn more about building a SPA from John Papa's videos, tutorials and Pluralsight courses.

Installing via the NuGet Package

Hot Towel Angular is a NuGet package that augments an existing empty ASP.NET project. Just install using NuGet and then run!

Install-Package HotTowel.Angular

How Do I Build On Hot Towel?

Simply start adding code!

1. Add your own server-side code, such as Entity Framework and Web API (which really shines with Breeze.js)
2. Add views and controllers
3. Update the navigation routes in config.routes.js

Add Rich Data with Breeze

Add rich data features using Breeze to Hot Towel Angular, via NuGet.

Install-Package HotTowel.Angular.Breeze

Resources

• SPA Resources
• Hot Towel Angular on GitHub
• [Hot Towel Angular on NuGet] (http://nuget.org/packages/HotTowel-Angular)

Hot Towel Angular for any Environment

• Hot Towel Angular Seed/Starter

hottowel-angular's Issues

Updating to latest packages in VS2015 kills routing

background:
I'm just getting started with AngularJS and I'm using HotTowel as a starting point.
I've actually done a fair amount of work with HotTowel and have several features built for an application I'm doing. What led me to this problem is trying to get ui-grid in to my application. It blows up. Looking at HotTowel it seems to have been a while since it was last update, but the Angular stuff (and other libraries) are full steam ahead. When I update all of the Angular packages HotTowel's navigation stuff stops working. I'm going to start chasing it down, but I thought I might ask if somebody else has already fixed this issue to save myself some time.

Reproduction:
I'm using VisualStudio2015. My project is an ASP.NET Web Application (.NET Framework) w/ just MVC added.
For the reproduction of the issue I used the above in a new solution. I then went to manage NuGet packages and update everything to latest, there should be 10 updates. This requires a restart of Visual Studio.
Once I'm back in I return to my solution and bring up Manage NuGet pakages again. This time I go to Browse and find HotTowel. This brings up a short list. I select HotTowl.Angular by John Papa (~73.6K downloads, version v2.3.3) and install it. Allow it to overwrite the favorite icon.

After NuGet finishes go to the solution explorer, find Index.HTML, right click on it and select "set as start page". Now, open Index.html and change line 51 to say "<script src="scripts/jquery-3.1.1.js"></script>" and save it.
Now do a rebuild all and then run the application using Google Chrome (issue will occur with any browser). Everything works great. You can switch between dashboard and admin.

Stop the application and return to manage nuget package. select the update tab and update all of the packages. You'll be asked about overwriting some map files, go ahead and do it.

Do another rebuild all and then run the application.
The dashboard will come up as before, click on admin. You will see dashboard fade out and then fade back in. This is the issue. the routes appear to be broken.

At this point there is nothing custom in the solution. We have just updated all of the packages to their latest releases. HotTowel, however seems to have a gone stale.

Being new to Angular, and HotTowel. I'm not sure where to start debugging this.
At a guess the issue is with how the code in config.route.js sets up the routes.

Can somebody please give me some hints on how to fix this?

TIA

Responsive UI issue with Menus

Repro:
Running Chrome 32.0.1700.102 m,

shrink the browser width-wise until the side menu collapses to a drop down
Click the menu so that it drops down
Click the menu so that it closes (no navigation)
widen the browser window so that the menu appears at the left again.

Results:
The menu is blank (no navigation to dashboard or admin)

Nuget Package Not Working with vNext VS2015

First, thanks for the great project!

I created a new vNext project using VS2015 RC1. I installed HotTowel Angular nuget package but none of the folders were created.

How can I get this working?

Any help would be appreciated!

Thanks!

Error with ng-annotate-main.js when running "gulp build"

I get the following error when running gulp build on Windows 7 x64

C:\Users\Developer I\Documents\Dojo\HotTowel\HT101\node_modules\gulp-ng-annotate\node_modules\ng-annotate\build\es5\ng-annotate-main.js:330
target.$methodName = method.name;
                   ^
TypeError: Cannot assign to read only property '$methodName' of false
    at matchRegular (C:\Users\Developer I\Documents\Dojo\HotTowel\HT101\node_modules\gulp-ng-annotate\node_modules\ng-annotate\build\es5\ng-annotate-main.js:330:24)
    at match (C:\Users\Developer I\Documents\Dojo\HotTowel\HT101\node_modules\gulp-ng-annotate\node_modules\ng-annotate\build\es5\ng-annotate-main.js:36:66)
...

License

What license this project has?

getNavRoutes() in sidebar controller uses invalid compareFunction

In sidebar.js @ line 21, compareFunction should return '< 0', '0' or '> 0' - not true or false.
Replace ">" with "-" to correct.

Line should be:
return r1.config.settings.nav - r2.config.settings.nav

How to disable bootstrap responsiveness?

Is there an easy way to disable the bootstrap responsiveness in this template. I want to use this for a desktop only application.

Question : How can i add 3d party modules

I have added
https://github.com/thenikso/angular-inview
can you please provide me the steps to add new 3rd party plugins

Multilevel sidebar?

I'm trying to figure out how the routes interact with the sidebar. I need a multilevel (well, two would be enough for now) sidebar but I'm really at a loss for how this is supposed to work. Has anyone done this and can you provide some tips or code? Thanks

1.5 - ngNewRouter

Any plans to update to the 1.5 release with ngNewRouter?

Errors out with jquery version > 2.1.1

I added an empty web app in VS 2015, installed HotTowel.Angular, upgraded all the packages except jquery- works fine meaning I can browse the index.html fine. As soon as I update jquery to any version higher than 2.1.1, I get an error. Has anybody seen this before? Thanks.

CSS question

I love the template but I'm having a problem with the bootstrap CSS. If I place a button on the dashboard I lose the rounding functionality. Bootstrap should provide this but it feels like its getting overwritten some where. Any ideas?

shell.js clears spinner before controller does on first load

It seems, as it stands, activateController function on shell.js broadcasts the controllerActivateSuccessEvent before any under lying controller has a chance to complete?

To reproduce, put breakpoints on this line in common.js and hit F5

$broadcast(commonConfig.config.controllerActivateSuccessEvent, data);

It is reached twice, firstly by controllerId "shell", then by "dashboard"

Not sure what is the best fix here? I guess a simple one is

if (controllerId !== 'shell') {
$broadcast(commonConfig.config.controllerActivateSuccessEvent, data);
}

But not liking that so much.

ccScrollToTop directive doesn't work in IE 11

On a windows 7, 64-bit machine with IE 11, I encountered this issue wherein clicking the scroll to the top chevron up icon doesn't work. My fix was this:

From:

$('body').animate({ scrollTop: 0 }, 500);

To:

$('html, body').animate({ scrollTop: 0 }, 500);

HotTowel.Angular not working after installing

Hi John,

I was testing HotTowel.Angular package. I have downloaded this package from Nuget. It Installed all the required components. But when i opened the index.html page in chrome(any browser), it kept showing me {{vm.busymessage}}.

When i opened the developer tool i found many 404 and dependency error. However, in nuget tool, it flagged the app installed successfully.
Below i have attached the screen shots.

Thanks,
Rahul

sidebar isCurrent() issue

Hi Jhon,

I have both 'Item' and 'Item category' as two route titles in config.route.js.
The issue is when I select 'Item category' it also highlight 'Item' in side menu too.

I changed the sidebar.js

return $route.current.title.substr(0, menuName.length) === menuName ? 'current' : '';

as

return $route.current.title === menuName ? 'current' : '';

and now works fine.
Keep up the great work Jhon.

Thanks.

Another Responsive Issue

Question : Do you plan support for TypeScript ?

Hi John,

Thanks for latest change in the template.

I was wondering, do you plan to create a "HotTowel-Angular-TypeScript" version? I would really love to see a TypeScript + requirejs version from this application because I tried building a demo application using all these frameworks, but I'm stuck at requirejs.

Best regards,
Stef

base url for app

Is it possible to set a base url (a bit like a java context) for the app? i tried the usual approaches, configuring the app with use(), making the main app a sub-app of a parent app, using express().Router, to no avail. If you have any suggestions or even better a ready-made approach, that would be great.
Basically I'd like to run the entire app at http://localhost:3333/foo

Issue while calling REST api.

I have a simple code which is calling RESTful Api to retrieve data from server.

$http.get('http://localhost:53384/api/contact').
          success(function (data, status, headers, config) {
              log(data[0].Id);
              log(data[0].Name);
          }).
          error(function (data, status, headers, config) {
              log('Error Occured');
          });

Same code is working fine in Internet Explorer but in Mozilla and chrome its executing .error promise.
Would you please resolve this?

Update for angular-style-guide

Just wondering if this nuget project is likely to implement the angular-style-guide? similar to generator-hottowel style, structure, assets and all the fun things we find in generator-hottowel like blocks, module routes etc etc. or has this project been abandoned for now?

Unit tests that fail get displayed twice in the browser

To reproduce, simply make a test fail and then run gulp serve-specs

Gulp file addition would be nice

I heard you talking about Gulp on http://devchat.tv/adventures-in-angular/006-aia-build-processes and it would be great if this project had a built in Gulp file that I could learn from.

HotTowel support for grunt integration

Hey All,

Just starting out with hotTowel , wanted to know if I will be able to integrate Grunt with it?

Thanks

ie compat mode when site added as "intranet site" and x-ua-compatible = chrome=1

i think chrome=1 can go [1] and x-ua-compatible has to be the first meta tag in the head. [2]

[1] = https://developers.google.com/chrome/chrome-frame/
[2] = http://stackoverflow.com/a/9624500/295267

[1] is simply unnecessary as chrome frame is dead
[2] is to work around when the site is added as intranet site on IE which puts the site in compat mode automatically. 

Using without ASP.NET

I heard about HotTowel on Yet Another Podcast and am interested in taking a look at your basic seed app, but I'm not an ASP.NET user and not really interested in becoming one. Can I just extract HotTowel-Angular/NuGet/HotTowel-NG to use as my starting point or does the IDE do some additional code generation that I should be aware of?

the views path are absolute and will return 404 if the app is served from a subdirectory of the domain