Skip to main content

The Conversion: Take Off and Landing

The first step in my high level development process is to create the landing page and determine it's contents. In the prior post, it was decided that the new travel system landing page will display a list of trips relevant to the user.  These would be trips that they created and / or trips that other users shared with them.

In the MAIN.CFM post, I outlined the folder structure that I generally use get a project off the ground.  For this post, we are going to add the following:
  • routes/routes.js
  • services/dataService.js
  • controllers/landing.js
  • templates/landing.html

ROUTES.JS

I don't use the native ngRoute for AngularJS, but instead settled on the AngularJS UI-Router.  To me, this router seems easier to implement and understand than ngRoute. The route.js file starts out as the following:


Basically, this little bit of code is saying if the route doesn't match any of the $stateProvider.states, then route to the landing route.  The landing route itself is going to load the landing.html template which will require the landing controller.  Any future routes will be added as additional .states.

From a technical standpoint, you don't need to have routing. When I first started using AngularJS, I created this seemingly benign style of putting everything on one page and [ab]using ngShow and ngIf to control the display. Yeah...I don't recommend that all. While this approach may get you in on the ground floor, it's not sustainable for larger applications.

Just a note: angular.module('core') refers to the overarching portal that this code is deployed in. If you were to copy and paste this code, you would need to specify your own module. The Javascript files necessary to support the ui-router would need to be included in your main template as well.

DATASERVICE.JS

The dataService service is basically a wrapper for the HTTP requests that are going to go to the database via Coldfusion.  When I first started working with AngularJS, I leveraged the cfajaxproxy which worked well.  It was easy to implement and use.  However, the fact that it is synchronous can be a barrier to a page loading.  

The basic boilerplate dataservice.js template is very simple.  There is a single method defined called "call" which can be used if there are no object parameters.
  

If a JSON object needs to be passed over to Coldfusion, then a separate method will be created to appropriately handle the JSON.

LANDING.HTML

As stated earlier, this is the page that the user will land on either explicitly or implicitly due to an invalid route.  Starting out the minimal code is simply to connect the controller and put in a heading to see that we are there when we try to hit the page.  


LANDING.JS

The landing.js file is the controller for the landing.html page.  This means that every time the landing page is hit, the code in the landing controller will be executed.  For now, we are going to keep things clean and simple.  But in the next blog post, we will begin filling out the landing page with actual TRIPS data.


In the landing controller, the dataService and $scope are being injected. There could be more later down the road, but that's all that is needed for now.

The next step is to add the function to the portal and make sure it works:  And...it doesn't because I forgot on important file and that is the TRIPS controller.  

TRIPS.JS

The TRIPS controller will be more of placeholder than anything as most of the code will go into the corresponding template controllers.  But it's still necessary to have.

You have reached your destination...

Next up is creating the Coldfusion component file and populate the landing the page with a list of trips.



Labels:

Comments

Post a Comment

Popular posts from this blog

Dynamically Loading an AngularJS UI.Router

When starting out on my AngularJS journey, I couldn't get a good handle on the router native to the framework. So I adopted the use of the wonderful angular-ui / ui-router.  During the past few years of development, I've honed in (for better or worse) my paradigm for setting new applications and nearly every AngularJS app has a routes.js file. Without going into background, I wanted a way to load the ui-router dynamically. Typically, the routes gets defined in a .js file and typically looks something like this: angular.module('core').config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/landing/201820"); $stateProvider .state('landing', {url: "/landing/:term", templateUrl: "apps/noted/templates/landing.html"}) .state('uploadCalendar', {url: "/uploadCalendar", templateUrl: "apps/noted/templates/uploadCalendar.html"}) .state('noteTakers...
2 comments
Read more

The Conversion: Lay of the Landing Page - Part 1

In the last post  the groundwork has been laid for real development to begin. The data service, router, and landing pages have been created and are ready for code. The last thing to add for this part of the process is the Coldfusion component. A data folder has been added to store any cfcs relevant to the TRIPS application. The first is to write the CFFUNCTION that will return the list of trips. My development pattern for creating CF functions is fairly routine.  First, decide on a name, parameters and return type.  Sometimes the naming of a function is the hardest part.  I've settled on actionDataObject.  So in this case, the function will be named: getTrips.    At moment, the landing controller (landing.js) is empty. angular.module('core').controller('LandingController',['$scope','dataService', function($scope,dataService){ }]); The basic task of this controller is getting the list of trips.  First is the establishment of an empty tr...
3 comments
Read more

The Conversion: Trips for Keeps - Part 2

Ack! A few days off work and then updates to other applications that needed to be made has delayed more work on TRIPS. But we're back and ready to continue. In the last post , we started to build out the trip.html template and it's corresponding controller. The dataService was updated with an abstraction that would allow a CFC method to be called and data to be passed.  This post will focus on retrieving that data from the dataService to the CFC method. Before we get started, I thought it would be kind of cool to keep a count of the number of lines of code for the project.  I'm not sure if it will provide any insight, but it might be nice to compare the line count to the number of lines in the Flex application.  Rather than posting the counts on each blog post, I have created a separate post tracking the line count per post . In review, let's take a look at the dataService code that's going to call the Coldfusion function to save the trip information. this.p...
Post a Comment
Read more