JavaScript for Line of Business Applications
596.1K views | +0 today
Follow
JavaScript for Line of Business Applications
Keeping track of current JavaScript Frameworks that help design your clientside Business Logic Layers.
Curated by Jan Hesse
Beam to my Inbox:
Your new post is loading...
Your new post is loading...

Popular Tags - Filter using the Funnel

Current selected tags: 'AngularJS', 'Ionic'. Clear
Scoop.it!

Ionic Framework Tutorial

Ionic Framework Tutorial | JavaScript for Line of Business Applications | Scoop.it
What You Will Learn:
  • How to create and build (compile and package) an Ionic project using the CLI (Command Line Interface).

  • How to start from one of the Ionic starter apps

  • How to build a modern mobile UI using Ionic components such as side menu, cards, action sheets, etc.

  • How to create a service using the Angular resource module (ngResource) to access REST services

  • How to use controllers

  • How to use routing

  • How to login with Facebook, and publish information to your feed

Jan Hesse's insight:

https://github.com/ccoenraets/ionic-tutorial

No comment yet.
Scoop.it!

How To Handle User Authentication With AngularJS

How To Handle User Authentication With AngularJS | JavaScript for Line of Business Applications | Scoop.it

Implementing a login and user authentication system for your AngularJS app seems to be one of the hardest problems people encounter. My article on a simple login with Ionic and AngularJS is the far most viewed article on this blog, every day! As the mentioned article only describes a basic system for a very low level security, this article will highlight everything you need for a complete user authentication and login inside your AngularJS app!



In particular this means, this article will show you how to:

  • Log in a user and store the user session (Token based auth!)
  • Protect your routes based on authentication status and role of the user
  • Notice when an unauthorised request was made and a new login is required
No comment yet.
Scoop.it!

Building Multi-platform Real-time Mobile Applications using Ionic and Firebase

Building Multi-platform Real-time Mobile Applications using Ionic and Firebase | JavaScript for Line of Business Applications | Scoop.it

This article introduces the capabilities of these tools and how to use them, and even provides some code examples.


The first thing we need to do is install Ionic. Follow the installation instructions provided on the Ionic Getting Started page. (Note that Ionic has a dependency on NodeJS, so the instructions will require you to install that as well if you don’t already have it on your machine).

The AngularFire 5 minute tutorial is a great place to begin getting familiar with Firebase. And if you’re a “tinkerer” or a tactile learner like me you may want to pull my implementation from GitHub and start playing with the code.

No comment yet.
Scoop.it!

HTML5 Mobile - Optimising for older or slower devices

HTML5 Mobile - Optimising for older or slower devices | JavaScript for Line of Business Applications | Scoop.it

I built my App using Ionic Framework, which is based on AngularJS, but these lessons should apply to other frameworks too. Angular has built-in support for animations, and Ionic comes with some default transitions for sliding pages left and right. I used that, and added a Javascript animation for the “Hero” element. It extracts the element from the card and positions it so it’s in the same place on screen, then animates it to it’s new location before removing it. The corresponding element in the details page is initially hidden during the animation, and revealed at the end so it appears to be the same element.


Google’s success at making the OS available at lower price points means that many users have devices with relatively limited performance. Giving those users a good experience is vital. Here are some lessons I’ve learned while optimising my App to look good on older or slower devices.

No comment yet.
Scoop.it!

Unit testing an Angular (Ionic) controller using Facebook's Jest

Unit testing an Angular (Ionic) controller using Facebook's Jest | JavaScript for Line of Business Applications | Scoop.it

I want my unit test to verify that the $scope object has the right areas and that when the click event happens, the $rootScope variable is set correctly.
We are going to mock the areaService object with fake data and we'll also tell the controller injection service to use our mock.

No comment yet.
Scoop.it!

ngCordova - Cordova Plugins with AngularJS Magic

ngCordova - Cordova Plugins with AngularJS Magic | JavaScript for Line of Business Applications | Scoop.it

ngCordova is a set of AngularJS extensions on top of the Cordova API to make it easier to build, test, and deploy Cordova apps with AngularJS.

