background preloader

Build a real-time polls application with Node.js, Express, AngularJS, and MongoDB

Build a real-time polls application with Node.js, Express, AngularJS, and MongoDB
Recently while lecturing on HTML5 to a large group of students, I wanted to poll them and display their voting results, updating in real-time. I decided to quickly build a polling app for this purpose. I wanted a simple architecture and not too many different languages and frameworks. “This MEAN stack (Mongo, Express, Angular, Node) may one day surpass the simplicity of the LAMP stack (Linux, Apache, MySQL, PHP) for web application development and deployment.” I chose to use DevOps Services (formerly JazzHub) to manage the source code for my project. What you'll need to build your app A basic familiarity with Node.js, and a Node.js development environmentThese Node.js modules: Express framework, Jade, Mongoose, and socket.ioAngularJS JavaScript frameworkMongoDB NoSQL databaseThe Eclipse IDE, with the Nodeclipse plug-in installed READ:Node.js — beyond the basics Step 1. In Eclipse, switch to the Node perspective, and create a new Node Express project. Figure 1. Configure the basic front-end Related:  Node.jsMEAN

Creating a Single Page Todo App with Node and Angular Today we will be creating a very simple Todo application using the MEAN (Mongo, Express, Angular, Node) stack. We will be creating: Single page application to create and finish todosStoring todos in a MongoDB using MongooseUsing the Express frameworkCreating a RESTful Node APIUsing Angular for the frontend and to access the API While the application is simple and beginner to intermediate level in its own right, the concepts here can apply to much more advanced apps. The biggest things we should focus on is using Node as an API and Angular as the frontend. What We’ll Be Building Base Setup File Structure We are going to keep the file structure very simple and put most of the code for our Node application into the server.js file. - public ----- core.js ----- index.html - package.json - server.js Installing Modules In Node, the package.json file holds the configuration for our app. Now if we run npm install, npm will look at this file and install Express and Mongoose. Node Configuration Todo Model

Dynamisez vos sites web avec JavaScript ! Bienvenue à toutes et à tous, Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que simple langage de script, JavaScript est désormais un des poids lourds du développement Web ! Qui plus est, il se démocratise au sein d'autres environnements comme les serveurs avec le célèbre Node.js, les applications pour smartphones et tablettes, avec PhoneGap d'Adobe, les applications pour Windows 8, mais aussi les logiciels multiplateformes. Bref, JavaScript est partout ! Voici quelques exemples de ce qui est réalisable grâce au JavaScript : Sur ce, bonne lecture ! Setting Up a MEAN Stack Single Page Application Beginning an application from scratch can sometimes be the hardest thing to do. Staring at an empty folder and a file with no code in it yet can be a very daunting thing. In today’s tutorial, we will be looking at the starting setup for a Node.js, AngularJS, MongoDB, and Express application (otherwise known as MEAN). This will be a starting point for those that want to learn how to begin a MEAN stack application. You will be able to start from absolute scratch and create a basic application structure that will allow you to build any sort of application you want. What We’ll Be Building A lot of the applications we’ve dealt with so far had a specific function, like our Node and Angular To-Do Single Page Application. This will be very barebones but hopefully it will help you set up your applications. Application Requirements This tutorial will be more based on application structure and creating a solid foundation for single page MEAN stack applications. The Backend Node, MongoDB, Express <! <!

Dan Wahlin - Learning AngularJS by Example – The Customer Manager Application I’m always tinkering around with different ideas and toward the beginning of 2013 decided to build a sample application using AngularJS that I call Customer Manager. It’s not exactly the most creative name or concept, but I wanted to build something that highlighted a lot of the different features offered by AngularJS and how they could be used together to build a full-featured app. One of the goals of the application was to ensure that it was approachable by people new to Angular since I’ve never found overly complex applications great for learning new concepts. The application initially started out small and was used in my AngularJS in 60-ish Minutes video on YouTube but has gradually had more and more features added to it and will continue to be enhanced over time. In this post I’m going to provide an overview about how the application is organized, back-end options that are available, and some of the features it demonstrates. The structure of the application is shown to the right.

Premiers pas avec Grunt Nous vous conseillons aujourd’hui d’utiliser un gestionnaire de tâches qui nous paraît être mieux sur bien des points: configuration plus souple, lisible et facile et rapidité vous attendent avec Gulp. Vous avez sûrement déjà entendu parler de Grunt à droite à gauche, en conférence, voire votre boite l’utilise déjà mais vous ne savez toujours pas trop ce qui se cache derrière ce terme saugrenu digne d’un personnage de Warcraft. Soit, ce n’est pas bien grave. Vous est-il déjà arrivé de devoir régulièrement lancer, lancer et relancer des processus tels que Sass, LESS, uglify - en somme des préprocesseurs ou des minifiers - régulièrement à la main ? Voici un workflow assez classique : Compiler mes .scss en .css;Concaténer mes *.js en un seul fichier;Minifier (avec uglify par exemple) la résultante de l’action précédente. Voyons maintenant comment l’on peut mettre en place ceci via Grunt. # Installation Tout d’abord, installons Grunt. $ npm init $ npm install -g grunt-cli # Initialisation Fait ?

