Community Articles How to Build a Conference App Using AngularJS

How to Build a Conference App Using AngularJS

In this tutorial I’m going to show you how to create a “Conference” app using AngularJS, a little bit of Node, and Cosmic JS. You will be able to add speakers and sponsors, editing content and managing members of this conference in an admin panel. Let’s get started.

TL;DR

Download the GitHub repo.
Check out the demo.

Getting Started:

First, let’s make a new directory to build our project in and lets also make a package.json file.

Now, in your package.json, here's how we'll do it in code:

mkdir conference-app
conference-app$ touch package.json

Second, let’s make a bower.json file.

conference-app$ touch bower.json

We will build this feature for our bower.json:

Config app server:

conference-app$ touch app-server.js

What we're installing and why:

  1. We're going to use the AngularJS framework to build Single-page application
  2. We're installing angular-ui-router for create multi views.
  3. We are going to use gulp for build all js and css files into one file.

Building our app:

Now we're going to build out our file structure a bit more so that we can organize our angular modules and js files. This is what our conference-app directory should look like:

Now we we will set up our index.html:

Here, we are going to target our "root" view to place our angular modules in later. The main.js file located in our dist directory is what our gulpfile.js file will spit out after bundling all of our angular modules.

Now, set up our gulpfile.js. We will build this feature for our app:

After that we can create main module. Here's how we'll do it in code of main.mdl.js file:



Now we we will set up our Auth Controller. Here's how we'll do it in code of auth.ctrl.js file:

We will build Auth Service for our app:



What's going on here:

  1. We are using the ui-router for config routes.
  2. We created Auth Service for our asynchronous calls to our Cosmic JS API.
  3. We created Auth Controller for checking credentials.

Create User Service for get and update User, here's how we'll do it in code:

Create About Service for get, update content from Cosmic JS API, here's how we'll do it in code:

Create About Controller for get and update content, here's how we'll do it in code:

Create About Module, here's how we'll do it in code:



What's going on here:

  1. We created About Service for our asynchronous calls to our Cosmic JS API. We can update, and getting content.
  2. We created About Controller for getting content and update.
  3. We created About Module.

Create Speakers Controller for CRUD Speakers, we will build this feature for our app:

Create Speakers Module, we will build this feature for our app:

Create Speakers Service for CRUD from Cosmic JS API, we will build this feature for our app:

What's going on here:

  1. We can see information about speakers.
  2. We can CRUD speakers.
  3. We can upload avatar to speaker.

Conclusion:

We were able to consume the Cosmic JS API with our actions and dispatcher functions. I hope you enjoyed this tutorial as much as I did, if you have any questions reach out to us on Twitter and join our community on Slack.


Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


5 Website Boilerplates: React, Node.js, Vue, Nuxt.js and Next.js
An Object in Cosmic JS can be a page, a blog post, an author or anything you want it to be. Cosmic JS gives you the freedom to create and manage content openly and create your own data structure. Each Object allows for the creation of a title, slug, content and Metafields.
In this article I’m going demonstrate how to publish new Objects containing survey responses in Cosmic JS as they are completed in Typeform. Click here to connect Typeform to Cosmic JS using Zapier.
In this tutorial I’ll demonstrate how to build an Authentication app using Angular 6 and Cosmic JS. Starting from scratch, learn how to build, configure and deploy this Angular6 Auth app to the Cosmic JS App Server for testing purposes.
Next.js is a React framework for building hybrid applications. It's flexible, extensible, and works great with any data provider. In this tutorial, we'll show how to get started with Cosmic CMS and Next.js.
Upload media to your Cosmic JS Bucket using Multer.

Ready to Get Started?

No payment info required.
Start Now   Contact Sales