A seed project for AngularJS apps written in TypeScript.
This project is heavily inspired by angular2-seed
- AngularJS 1.5.x
- Angular New Router (out-of-date, awaiting angularjs 1.5.x with the new router to update)
- SystemJS
- jasmine
- jasmine-matchers for handful extra matchers
You can find some useful recipes (eg. how to test $timeout and $interval) here:
app
|-- components
|-- common
|-- common.config.spec.ts # angular values and constants
|-- example
|-- example.controller.spec.ts # $interval and $timeout with jasmine spies
|-- example.module.spec.ts # injection and logs
|-- example.service.spec.ts # angular services and Date
git clone https://github.com/soulsoftware/angularjs-ts-seed
cd angularjs-ts-seed
npm install
Node should automatically install:
- typings with TypeScript definitions
- gulp-cli that should show the list of the available tasks, with the description of the main ones
You can replicate these behaviours by running the following commands:
# If the tools have not been installed
npm install --global typings gulp-cli
# If the TS definitions need to be updated
typings install
# If you need information about the main available tasks
gulp -T
If you need support for using the afore mentioned tasks, you can run:
# shorthand
gulp <task> -s
# full version
gulp <task> --support
You can generate a scaffolded component by using the following command:
gulp component --name <componentName>
If you are ready to test and run the application:
# Unit test with PhantomJS or Chrome
gulp test
# Dev run (default task)
gulp
# Dev run (default configuration)
gulp serve
# Prod run
gulp serve --prod
# ... or
gulp serve -p
The new component generator:
gulp component --name about
will create the following structure:
app
|-- components
|-- about
|-- about.css # styles
|-- about.html # main template
|-- about.ts # entry point for imports / main definition
|-- about.controller.ts # main controller
|-- about.module.ts # angular module
|-- about.spec.ts # unit test specs
components.ts # *update manually* to register the module
Then, you can link this component to a specific route, by using it in app.ts
.
To enforce the adoption of best practices, every build begins with lint tasks.
In addition, you are encouraged to format your code [Shift+Alt+F]
before any commit.
The use of factories is deprecated, because of the Object Oriented paradigm adopted.
TBD
MIT