Difference between revisions of "Getting MEAN"

From CSE330 Wiki
Jump to navigationJump to search
(Created page with '=== Installation === * To install MEAN, follow instructions [http://mean.io/#!/docs here] on how to get started. * Take a moment and read the rest of the documentations to get f…')
 
Line 2: Line 2:
 
* To install MEAN, follow instructions [http://mean.io/#!/docs here] on how to get started.  
 
* To install MEAN, follow instructions [http://mean.io/#!/docs here] on how to get started.  
 
* Take a moment and read the rest of the documentations to get familiar with the file structure and idioms.
 
* Take a moment and read the rest of the documentations to get familiar with the file structure and idioms.
 
  
 
=== Running the Default App ===
 
=== Running the Default App ===
Line 18: Line 17:
  
  
== Model ==
+
== Models ==
Find article.js in /server/models, read the code, if you have trouble understanding what the code does, review the Mongoose [http://mongoosejs.com/docs/index.html quick start] guide.
+
 
 +
Open up article.js in /server/models
 +
 
 +
MEAN is MVC on the client side and the server side. Its models are mongoose models that's why we need to require mongoose (what the following line does):
 +
 
 +
var mongoose = require('mongoose'), Schema = mongoose.Schema;
 +
 
 +
The following part defines the schema:
 +
 
 +
var ArticleSchema = new Schema({
 +
    created: {
 +
        type: Date,
 +
        default: Date.now
 +
    },
 +
    title: {
 +
        type: String,
 +
        default: '',
 +
        trim: true
 +
    },
 +
    content: {
 +
        type: String,
 +
        default: '',
 +
        trim: true
 +
    },
 +
    user: {
 +
        type: Schema.ObjectId,
 +
        ref: 'User'
 +
    }
 +
});
 +
 
 +
The next part is validations, or criteria an object needs to pass before it can be saved to the DB.
 +
The following code is to make sure that an article has a title:
 +
 
 +
ArticleSchema.path('title').validate(function(title) {
 +
    return title.length;
 +
}, 'Title cannot be blank');
 +
 
 +
 
 +
Finally, Mongoose allows us to define methods to our data objects as well.
 +
These are called statics. From the Mongoose doc: Schemas not only define the structure of your document and casting of properties, they also define document instance methods, static Model methods, compound indexes and document lifecycle hooks called middleware.
 +
The following code defines a method called load for the article schema:
 +
 
 +
ArticleSchema.statics.load = function(id, cb) {
 +
    this.findOne({
 +
        _id: id
 +
    }).populate('user', 'name username').exec(cb);
 +
};
 +
 
 +
If you have trouble understanding what the code does, review the Mongoose [http://mongoosejs.com/docs/index.html quick start] guide.
  
 
= Practice =  
 
= Practice =  
Line 36: Line 83:
 
Find phones.json in /app/phones in the angular tutorial folder and try importing its content to MongoDB so you can use them in your current MEAN package.
 
Find phones.json in /app/phones in the angular tutorial folder and try importing its content to MongoDB so you can use them in your current MEAN package.
  
Run '''mongod''' and connect to mongo shell (mongo --shell), then type "use mean-dev" to switch to database used by mean.
+
*Run '''mongod''' and connect to mongo shell (mongo --shell), then type "use mean-dev" to switch to database used by mean.
Type  mongoimport --db mean-dev --collection phones --type json --file ''<path to phones.json>'' --jsonArray
+
*Type  mongoimport --db mean-dev --collection phones --type json --file ''<path to phones.json>'' --jsonArray
Type show collections to see if phones are added to your database, type coll = db.phones to see the content of the file.
+
*Type show collections to see if phones are added to your database, type coll = db.phones to see the content of the file.
 +
 
 +
== Controllers ==
 +
Find article.js in the controllers folder. Try to understand what each part does.
 +
 
 +
 
 +
 
 +
 
  
  
 
== View ==  
 
== View ==  
 +
Let's switch to the public folder where the views
  
  

Revision as of 03:12, 30 April 2014

Installation

  • To install MEAN, follow instructions here on how to get started.
  • Take a moment and read the rest of the documentations to get familiar with the file structure and idioms.

Running the Default App

  • Init and run an app. Make sure MongoDB is connected and running (if you run into problems, refer to the section on MongoDB)
  • Explore features of the default Article app (such as logging in, adding/deleting articles).

Generating a Package

  • By now you should know what a package is in MEAN. If you don't, read this.
  • Try creating a package named myPackage and locate it inside the packages folder
  • Compare the structure of myPackage folder to that of the default app. Make sure you see both public and server folders and their subfolders.
  • Restart your app, make sure you can see a link to the newly created package.

A Closer Look at the App

Take a look at the directory where you app resides, you will see two folders public and server, which contain code for the client side and server side respectively.


Models

Open up article.js in /server/models

MEAN is MVC on the client side and the server side. Its models are mongoose models that's why we need to require mongoose (what the following line does):

var mongoose = require('mongoose'), Schema = mongoose.Schema;

The following part defines the schema:

var ArticleSchema = new Schema({

   created: {
       type: Date,
       default: Date.now
   },
   title: {
       type: String,
       default: ,
       trim: true
   },
   content: {
       type: String,
       default: ,
       trim: true
   },
   user: {
       type: Schema.ObjectId,
       ref: 'User'
   }

});

The next part is validations, or criteria an object needs to pass before it can be saved to the DB. The following code is to make sure that an article has a title:

ArticleSchema.path('title').validate(function(title) {

   return title.length;

}, 'Title cannot be blank');


Finally, Mongoose allows us to define methods to our data objects as well. These are called statics. From the Mongoose doc: Schemas not only define the structure of your document and casting of properties, they also define document instance methods, static Model methods, compound indexes and document lifecycle hooks called middleware. The following code defines a method called load for the article schema:

ArticleSchema.statics.load = function(id, cb) {

   this.findOne({
       _id: id
   }).populate('user', 'name username').exec(cb);

};

If you have trouble understanding what the code does, review the Mongoose quick start guide.

Practice

Define a schema for a model named Phone, name it phone.js and save it in the corresponding folder in 'myPackage' (hint: /packages/myPackage/server/models/) A product needs to have the following fields with specific types. Here is an example of a Phone object can be stored in the MongoDB:

   {
       "age": 0, 
       "id": "motorola-xoom-with-wi-fi", 
       "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
       "name": "Motorola XOOM\u2122 with Wi-Fi", 
       "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
   }

This is taken from phones.json used by the AngularJS tutorial. If you have gone through the tutorial, you should have realized that instead of using a DB, json files were used to simplify the tutorial. Find phones.json in /app/phones in the angular tutorial folder and try importing its content to MongoDB so you can use them in your current MEAN package.

  • Run mongod and connect to mongo shell (mongo --shell), then type "use mean-dev" to switch to database used by mean.
  • Type mongoimport --db mean-dev --collection phones --type json --file <path to phones.json> --jsonArray
  • Type show collections to see if phones are added to your database, type coll = db.phones to see the content of the file.

Controllers

Find article.js in the controllers folder. Try to understand what each part does.




View

Let's switch to the public folder where the views




Packages

  • Create a package and locate it. Compare the file structure

Once you init and run an app,