AngularJS and WebApi Sample App
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.editorconfig
.gitignore
README.md
bower.json
gulp.config.json
gulpfile.js
package.json

README.md

AngularStartingApp

Hello World App for AngularJS and WebApi - Template for new Apps

About

This is a standard WebApi application with AngularJS and gulp build pipeline used for the frontend.

All the frontend client files are in the _client folder within the application.

The gulp compiled files are copied to the app folder in the WebApi application. Running the application from VisualStudio will automatically run the index file found within this directory.

The build and release pipeline of choice has to exclude the _client folder and include the app folder. See the sample configuraiton below that does this when using msbuild

<ItemGroup>
  <ExcludeFromPackageFolders    Include="_client" />
  <FilesForPackagingFromProject Include="app\**\*">
    <DestinationRelativePath>app\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
  </FilesForPackagingFromProject>
  <FilesForPackagingFromProject Include="index.html">
    <DestinationRelativePath>%(Filename)%(Extension)</DestinationRelativePath>
  </FilesForPackagingFromProject>
</ItemGroup>

Starting Fresh

Install node and npm
Run npm install
Run gulp build
Open Solution
Run Solution

Should Load.

Gulp Tasks

Gulp tasks download bower prerequisites, compile, minifiy and inject all the files. They also watch the files for any changes and automatically recompile and inject.

Running Gulp

gulp - runs default gulp task. Compiles the client app, starts a livereload server and refreshes when the files change.
gulp build - builds the client app without starting the watcher
gulp vs - builds the app and starts a file watcher. This should be used when running the app from Visual Studio.

Running any task with --env release will run a production build of the client app. This includes minifying and concatinating both client and vendor files

Running tests via Gulp

Gulp tasks are there. Description and sample coming soon

Gulp Config and Vendor Packages

Bower can be used to install any additional 3rd party packages for the frontend. Any packages installeda re not automatically added to the pipeline. In order to have the new pakcages consumed edit gulp.config.js and add appropriate vendor files to vendorcss and vendorjs properties.

"vendorcss": [
    "bower_components/semantic-ui/*.min.css"
  ],
"vendorjs": [
    "bower_components/angular/angular.min.js"
  ]