Tutorial 2 : Ionic Authentication with Spring Security

Tutorial 2 : Ionic Authentication with Spring Security

Generate a new Ionic Application

If you don’t have Ionic installed on your machine run this command to install ionic npm install -g cordova ionic.
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 the 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:
www/templates/login.html

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:

As we want to display our profile page before the tabs you see right now, we must add a new file in the www/templates folder, named profile.html with this content:
www/templates/profile.html

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:

As we want to display our device page before the tabs you see right now, we must add a new file in the www/templates folder, named device.html with this content:
www/templates/device.html

In order to create singleton objects or functions AngularJS supports the concepts using services architecture. These services can be used within any Controller by just declaring them as dependencies.
www/js/services.js

Now open up the controllers.js, and add our simple login,profile and device controller and inject LoginService in the login controller.
www/js/controllers.js

www/js/constants.js

www/index.html

Run the server application

Downloas the server source code(lab1) from bitbucket:
https://bitbucket.org/intellitech-team/spring-labs/src/da6f67a63d9be72c51a38e516350815ac456e404/Lab1/?at=master

Create database with name and run the script in PostgreSQL database :

Now, run the application by launching the SpringBootApplication class using the command mvn spring-boot:run and visit and authenticate with one of the two users:
: username=user, password=user
: username=admin, password=admin

Run the Mobile application

Download Ionic source code from bitbucket and run the following command
https://bitbucket.org/intellitech-team/spring-labs/src/da6f67a63d9be72c51a38e516350815ac456e404/Lab2(IONIC)/?at=master
and run the following command

Author: Ayman Ben Amor

3 Comments
  • Posted at 6:33 pm, May 18, 2017

    It is not my first time to pay a quick visit this web site, i am browsing this site dailly and take nice data from here everyday.

  • Posted at 2:58 am, May 20, 2017

    For most recent information you have to go to see the web and on the web I found this site as a finest web page for most up-to-date updates.

  • Posted at 10:52 am, May 21, 2017

    Thanks for every other informative blog. Where else may just I am getting that type of info written in such a perfect approach? I’ve a undertaking that I’m just now running on, and I have been at the glance out for such info.

Post a Comment

Comment
Name
Email
Website