Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.

  • In this tutorial I’m going to show you how to create an ecommerce app using Angular JS and Cosmic JS.
  • Now, in your package.json, copy and paste the code below:

    Now, in your bower.json, copy and paste the code below:

    Now we’re going to build out our file structure a bit more so that we can organize our angular modules and js files.

  • Copy and paste the following code into your index.html file:

    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 file to bundle all of our js files and export that bundle file to our dist directory.
  • Copy and paste the following code into your auth.ctrl.js file:

    Create Auth Service, copy and paste the code below:

    Create User Service for get and update User, copy and paste the code below:

    Create Watch Service for get, update, add delete Watches from Cosmic JS API, copy and paste the code below:

    Create Watch Controller for get all events and remove, copy and paste the code below:

    Create Watch Module, copy and paste the code below:

    Create Watch Profile Controller for getting watch information, copy and paste the code below:

    Create Watch Profile Module, copy and paste the code below:

    Create Cart Controller, copy and paste the code below:

    Create Cart Service, copy and paste the code below:

    Create Cart Module, copy and paste the code below:

    Deploy this app in minutes from Cosmic JS.

Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and applications with more freedom and manage content easier. Get started for Free.

@cosmic_js: How to Build an Angular JS Ecommerce App #cms #api #javascript #angularjs #apps #appdev #webdev #cosmicjs

  June 6, 2017  Dmytro Kutsaniuk

In this tutorial I’m going to show you how to create an ecommerce app using Angular JS and Cosmic JS. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic JS API in order to retrieve, update, and delete ecommerce products and data in our Cosmic JS Bucket.   At the end of this tutorial we will have a fully-functioning ecommerce website that can be deployed to begin accepting purchases through Stripe.  Let’s get started.

Check out the demo.

Download the GitHub repo.

Install the app and deploy in minutes. (Go to Your Bucket > Apps)

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, copy and paste the code below:

//ecommerce-app/package.json { “name”: “ecommerce-app”, “version”: “1.0.0”, “main”: “app-server.js”, “engines”: { “node”: “4.1.2”, “npm”: “3.5.2” }, “description”: “”, “dependencies”: { “bower”: “^1.7.7”, “express”: “^4.13.3”, “gulp”: “^3.9.1”, “buffer-to-vinyl”: “^1.1.0”, “gulp-autoprefixer”: “^3.1.0”, “gulp-concat”: “^2.6.0”, “gulp-concat-css”: “^2.2.0”, “gulp-minify-css”: “^1.2.4”, “gulp-ng-config”: “^1.4.0”, “gulp-env”: “^0.4.0”, “gulp-webserver”: “^0.9.1”, “http-server”: “^0.9.0”, “wiredep”: “^3.0.0”, “gulp-npm-script-sync”: “^1.1.0” }, “scripts”: { “postinstall”: “bower install && gulp config && gulp js”, “start”: “npm run production”, “production”: “node app-server.js”, “gulp”: “gulp” }, “author”: “”, “license”: “ISC”, “devDependencies”: { “gulp-npm-script-sync”: “^1.1.0”, “gulp-remote-src”: “^0.4.2” } }

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

Now, in your bower.json, copy and paste the code below:

Config app server:

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 ecommerce-app directory should look like:

Now we we will set up our index.html. Copy and paste the following code into your index.html file:

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 file to bundle all of our js files and export that bundle file to our dist directory. Copy the following code into your gulpfile.js file:

After that we can create main module. Copy and paste the following code into your index.html file:

Now we we will set up our Auth Controller. Copy and paste the following code into your auth.ctrl.js file:

Create Auth Service, copy and paste the code below:

Create User Service for get and update User, copy and paste the code below:

Create Watch Service for get, update, add delete Watches from Cosmic JS API, copy and paste the code below:

Create Watch Controller for get all events and remove, copy and paste the code below:

Create Watch Module, copy and paste the code below:

Create Watch Profile Controller for getting watch information, copy and paste the code below:

Create Watch Profile Module, copy and paste the code below:

Create Cart Controller, copy and paste the code below:

Create Cart Service, copy and paste the code below:

Create Cart Module, copy and paste the code below:

Deploy this app in minutes from Cosmic JS.  After you deploy, you can set your Stripe keys as environment variables by going to Your Bucket > Deploy Web App > Set Environment Variables.  Begin adding products and charging users for your goods! I hope you enjoyed this tutorial as much as I did, if you have any questions reach out to us on Twitterand join our community on Slack.

Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.