Sharing Top Content from the Angular-sphere.

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 a “Portfolio Platform” app using AngularJS, a little bit of Node, 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 Portfolio Service for get and update, copy and paste the code below:

    Create Portfolio Controller for update and add, edit projects, copy and paste the code below:

    Create Portfolio Module, copy and paste the code below:

    Create Author Controller for getting information of author, copy and paste the code below:

    We were able to consume the Cosmic JS API with our actions and dispatcher functions.

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 a Portfolio Platform App Using AngularJS #cloud #cms #api #javascript #nodejs #angularjs #cosmicjs

In this tutorial I’m going to show you how to create a “Portfolio Platform” app using AngularJS, a little bit of Node, and Cosmic JS.  At the end of the tutorial we will have a platform that enables management of multiple portfolio websites.   Users can login and manage their portfolio website.  The admin can manage multiple users from the Cosmic JS Dashboard.  Let’s get started.

Download the GitHub repo.

Check out the demo.

Install to your Cosmic JS Bucket in a few clicks.

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:

//cosmicapp-porfolio/package.json { “name”: “photography-portfolio-app”, “version”: “1.0.0”, “main”: “app-server.js”, “engines”: { “node”: “4.1.2”, “npm”: “3.5.2” }, “description”: “”, “dependencies”: { “body-parser”: “^1.17.2”, “bower”: “^1.7.7”, “buffer-to-vinyl”: “^1.1.0”, “express”: “^4.13.3”, “gulp”: “^3.9.1”, “gulp-autoprefixer”: “^3.1.0”, “gulp-concat”: “^2.6.0”, “gulp-concat-css”: “^2.2.0”, “gulp-env”: “^0.4.0”, “gulp-minify-css”: “^1.2.4”, “gulp-ng-config”: “^1.4.0”, “gulp-npm-script-sync”: “^1.1.0”, “gulp-webserver”: “^0.9.1”, “http-server”: “^0.9.0”, “stripe”: “^4.22.0”, “wiredep”: “^3.0.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:

//cosmicapp-porfolio/app-server.js var express = require(‘express’); var bodyParser = require(‘body-parser’); var app = express(); app.set(‘port’, process.env.PORT || 3000) app.use(express.static(__dirname)) app.use(bodyParser.json()) var http = require(‘http’).Server(app) // Route app.get(‘/’, (req, res) => { res.sendFile(__dirname + ‘/index.html’); }) http.listen(app.get(‘port’), () => { console.log(‘Photography Portfolio App listening on ‘ + app.get(‘port’)) })

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 cosmicapp-porfolio 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:

//cosmicapp-porfolio/gulpfile.js ‘use strict’; ‘use strict’; var gulp = require(‘gulp’), webserver = require(‘gulp-webserver’), minifyCSS = require(‘gulp-minify-css’), concat = require(‘gulp-concat’), wiredep = require(‘wiredep’).stream, gulpNgConfig = require(‘gulp-ng-config’), autoprefixer = require(‘gulp-autoprefixer’), b2v = require(‘buffer-to-vinyl’), sync = require(‘gulp-npm-script-sync’); sync(gulp); 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(‘config’, function () { const json = JSON.stringify({ BUCKET_SLUG: process.env.COSMIC_BUCKET, MEDIA_URL: ‘https://api.cosmicjs.com/v1/’ + process.env.COSMIC_BUCKET + ‘/media’, URL: ‘https://api.cosmicjs.com/v1/’, READ_KEY: process.env.COSMIC_READ_KEY || ”, WRITE_KEY: process.env.COSMIC_WRITE_KEY || ”, DEFAULT_IMAGE: process.env.DEFAULT_IMAGE || ” }); return b2v.stream(new Buffer(json), ‘config.js’) .pipe(gulpNgConfig(‘config’)) .pipe(gulp.dest(‘app/config’)); }); 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 main module. Copy and paste the following code into your 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:

(function () { ‘use strict’; angular .module(‘main’) .controller(‘AuthCtrl’, AuthCtrl); function AuthCtrl(crAcl, $state, AuthService, Flash, $log) { var vm = this; vm.login = login; vm.register = register; vm.loginForm = null; vm.credentials = {}; vm.user = {}; function login(credentials) { function success(response) { function success(response) { if (response.data.status !== ’empty’) { var currentUser = response.data.objects[0]; crAcl.setRole(‘ROLE_USER’); AuthService.setCredentials({ slug: currentUser.slug, first_name: currentUser.metadata.first_name, last_name: currentUser.metadata.last_name, email: currentUser.metadata.email, role: ‘ROLE_USER’ }); $state.go(‘portfolio.intro’, {slug: currentUser.slug}); } else Flash.create(‘danger’, ‘Incorrect username or password’); } function failed(response) { $log.error(response); } if (response.data.status !== ’empty’) AuthService .checkPassword(credentials) .then(success, failed); else Flash.create(‘danger’, ‘Incorrect username or password’); $log.info(response); } function failed(response) { $log.error(response); } if (vm.loginForm.$valid) AuthService .checkUsername(credentials) .then(success, failed); } function register(credentials) { function success(response) { login(credentials); $log.info(response); } function failed(response) { $log.error(response); } if (vm.loginForm.$valid) AuthService .register(credentials) .then(success, failed); } } })();

Create Auth Service, copy and paste the code below:

What’s going on here:

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

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

Create Portfolio Controller for update and add, edit projects, copy and paste the code below:

Create Portfolio Module, copy and paste the code below:

What’s going on here:

Create Author Controller for getting information of author, copy and paste the code below:

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.

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.

Comments are closed, but trackbacks and pingbacks are open.