Building and Running the Budget App from Indigo.Design

What you'll notice in the budget project is if I drill into the source file, you have the app. You've got the Budget app, and you have all of the screens that make up this application. The purpose of the Budget app is to ensure that you have a “best practices” view of how to build an end-to-end Angular application with Ignite UI for Angular, and it also maps to the Sketch drawings and the running prototypes in Indigo Design. So let's go ahead and get to our terminal, and let's run this app.

I'm simply going to do an NPM install, and this'll ensure that everything that I need from the requirements of this app are installed like Angular, like Ignite UI for Angular. Now that all of our dependencies are installed, let's go ahead, just do an NPM start, and this will compile, and we will run the app and check out how the Budget app actually looks and behaves.
Now that the app's compiled, it'll go ahead and open up in Chrome. So now that the Budget app is running, let's take a look and see what features and capabilities we have here. So, this is the main screen. It's going to show us our budget allocation on the left with our monthly and every six month expenditures. You notice on the right-hand side, we have $150,000 in expenses, and it's giving us where we're at last month and last year. From this screen, you can go ahead and add an expense. You can go ahead and verify expenses, and then from the left-hand menu, you can also do your budget management, which is again going to show a nice grid here. This is the Ignite UI for Angular grid. I can edit items directly from this grid, so if I want to change something from monthly to quarterly, I can go ahead and do that, and save the option.

And of course, this is a fully functioning app, so everything works really nicely, and you're saving data, and you can go learn not only how to use Ignite UI for Angular, but how to use Angular in general to build an application. If I take a look at reports, of course we have the Ignite UI for Angular data chart showing you a nice chart here with full Zoom support, touch support, et cetera. If I scroll down, it's kind of showing me the data in a grid that is in that chart. And again, on the left-hand menu, I can look at my profile. I can change a few properties here. My time zone, my default currency, and then of course the about budget.

So, you can use the Budget app as an example of how not only to learn best practices in Angular, but to learn Ignite UI for Angular, and to see how each piece of the Indigo Design system works.