Simple login example with Ionic and AngularJS

by - April 02, 2017

Setup the project

Go to your command line and start a new ionic app:
BTW: the –lab flag is quite new and shows how your app will look on ios & Android. Epic stuff the guys at ionic are creating!


Modify our template

As we want to display our login page before the tabs you see right now, we must add a new file in the www/templates folder, named login.html with this content:
So here we have a simple view, a small login form and a button. We will assign everything needed in the controller later, for now lets add our route so we can see our view the first time. Therefore, open up the app.js and add this state to the already existing states:
You can run your app now, and you should see a view like this:
ionic-login1

Adding the functions

BUT NOTHING WOKRS RIGHT NOW? Yeah, how shall things work without a controller? So change our state to:
As mentioned from a comment (thanks to Matthias!), we have to set our fallback route to /login, so that our login get’s called as first route. As Matthias said, this is not the best way for production apps, but for now include this below our states to make our app work:
Now open up the controllers.js, and add our simple login controller:
Here we create our scope variable, which is connected to the form fields we created in the login. The action is already connected to the login button, so go ahead and try to login. For now this just logs the entered data. As you often want to verify the data with a server, we will create a simple service to verify the data. Open the services.js and add a new service:
Ok this is a bit of code, but no magic. We create our loginService with one function loginUser(), which expects the name and password of the user. Obviously the whole promise construct is over the top for this simple use-case but when you want to verify the user to a REST server, you need to make it async. Therefore, it’s better to have it now already!
So in this case, we grant access to user/secret, and resolve our promise if the credentials fit our expected user details. Otherwise, the promise gets rejected.
The lines 12-18 are just a bit of syntactic sugar. I like the promise to have a success/error function, otherwise we could just use .then(..) and check the result, but with success and error the code is better to read in my opinion.
As result of our login function we return our promise, so now we must include the service in our LoginCtrl. Change our controller to this:
So here you can see how we use our service and promise correctly. First, we need to add the LoginService dependency, the $ionicPopup dependency for a simple popup and the $state for the transition to the next view. The login function now calls the loginUser function with the username and password entered in the form. Here we can use the success() and error() function for handling the login. If the credentials are as expected (user/secret), we navigate to the normal starting point of the tabs template, tab.dash, using the $state. If the credentials are wrong, we display a simple alert popup.
Now serve your app and try to login. EPIC! It just works 😉

You May Also Like

0 comments