Blog By Valeri Karpov, Kernel Tools engineer at MongoDB and and co-founder of the Ascot Project. A few weeks ago, a friend of mine asked me for help with PostgreSQL. As someone who’s been blissfully SQL-­free for a year, I was quite curious to find out why he wasn’t just using MongoDB instead. First of all, there are huge advantages to using a uniform language throughout your stack. Another big reason to go with MongoDB is that you can use it in the same way you would a MySQL database (at least at a high level). As a NoSQL database, MongoDB also allows us to define our schema entirely on the code side. At this point I should note that to get the most out of MongoDB in your MEAN stack, you’re going to want to take advantage of MongooseJS. We can then create a model by mapping our schema to our MongoDB collection: var User = db.model('users', UserSchema); Another powerful tool that MongoDB and MongooseJS provide is the ability to nest schemas. That’s it. More Information

Single Page Apps with AngularJS Routing and Templating Overview Single page apps are becoming increasingly popular. Sites that mimic the single page app behavior are able to provide the feel of a phone/tablet application. Angular helps to create applications like this easily. Our Simple App We’re just going to make a simple site with a home, about, and contact page. Goals Single page applicationNo page refresh on page changeDifferent data on each page While this can be done with just Javascript and AJAX calls, Angular will make this process easier as our app starts growing. File Structure - script.js - index.html - pages ----- home.html ----- about.html ----- contact.html This is the simple part. <! For linking to pages, we’ll use the #. Angular Application Module and Controller We’re going to setup our application. First, we have to create our module and controller in javascript. var scotchApp = angular.module('scotchApp', []); scotchApp.controller('mainController', function($scope) { $scope.message = 'Everyone come and see how good I look!' <! ...

Grunt pour ceux qui pensent que Grunt est compliqué On parle beaucoup de Grunt aujourd'hui, mais les articles disponibles sont souvent abscons et techniques. Pourtant Grunt n'est pas réservé aux spécialistes, comme le montre cette introduction de Chris Coyier. Par Chris Coyier On donne souvent les conseils suivants aux intégrateurs web : Divisez votre CSS et votre JavaScript en autant de parties que nécessaire, puis concaténez-les pour la version de production de votre site. Il y en aurait encore beaucoup à ajouter, mais voilà déjà quelques basiques. Je suis sûr que vous avez entendu parler de Grunt. Mais soyons clair : Grunt est un de ces nouveaux joujoux à la mode que tous les cool kids utilisent, mais qui à première vue semble étrange et intimidant. Écartons tout de suite quelques malentendus Peut-être avez-vous entendu parler de Grunt mais ne l'avez pas utilisé vous-même. Je n'ai pas besoin de ce que fait Grunt Probablement que si, en fait. Grunt fonctionne avec la console - Je ne suis qu'un designer Je suis designer, moi aussi. grunt

Introduction to the MEAN Stack, Part One: Setting Up Your Tools | The Code Barbarian I’ve received several emails asking for instructions on how to set up a basic MEAN stack app. I’m going to take it one step further and give you guys a two-part post that will walk you through creating your first MEAN stack app- from installing the tools to actually writing the code. In Part One we’ll go through the setup and installation process. Next in Part Two we’ll walk through the steps for building a very simple to-do list. Part One consists of seven steps, although only the first two are are strictly necessary. We’ll start by installing all of our tools. If you’re on OSX, I highly recommend you install Brew to help with this process. 1) Installing MongoDB- First, we’re going to install MongoDB.OSX: Open up your Terminal window and run Ubuntu: Open up your shell and run: Windows: Go to and download the latest version of MongoDB for Windows, which should be a plain zip file. That’s it! directly from your command line on Mac and Ubuntu. or on Windows.

Build a RESTful API Using Node and Express 4 Express Router and Routes We will use an instance of the Express Router to handle all of our routes. Here is an overview of the routes we will require, what they will do, and the HTTP Verb used to access it. This will cover the basic routes needed for an API. This also keeps to a good format where we have kept the actions we need to execute (GET, POST, PUT, and DELETE) as HTTP verbs. Route Middleware We’ve already defined our first route and seen it in action. Let’s say that we wanted something to happen every time a request was sent to our API. All we needed to do to declare that middleware was to use router.use(function()). We are sending back information as JSON data. We will also add next() to indicate to our application that it should continue to the other routes. Middleware Uses Using middleware like this can be very powerful. Testing Our Middleware With middleware, we can do awesome things to requests coming into our API. Creating the Basic Routes Creating a Bear POST /api/bears

Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. The first MEAN Stack meetup - MEAN Stack (London, England March 12 · 6:00 PM This location is shown only to members It is our pleasure to announce the first MEAN Stack meetup ever to be held in London. As this is our first event we are putting a cap on the number of attendees - please make sure you RSVP as soon as possible to book your place. The event will open at 6pm with a view to getting started at 6:30pm, once everybody has had time to say hello and get a drink. Simon will kick things off, delivering an introductory presentation about the MEAN Stack. Tamas will then do a workshop and scaffold a very basic MEAN application - so do bring your laptops and notebooks to follow the workshop or to take notes.