The ExpenseSvc will not only return the expense object, but also the expense’s parent category as well. This code will essentially provide our view with all the expenses currently residing in localStorage. $scope.expenses = ExpenseSvc.getExpensesWithCategory() To do this, let’s open the history.js file and add the following code to the History object: // get data from localStorage The purpose of the history page is to list all of our expenses and provide a convenient way to delete expenses. If we run our application at this point, the first page that we will see is the blank history page. To work with our data model, we will use the pre-existing AngularJS services that are located in the In the future, we could easily swap out these services to work with a RESTful API, SQLite, or some other technology for data storage. ![]() ![]() Luckily, the Expense Tracker’s data model is very basic and can be seen below: We also have a standalone property in our data model called Budget (not shown above) that has no relationships and is used as a benchmark for us to compare our expenses against. Data Modelīefore we begin creating the Expense Tracker app, it is important that we understand the data model. Lib/ -> 3rd party js libraries, including Ionic, Wijmo, and moreĪll of the controllers and templates in the project that we’ll be working with contain boilerplate code and markup, respectively, for convenience purposes. Templates/ -> angular view partials (partial html templates) used by UI-Router Services/ -> directory containing all of the app's data services Models/ -> directory containing all of the app's models Index.html -> app layout file (the main html template file of the app)Īpp.routes.js -> the main application module's routesĬontrollers/ -> directory containing all of the app's controllers An updated summary of the project directory (www) can be found below: www/ -> directory for the project The updated project includes all of the Expense Tracker’s front-end dependencies, templates, stylesheets, controllers, routes, and services. ![]() Rather than recreating everything, let’s instead download an updated version of part 1’s project from here. In part 2 of this tutorial, we will create some of the most important parts of the Expense Tracker sample using Ionic and Wijmo 5. In part 1 of this tutorial, we learned what the Ionic Framework is and how to create a basic Ionic project using the framework’s CLI.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |