Tiny Angular app written in Typescript perfect as boilerplate.
Prerequisite: You need to have nodejs npm and git installed
- Clone or download the repo
- Run
sudo npm install -g gulp bower tsd
( install global tools ) cd
into the project folder- Run
npm install
( install project specific tools ) - Run
bower install
( install frontend dependency ) - Run
tsd reinstall
( install Typescript definitions ) - run
gulp watch
(if you want build and serve the frontend and automatic reload the browser in case of changes, good for development) - or
gulp
( build frontend ) andgulp serve
( serve thedist
folder ).
Note: if you want to change port of the statci server go to gulp_tasks/gulp.serve.js
file
###Folder structure
- src folder contains the source code, here is where you need to work
- dist folder contains the deployed folder this is what is served when you run
gulp serve
orgulp watch
- in the
src
folder the app is bootstrap in thecomponents/app.ts
file - in the
src
folder each component has its own folder containing controller and view. So a home controller will have:components/home/home.ts
andcomponents/home/home.html
###Tasks (Gulp)
- The app use Gulp as task manager, mostly you will use
gulp watch
andgulp
. You can see all the tasks in by runninggulp help
. - The configuration for gulp is in
gulp.config.js
file.
It supports sourcemaps for Typescript
###Frontend library dependency manager (Bower)
- Third party libs are managed with Bower. It comes down to two basically commands:
bower install <package>
andbower update
. Bower keeps track of these packages in a manifest file, bower.json.
###Typescript
- This app is written in Typescript.
- The Typescript Definition are managed by tsd and are downloaded by tsd in the folder
typings
. - For manage type definitions follow the guide on tsd anyway comes down to two main commands
tsd install <package> --resolve --save
for install andtsd query angular*
for search. - After you download type definition you need to add the reference the file
src/_all.d.ts
contains all the type definitions references
Useful resources for learn Typescript and Angualr:
- http://kwilson.me.uk/blog/writing-cleaner-angularjs-with-typescript-and-controlleras/
- https://github.com/tastejs/todomvc/blob/gh-pages/examples/typescript-angular/js/controllers/TodoCtrl.ts
Very very good read on folder structure and Style guide