Setting up the App
Now that our development environment is setup, we can now focus on creating the TodoMVC application.
From their website:
Let's get right to it. We're first going to need an
$ touch index.html $ touch app.ts
Now, let's add some life to the
<!doctype html> <html lang="en" ng-app="todomvc"> <head> <meta charset="utf-8"> <title>Typescript & AngularJS • TodoMVC</title> <link rel="stylesheet" href="node_modules/todomvc-common/base.css"> <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> </head> <body> <section class="todoapp"> </section> <footer class="info"> <p>Double-click to edit a todo</p> <p>Created by <a href="http://github.com/mjw56/">Mike Wilcox</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> </footer> <script src="node_modules/todomvc-common/base.js"></script> <script src="dist/bundle.js"></script> </body> </html>
We're leveraging the markup from the TodoMVC project. Also, we're leveraging the CSS and base JS from the TodoMVC package that we installed earlier in the installing dependencies section. You should also probably repace the footer content with your own information. :)
Next, let's add the
app.ts file. This file will serve as the entry point to our application.
$ touch app.ts
Great, now, let's add angular to our project. Inside of app.ts, let's add our first ES6 import.
$ mkdir components
Alright, we should be all set to actually run the app for the first time. if you want to give it a shot, test out the grunt build task that we setup earlier...
$ grunt build
hopefully you should see an output looking something like:
Running "tslint:files" (tslint) task >> 1 file lint free. Running "browserify:proto" (browserify) task >> Bundle dist/bundle.js created. Running "connect:server" (connect) task Started connect web server on http://localhost:9999 Running "watch" task Waiting...
Now open your browser and go to a new tab. Open http://localhost:9999. You should see at least a page with a footer and some text from the TodoMVC app. Success! We have setup our build and we have a running app. Now time to add some components and make a fully working TodoMVC app! :)