Build a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 2: Creating the User Interface

In part one of this series I discussed how to get up and running with an Ionic project. We configured our basic shell project, reconfigured our code to a more modern style, and prepared our user interface for a real implementation. In part two we will complete our user interface in preparation for wiring up our Azure Mobile Service backend in part three. Without further ado, let’s get started!

Create Our Goal Setter Service
Generally, when working on a new project, I prefer to start with my user interface and work backwards. By employing this front-to-back approach I find my backend API is much tighter, featuring only what is actually necessary. Since I am utilizing this technique we need to create a mock service to return some sample data in a similar structure to what we can expect our legitimate service to return. Lets do that now.

As you can see, I simply created some fake goals for testing purposes wrapping my ‘getGoals’ and ‘saveGoals’ data calls in $q promises. This was not necessary but it will allow us to write more realistic controllers that can remain unchanged when we swap our fake data calls with our Azure Mobile Service backend in the next lesson.

Create the Main Goal Controller and View
Now that we have our fake service in place, let’s create our main goal controller and view that will display the user’s goals and allow the entry of new goals for tracking. In Ionic, all of your views will be surrounded by the ‘ion-content’ directive. This directive fills the remaining space in between your applications sticky header and footer. The other components in my view are Ionic lists and buttons which look very presentable out of the box. This is one major advantage of using a framework such as Ionic.

Main Goals Screen

Please note that I have included moment.js to gracefully deal with JavaScript dates and lodash.js for utility in our statistics section. To install these libraries simply run the ‘bower install moment’ and ‘bower install lodash’ commands from the project root and include these references in your index.html file. Now, let’s provide the user the ability to add new goals to be tracked by adding a controller and view to create goals.

Once we have these components in place we need to update our routing to accommodate the new sub-view.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

Create the Statistics View
As the user completes goals, we want to provide them feedback and history regarding their successes and failures. Let’s create our statistics controller and view to display this valuable information to the user of our application.

Statistics Screen

Create the Welcome Screen
We only have one thing left to do, let’s create a welcome screen to provide basic information about our application and offer navigation into our main goal view.

Welcome Screen

That’s it, we are ready to start tracking our goals!

Conclusion
In this article we set up our user interface, employing fake data to ensure everything looks good. In the next part of this series we are going to sub out these fake service calls, subbing in an Azure Mobile Service backend. We will see just how easy it is to get up and running with a secure, highly scalable mobile backend and prepare our application for the final stage, adding authentication. For the full code from this article, please check out my GitHub page. Thanks for reading and until next time, happy coding!

[출처] http://briantroncone.com/?p=365