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 “Events” app using a little bit of Node, 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.

  • 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:

    Now we will create our Auth Service in User Service for get and update User, copy and paste the code below:

    Create User Controller for get current user and log out, copy and paste the code below:

    Next we will create our Create User Module:

    Next we will create our Event Service to get, update, add delete Events from the Cosmic JS API:

    Our Event Controller will get all events and remove events:

    Our Event Module will render our events view:

    Now let’s create our Event Add Controller for adding events:

    Next we create the Event Module:

    We were able to create a pretty complicated app to manage users, sessions, adding / editing events all through the Cosmic JS API.

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 AngularJS Events App #cloud #cms #api #javascript #angularjs #webdev #appdev #apps #events #cosmicjs

  May 11, 2017  Dmytro Kutsaniuk

In this tutorial I’m going to show you how to create an “Events” app using a little bit of Node, 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 data in our Cosmic JS Bucket. Let’s get started.

Download the GitHub repo.

Check out the demo.

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:

//events-app/package.json { “name”: “events-app”, “version”: “1.0.0”, “main”: “app-server.js”, “engines”: { “node”: “4.1.2”, “npm”: “3.5.2” }, “description”: “”, “dependencies”: { “bower”: “^1.7.7”, “http-server”: “^0.9.0”, “gulp”: “^3.9.1”, “gulp-autoprefixer”: “^3.1.0”, “gulp-concat”: “^2.6.0”, “gulp-concat-css”: “^2.2.0”, “gulp-minify-css”: “^1.2.4”, “gulp-webserver”: “^0.9.1”, “wiredep”: “^3.0.0”, “express”: “^4.13.3” }, “scripts”: { “postinstall”: “bower install”, “start”: “npm run production”, “production”: “node app-server.js” }, “author”: “”, “license”: “ISC” }

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

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

//events-app/bower.json { “name”: “events-app”, “description”: “Events App”, “version”: “0.0.0”, “homepage”: “https://github.com/cosmicjs/events-app”, “license”: “MIT”, “private”: true, “dependencies”: { “angular”: “~1.4.x”, “angular-mocks”: “~1.4.x”, “angular-bootstrap”: “~1.1.x”, “angular-cookies”: “~1.4.x”, “angular-route”: “~1.4.x”, “angular-ui-router”: “0.2.x”, “angular-resource”: “1.4.x”, “angular-animate”: “~1.4.x”, “ng-dialog”: “0.6.1”, “bootstrap”: “3.3.x”, “cr-acl”: “”, “angular-chosen-localytics”: “*”, “bootstrap-chosen”: “*”, “ng-flow”: “^2.7.4”, “angular-mask”: “*”, “checklist-model”: “0.9.0”, “angular-ui-notification”: “^0.2.0”, “angular-ui-calendar”: “^1.0.2”, “angular-ui-switch”: “^0.1.1”, “ng-scrollbars”: “^0.0.11”, “jquery.scrollbar”: “*”, “angular-nvd3”: “*”, “infinity-angular-chosen”: “^0.2.0”, “angular-flash-alert”: “^2.4.0”, “components-font-awesome”: “^4.7.0”, “textAngular”: “^1.5.16”, “angular-loading-bar”: “^0.9.0” }, “resolutions”: { “angular”: “~1.4.x” }, “devDependencies”: { “cr-acl”: “^0.5.0” } }

Config app server:

What we’re installing and why:

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 events-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:

//events-app/gulpfile.js ‘use strict’; var gulp = require(‘gulp’), webserver = require(‘gulp-webserver’), minifyCSS = require(‘gulp-minify-css’), concatCss = require(‘gulp-concat-css’), concat = require(‘gulp-concat’), wiredep = require(‘wiredep’).stream, autoprefixer = require(‘gulp-autoprefixer’); gulp.task(‘css’, function () { return gulp.src(‘css/**/*.css’) .pipe(minifyCSS()) .pipe(concat(‘main.min.css’)) .pipe(autoprefixer()) .pipe(gulp.dest(‘dist/css’)); }); gulp.task(‘js’, function() { return gulp.src(‘app/**/**/*.js’) .pipe(concat(‘main.js’)) .pipe(gulp.dest(‘dist/js/’)); }); gulp.task(‘default’, function () { gulp.watch(‘css/**/*.css’, [‘css’]); gulp.watch(‘app/**/**/*.js’, [‘js’]); gulp.watch(‘bower.json’, [‘bower’]); }); gulp.task(‘bower’, function () { gulp.src(‘index.html’) .pipe(wiredep({ directory: ‘bower_components’ })) .pipe(gulp.dest(”)); });

After that we can create config.js. Copy and paste the following code into your app/config/config.js file:

After that we can create our main module. Copy and paste the following code into the app/main.mdl.js file:

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

Now we will create our Auth Service in app/auth/auth.service.js:

What’s going on here:

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

Create User Controller for get current user and log out, copy and paste the code below:

Next we will create our Create User Module:

(function () { ‘use strict’; angular .module(‘user’, [ ‘user.profile’, ‘user.settings’ ]) .config(config); config.$inject = [‘$stateProvider’, ‘$urlRouterProvider’]; function config($stateProvider, $urlRouterProvider) { $stateProvider .state(‘main.user’, { url: ‘user’, abstract: true, data: { is_granted: [‘ROLE_USER’] } }); } })();

What’s going on here:

Next we will create our Event Service to get, update, add delete Events from the Cosmic JS API:

Our Event Controller will get all events and remove events:

Our Event Module will render our events view:

What’s going on here:

Now let’s create our Event Add Controller for adding events:

Next we create the Event Module:

What’s going on here:

We were able to create a pretty complicated app to manage users, sessions, adding / editing events all through the Cosmic JS API. 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.

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.