Jan Hesse's insight:

https://github.com/driftyco/ng-cordova/

No comment yet.
Scoop.it!

Ionic Framework, Angularjs & PhoneGap Build- The Awesome Threesome!

Ionic Framework, Angularjs & PhoneGap Build- The Awesome Threesome! | JavaScript for Line of Business Applications | Scoop.it

This is a getting started post on Ionic Framework & deploying the started template to PhoneGap Build.

When I read this article, I was pretty convinced that jQuery mobile is really killing PhoneGap & its abilities. jQuery mobile is actually awesome with its cross browser support & loading pages via Ajax, yada yada yada. But yes this is an overkill for a mobile app. We know what we are dealing with when we develop a hybrid app for a mobile. So why not use a user interface framework that will have only patches wrt mobile browsers!?


Contents:

* Introductions
* Set up Ionic
* Scaffold our First Ionic app
* Build & Test locally
* PhoneGap Build the app
* Troubleshooting

No comment yet.
Scoop.it!

Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration

Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration | JavaScript for Line of Business Applications | Scoop.it

Here is a brand new version of Sociogram, built with AngularJS,Ionic, and the OpenFB micro-library I shared earlier this week.

Sociogram is a sample application that demonstrates how to:

  • Login with Facebook
  • Request specific permissions
  • Revoke permissions
  • Get data (list of friends, mutual friends, feed items, etc.)
  • Post to your feed

The application also demonstrates some cool Ionic features such as:

  • Sliding Menu
  • Pull-to-Refresh (in Feed)
  • “Loading…” UI (while waiting for the feed to load)
No comment yet.
Scoop.it!

Apps With AngularJS

Apps With AngularJS | JavaScript for Line of Business Applications | Scoop.it
Is creating mobile apps with AngularJS and PhoneGap a viable alternative to native development?

Mobile development is converging. Websites are beginning to feel like applications in their own right, with hardware powered graphics, smooth interfaces, and multiple versions for multiple devices. That begs the question, can web technologies power a full blown app?

n order to make an application feel as responsive as its native counterparts we'll need to take advantage of several new technologies. Having an interface to access the functionality of the phone such as accelerometer, camera and gps is crucial. PhoneGap allows us to do this, interfacing with the device to allow access to these hardware features through javascript. 

No comment yet.
Scoop.it!

Why AngularJS Will Be Huge

Why AngularJS Will Be Huge | JavaScript for Line of Business Applications | Scoop.it

Like most people, when I first started learning Angular I found it to be a very high quality foundation for building great apps, and doing it quickly. Testability, dependency injection, separation of the logic/view layer, and designer-developer harmony are all great things us devs can get behind, and Angular had it in spades.

But we all know it's hard to get by on just merit alone, and the verdict is always going to be out on whether Angular is really technically better than the alternatives (developers are notoriously unwavering when it comes to tech wars).

No, in order for a technology to be truly, incredibly successful, it needs to become more than just a quality framework. It has to become a platform.

No comment yet.
Scoop.it!

Production ready apps with ionic framework

Production ready apps with ionic framework | JavaScript for Line of Business Applications | Scoop.it

Complete guide to prepare your ionic app for production. Uglify, minify and obfuscate your app and many other tips to protect your code.


For all the previous task we are going to use a mixture between gulp tasks andcordova hooks . Gulp tasks will be “running” all the time after you run ionic serve. Cordova hooks will run each time you build or run your project with ionic build ios [android] or ionic run android [ios]

No comment yet.
Scoop.it!

Awesome-Ionic: A curated list of amazingly awesome Ionic libraries, resources and solutions.

Awesome-Ionic: A curated list of amazingly awesome Ionic libraries, resources and solutions. | JavaScript for Line of Business Applications | Scoop.it
Awesome-Ionic - A curated list of amazingly awesome Ionic libraries, resources and solutions.
No comment yet.
Scoop.it!

Validation in Ionic Framework Apps with ngMessages

Validation in Ionic Framework Apps with ngMessages | JavaScript for Line of Business Applications | Scoop.it

