rafaelsalguero / angulartypescriptskeleton Goto Github PK

##Angular + Typescript + RequireJS skeleton ❤❤ with r.js minification! with Karma + PhantomJS unit testing! ###Easily starting up large-scale angular projects.

This project is built from the ground up to be as minimal as posible, while still be applicable to large scale applications

• Folder structrure Feature based instead of type based in order to avoid a single folder containing many unrelated files
• Auto generated require dependencies All files named requireme.ts are automaticly required, preventing a large, manually mantained dependencies file for controllers, services, ...
• Tasks npm scripts and node programs instead of grunt or other tasks runner eliminates an innecesary abstraction layer
• Routing included using ui.routing that supports neasted views and other goodies
• Cache busting for javascript and html files with an auto generated timestamp at each npm run build / npm start
• r.js minification run npm run deploy to get a production ready page

External global dependencies

• NPM - Node package manager. Install it from here
• Typescript Install it using npm install typescript -g
• http-server Used for serving the page. Install it using npm install http-server -g
• Typings Type script definitions manager. Install it using npm install typings -g

##Restore packages first!!!

• Restore packages with npm i --global-style

##Running the app:

• Serve the page running npm start
• Enter to localhost:8080 on your browser

##Minfying the app:

• Run npm run deploy
• Go to ./app_main_build/
• Serve the page with http-server
• Enter to localhost:8080 on your browser

##Unit testing:

• Run npm test for running all Karma tests
• Write your own tests in typescript by adding *.spec.ts files to test/unit folder

###Other tasks

• Set typescript to watch files using npm run watch Note: You will need to run the build task in order to regenerate requireme.ts files
• Regenerate requireme.ts files This files are generated when running the watch or the serve tasks but only once (no file watchers here), you can run it manually using node tools/build.js

###Install a new DefinitelyTyped definition

• Search the typing on name on DefinitelyTyped or by using typing search library_name -A
• Run typings install library_name -SA to install the package as an ambient dependency

##Use this repo as a skeleton

• Clone the repository git clone https://github.com/RafaelSalguero/AngularTypescriptSkeleton.git --depth 1
• Rename your project ren AngularTypescriptSkeleton My_Project
• Go to your project cd My_Project
• Reset git in order to avoid conflicts with this shallow repo

rmdir .git /S /Q
git init 
git add .
git commit -m "Initial commit"

##Structure overview:

• The folder structure is designed to be minimal and to have many small script files for every task and feature instead of a few monolithic files

app
  |--features
     |--login
        |--login.html
        |--login.ts
     |-- other features...
  |--main
     |--app.ts
     |--main.ts
     |--requireme.ts
  |--utils
  |--config.ts
index.html

• features folder

  • This is where your views (partials) and your controllers are hosted
  • Typically each feature is a folder with a single view and a single controller
  • Each feature is reponsable for registering its own routing states
  • Each feature should contain a requireme.ts file that will be automaticly required thanks to autoreq

• main folder

  • app.ts defines the app module and some helper functions
  • main.ts requires the autogenerated main\requireme.ts file, indirectly requiring all other requireme.ts files and boostrap angular
  • requireme.ts autogenerated file containing requieres to all other requireme.ts files in the project folder

• config.ts file

  • Contains shim dependencies in order to load libraries that doesn't implement AMD/requirejs such as AngularJS
  • Depends on main/main so that when this file is loaded, main.ts is executed