16 Feb 2016

Setting up Packages for Angular Meteor Apps

In this cheatsheet, I'm going to create a Meteor app using Angular 1.5 and the Angular-Meteor package. There's already an excellent and more detailed tutorial here.

I'm going to create an app called news and it's going to use Twitter Bootstrap for the UI.

meteor create news
cd news

Packages

First let's remove some packages we don't need because we're using Angular.

meteor remove blaze-html-templates
meteor remove ecmascript

Now let's load the packages I want. You may be able to skip some of these. You can also cut and paste these into your .meteor/packages file.

angular:angular-animate
enforcer:angular-ui-bootstrap
angularui:angular-ui-router
angular
angularutils:pagination
twbs:bootstrap
ian:accounts-ui-bootstrap-3
accounts-password
alanning:roles
u2622:persistent-session
momentjs:moment
matb33:collection-hooks
fortawesome:fontawesome
harrison:babyparse

Directory Structure

Create the following directory structure:

mkdir -p client/lib
mkdir model
mkdir -p private/csv  # Im going to import data from some CSV files
mkdir public
mkdir -p server/startup

There are some client files that were created in the root by the create command, let's move those to the client directory

Models

Setup the models on the server side and insert some sample data. Create a device model and publish it:

model/device.js:

Device = new Mongo.Collection('device');

Device.allow({
    insert: function(userId, doc) {
        doc.dateCreated = new Date();
        doc.userCreated = userId;
        doc.dateModified = new Date();
        doc.userModified = userId;
        return true;
    },
    update: function(userId, doc, fields, modifier) {
        doc.dateModified = new Date();
        doc.userModified = userId;
        return true;
    },
    remove: function(userId, doc) {
        return true;
    }
});

server/device.publish.js

'use strict'

Meteor.publish('device', function() {
    var docList = Device.find({});
    var docCount = docList.count();
    console.log(' publishing Device: ' + docCount);
    return Device.find();
});

 


Tags:
0 comments