With the release of AngularJS 1.3.0, the AngularJS team gave us some great tools to deal with validation in a more sane manner. 

When this form loads, by default the "Username" field is marked as invalid and has a message about the form being required. If you submit the form, the password field will also get marked invalid and the form won't submit. Let's go through the code and figure out how this works.

No comment yet.
Scoop.it!

Node Webkit, Firebase and Ionic Framework - A one to one chat client

Node Webkit, Firebase and Ionic Framework - A one to one chat client | JavaScript for Line of Business Applications | Scoop.it

In this post, we are going to build a desktop application that is like your typical one to one chat client. Where, a user logs in, sees a list of other users. And can chat with any of them. This app is called Chatter.

As you can see from the above demo, we have used Firebase as our data store to manage the user’s presence and their chat messages. And also, if you did notice, when User B sent a new message to User A, a new chat window opened automatically, like a typical chat app.

We will take a look at how all the above can be achieved. So, let us get started on building Chatter.

No comment yet.
Scoop.it!

Building Native-Like Mobile Apps with Cordova, AngularJS and Ionic

Building Native-Like Mobile Apps with Cordova, AngularJS and Ionic | JavaScript for Line of Business Applications | Scoop.it

A presentation that IS actually a hybrid app, showing off how to build it.

No comment yet.
Scoop.it!

Series: Building an iOS app with PhoneGap, Angular.js and the ionic framework

Series: Building an iOS app with PhoneGap, Angular.js and the ionic framework | JavaScript for Line of Business Applications | Scoop.it

In this series I plan to build a mobile application using primarily web technologies (HTML5, js and css). I will be targeting iOS since those are the devices I have access to at the moment, but the application should be deployable to a number of platforms without major changes due to the technologies I will be using.


Series Parts:

* Building an iOS app with PhoneGap, Angular.js and the ionic framework
* Building a basic iOS UI using Angular and Ionic
* Recording Geo location data with PhoneGap and Angular
* Refactoring the js code structure PhoneGap and Angular
* Uploading files with PhoneGap and Angular
* A few different ways to improve user feedback in our Ionic application
* Displaying current and max speed with PhoneGap and Ionic
* Deleting files with PhoneGap
* Calculating distance and speed with the GeoLocation API - PhoneGap

No comment yet.
Scoop.it!

ion-search directive with Ionic framework

ion-search directive with Ionic framework | JavaScript for Line of Business Applications | Scoop.it

A demo of a directive which add a fancy search bar to filter data. It can filter / search from promises sources and preloaded sources. For the promises demo, I used Web SQL, so it's Chrome/Safari only compatible (but 100% compatible with the SQLite Cordova plugin :D)

No comment yet.
Scoop.it!

Building Mobile Apps with AngularJS and Ionic

Building Mobile Apps with AngularJS and Ionic | JavaScript for Line of Business Applications | Scoop.it

AngularJS is turning out to be one of the best frameworks for building mobile apps across all major platforms.

One reason that Angular fits so well into the mobile developer toolbox is its features for interacting with backend web services and external data sources. Since most apps today are data-driven, it makes sense to use a tool built from the ground up to solve this problem.

Beyond that, AngularJS comes with some of the most modern and advanced software development practices ready-made and easy to use. You'll find that building mobile apps with Angular is highly efficient and results in solid code that will scale up as you pile on the features.

* Three-way data binding

* Reusable logic

* Testability

* Among Friends

* Mobile UI with Ionic

* Go forth and build

No comment yet.
Scoop.it!

Sample Force.com Mobile Application with Ionic and AngularJS

Sample Force.com Mobile Application with Ionic and AngularJS | JavaScript for Line of Business Applications | Scoop.it

In my previous post, I wrote about Ionic, a new UI framework that’s built on top of AngularJS and that provides mobile-optimized UI components to build high-performance hybrid applications that look and feel native. I also shared an employee directory sample application built with Ionic and AngularJS.

In this post, I’ll share the same application connecting to the salesforce.com platform using the Force.com Mobile SDK. After authenticating with OAuth, the user can search for contacts by name, and then call, text, or email the selected contact.

No comment yet.