DOCSLIB.ORG

MEAN from Scratch Res.Send(Docs) }) MEAN: Node.Js })  Create Server.Js  Modify Server.Js to Accept New To-Do Item

MEAN from Scratch Res.Send(Docs) }) MEAN: Node.Js })  Create Server.Js  Modify Server.Js to Accept New To-Do Item

>> tmp.priority = 5 >> db.update({_id: tmp._id}, tmp) MEAN Install MongoDB driver and related libraries MongoDB, Express, AngularJS, Node.js --save options will insert a line corresponding to installed components in package.json >> npm install --save mongojs Required Software: Node.js, MongoDB, Git Required Global Node Packages: bower, grunt, karma, * Modify server.js to serve to-do list. protractor, http-server (must be installed with npm –g install) var mongojs = require('mongojs') Required Local Node Packages: express, express-session, ... body-parser, mongojs, passport, passport-local, mongoose var db = mongojs.connect("mongodb://localhost/todo- Required Bower components: angular, angular-resource, mean", ['todo']) bootstrap, angular-bootstrap, angular-loading-bar ... app.get('/todo', function(req, res){ db.todo.find({}, function(err, docs){ MEAN from Scratch res.send(docs) }) MEAN: Node.js }) Create server.js Modify server.js to accept new to-do item. var http = require('http'); var server = http.createServer(function(req, res){ Following code can only accept to-do item in JSON format res.writeHead(200, {'Content-type': 'text/plain'}); (request with Content-Type: application/json) res.end('Hello world\n'); var bodyParser = require('body-parser') }); ... app.use(bodyParser.json()) server.listen(8000); ... console.log('Server is ready!'); app.post('/todo', function(req, res){ db.todo.insert(req.body, Run Node HTTP server. function(err, docs){ >> node server.js res.send(docs) } ) MEAN: Express }) Create project directory with package.json in it { MEAN: AngularJS "name": "mean-scratch", "description": "Mean from scratch", MVC "dependencies": { Render to-do list from hard-coded data. "express": "3.x" <html ng-app="todoApp"> } <head> } <title>Todo List</title> <script type="text/javascript" Install node modules by running following commands src="bower_components/angular/angular.js"></script> at project directory </head> >> npm install <body ng-controller="todoCtrl"> <div> Modify server.js to provide Express-based server, run it. <input type="text" ng-model="instance.title"/> This example does not utilize View Engine of Express. Many <input type="number" ng-model="instance.priority"/> of them are available including Jade, EJS, Swig <button ng-click="add()">Add</button> var express = require('express') </div> var app = express() <ul ng-repeat="todo in todos | orderBy:'priority'"> <li>{{todo.title}}</li> //use 'static' middleware </ul> app.use(express.static(__dirname + '/app')) </body> <script type="text/javascript"> app.get('/', function(req, res){ var app = angular.module('todoApp', []); res.send('Hello world') app.controller('todoCtrl', function($scope){ }) $scope.instance = {}; $scope.todos = [ app.listen(8000) {title: 'A', priority: 3}, {title: 'B', priority: 4}, MEAN: MongoDB {title: 'C', priority: 1}]; Install & Run MongoDB $scope.add = function(){ $scope.todos.push($scope.instance); >> mongod --dbpath=data/ $scope.instance = {}; }; Run MongoDB shell (/bin/mongo) to manipulate your }); database. </script> >> show databases </html> >> use todo-mean >> db.todo.insert({title: 'first in list', priority: 4}) >> db.todo.find() >> tmp = db.todo.findOne({title: 'first in list'}) CNR & PUPA, COE/PSU - V1.02 1 Tips: Most of JavaScript libraries can be downloaded using For modularity purpose, following codes are written in bower. “.bowerrc” can be created to control where bower lib/config/auth.js components are stored. var db = require('./db').db, passport = require('passport'), LocalStrategy = { require('passport-local').Strategy; "directory": "app/bower_components" var ObjectId = require('mongojs').ObjectId } // Serialize sessions ngResource passport.serializeUser(function(user, done) { Provide interaction support with RESTful services via the done(null, user._id); $resource service. }); To use ngResource, angular-resource.js must be included. <script type="text/javascript"> passport.deserializeUser(function(id, done) { var app = angular.module('todoApp', console.log('deserializing => ' + id); ['ngResource']); db.user.findOne({ _id: new ObjectID(id) }, function (err, user) { app.factory('Todo', function($resource){ done(err, user); return $resource('todo/:_id', {_id: '@_id'}); }); }); }); app.controller('todoCtrl', function($scope, Todo){ // Use local strategy $scope.instance = {}; passport.use(new LocalStrategy({ $scope.todos = Todo.query(); usernameField: 'username', $scope.add = function(){ passwordField: 'password' var todo = new Todo($scope.instance) }, todo.$save(function(_todo){ function(username, password, done) { $scope.todos.push(_todo); db.user.findOne({ username: username }, $scope.instance = {} function (err, user) { }); if (err) { }; return done(err); }); } </script> if (!user || user.password != password) { return done(null, false, { 'errors': { 'password': { Node.js and Express type: 'Password is incorrect.' } Modularity } Node.js leverage most of its modularity features on }); Require.js } Create a JavaScript source file return done(null, user); }); Use require('…') to import another module } Assign variable or function to exports.* to make them )); available to others For example, move database connection logics to To protect resources, create a method as an express lib/config/db.js middleware. var mongojs = require('mongojs'); exports.ensureAuthenticated = function (req, res, next) { exports.db = mongojs.connect(...); if (req.isAuthenticated()) { return next(); } res.send(401); require(‘mongojs') is no longer required in server.js, db } can be assigned directly. var db = require('./lib/config/db').db; Create routes for authentication. var auth = require('lib/config/auth'); Passport ... Support many providers such as Facebook, Twitter, Google app.get('/home', auth.ensureAuthenticated, and Local function(req, res){ res.send('Hello home'); Additional npm packages must be installed: express- }); session, passport, passport-local. Most of them are in form of express middleware. Order of applying middleware app.post('/login', passport.authenticate('local'), is matter. function(req, res){ var cookieParser = require('cookie-parser'); res.json({username: req.user.username}) var passport = require('passport'); }); app.use(cookieParser()); app.get('/logout', function(req, res){ app.use(bodyParser.json()); req.logout(); app.use(express.session({secret: 'SUPER*cat'})); res.json({result: 'ok'}) app.use(passport.initialize()); }); app.use(passport.session()); See more from angular-passport. >> git clone https://github.com/DaftMonk/angular- passport CNR & PUPA, COE/PSU - V1.02 2 Mongoose Angular provides a service, $controller, which will retrieve your controller by name. Mongoose provides a straight-forward, schema-based solution to modeling your application data and includes describe('PhoneListCtrl', function(){ built-in type casting, validation, query building, business logic hooks and more, out of the box. beforeEach(module('phonecatApp')); var mongoose = require('mongoose'); it('should create "phones" model with 3 phones', mongoose.connect('mongodb://localhost/test'); inject(function($controller) { var scope = {}, var kittySchema = mongoose.Schema({ ctrl = $controller('PhoneListCtrl', name: String $scope:scope}); }, {collection: 'Kitten'}) kittySchema.methods.speak = function () { expect(scope.phones.length).toBe(3); var greeting = "Meow name is " + this.name; })); console.log(greeting); }); } mongoose.model('Kitten', kittySchema) Run the test. In any module that requires mongoose can access >> karma start karma.conf.js collections. End-to-End Testing with Protractor var Kitten = mongoose.model('Kitten'); Kitten.find({}, function(err, docs){...}); After installing protractor globally. Download new Kitten(...).save(); //or Kitten.save(...); selenium web driver. >> webdriver-manager update Name can be required. name: {type: 'String', unique: true, required: true} Create test/protractor.conf.js exports.config = { allScriptsTimeout: 11000, AngularJS specs: [ 'e2e/*.js'], capabilities: {'browserName': 'chrome'}, Routing & Multiple Views baseUrl: 'http://localhost:8000/app/', framework: 'jasmine', Template jasmineNodeOpts: { defaultTimeoutInterval: 30000 } The $route service is usually used in conjunction with the }; ngView directive. Test case using Protractor API <html lang="en" ng-app="phonecatApp"> ... describe('PhoneCat App', function() { <script src=".../angular.js"></script> describe('Phone list view', function() { <script src=".../angular-route.js"></script> <script src="js/app.js"></script> beforeEach(function() { <script src="js/controllers.js"></script> browser.get('app/index.html'); <body> }); <div ng-view></div> </body> it('should filter the phone list as user types into the search box', function() { Route Configuration var phoneList = element.all( var phonecatApp = angular.module('phonecatApp', [ by.repeater('phone in phones')); 'ngRoute']); var query = element(by.model('query')); phonecatApp.config(['$routeProvider', expect(phoneList.count()).toBe(3); function($routeProvider) { $routeProvider. query.sendKeys('nexus'); when('/phones', { expect(phoneList.count()).toBe(1); templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl' query.clear(); }). query.sendKeys('motorola'); when('/phones/:phoneId', { expect(phoneList.count()).toBe(2); templateUrl: 'partials/phone-detail.html', }); controller: 'PhoneDetailCtrl' }); }). }); otherwise({ redirectTo: '/phones' Run e2e test }); }]); >> protractor test/protractor.conf.js Link to /phones can be put at a href. In PhoneDetailCtrl, You may try

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    4 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us