The code you have it available on GitHub, and now we begin to detail it. The uploaded project is ready for use with CATS, which is the IDE software I use for programming in Typescript and I have already introduced you.
In order to setup a project, there is nothing better that having a good file organization, specially if you are going to build a large app. So, put order into your files. Here you have the organization file in my template:
The .settings dir is build for CATS and in it, there is a file named config.json where all configuration of the project is saved there.
The app dir
The whole app is inside the app dir, that also is divided into several dirs, each one with its function:
- css: for the style sheets
- fonts: are the Bootstrap fonts
- templates: where you can store the HandleBars templates.
- ts: Typescript files
- typings: is for the TypeScript definition, based on Definitely Typed.
This is my organization, but you can modify it in order to satisfy your needs.
In order to work with HandleBars using RequireJS, you need to use some RequireJs plugins that you need to setup in the configuration file for RequireJS.
In the config gile you can find also the requireJS plugins to be used, and one of them is HandleBars, a cool plugin in order to use templates.
This is the file where the app starts, defined at the end of the config.ts, with the instruction require[“app”].
You need to reference to jquery, requireJs and Bootstrap, and use them correctly. It is also important the reference to menu.ts, where the app has the funcionality (I name menu.ts because apps normally have a menu with several options and to give some order!).
This is the file where you have to start coding with Typescript. The class MenuApp is where you start writting functions of your app, becuase the template is ready to go!!
I would like to mention the import of jQuery using require, and after that, you can start using jquery. Also, a variable (at a module level) is defined to put our starting values for the app.
once you load the template in the browser, you will see the message in the console that Template has been loaded!
Last, the HTML
The last file is the index.html with the HTML code. The most important part is at the end of the file, where RequireJS and the config file are loaded!
Inside the HEAD tags, you declare the use of CSS, and the scripts are at the end.
This is the first version of the template, and I bet there will be modifications and improvements in the next months, but untl now, you have a nice template ready to go using TypeScript, HTML, CSS, jQuery and RequireJS.
In the next entrance I will put the template in action!