MEANS Angular,Sails,Mongo,Node,Express,

23
John: Pick Systems, Rev,Arev, MS Access, VB, Delphi, Asp.net, Silverlight History Matt: X I used to avoid JS whenver My old stack was dated Web is ready for SPA

description

MEANS Angular,Sails,Mongo,Node,Express,

Transcript of MEANS Angular,Sails,Mongo,Node,Express,

John: Pick Systems, Rev,Arev, MS Access, VB, Delphi, Asp.net, SilverlightHistoryMatt: XI used to avoid JS whenverMy old stack was datedWeb is ready for SPA

Its a new WorldNPM, Bower, Grunt, Jade, GIT , EJS, Yoman, Boostrap, Javascript, HTML5, Angular, Node, NoSql SPA, Jade, CSS3, Twitter BootstrapThe Web is ChangingThe Browser is getting smarterThick Clients / SPANode.js is an event-driven, server-side JavaScript environment. Node runs JavaScript using the V8 engine developed by Google for use in their Chrome web browser. Leveraging V8 allows Node to provide a server-side runtime environment that compiles and executes JavaScript at lightning speeds. The major speed increase is due to the fact that V8 compiles JavaScript into native machine code, instead of interpreting it or executing it as bytecode. Node is open source, and cross-platform, running on Mac OSX, Windows, and Linux.ts a server-side JavaScript framework. That means the same type of code that powers awesome Ajax applications like Gmail will now power its servers, too. Code reuse FTW!Its driven by asynchronous design. That means that it doesnt have to wait for slow file I/O or database operations to continue processing, which makes it really damn fast (by that I mean faster than most other popular server languages / platforms). It also means that it can handle millions of concurrent connections at once.It makes real-time applications a walk in the park.1 Language Stack to rule them all

Why NodeEasy to setup and RunFast AggregationDocument Based Native (json) no metadata requiredGeospatial index and querying (No need to compute great circle distance Calc)Many cloud options (heroku,nodjitsu, rackspace:http://www.objectrocket.commongolab,mongohqHighly scalable (Sharding)

Why NotNo transactions, no joins

Why MongoSimple ArchitectureVery FastEasy to integrate with backendState in clientMV Whatever2 way data bindingAnnimationsLarge supportive community, growing every day

Why Notlarge initial page loadSEO (there are solutions: see yearofmoo.com)No IE 7 supportIE8 can be difficult

Why AngularWhy SailsJSsailsjs.orgNew MEANS Stackmongo,express,angular,node,sailsProduction ReadyLeverage javascript libraries like underscore, Q,Grunt,Express, SocketIO. Apps are easy to buildVery testable and easy to deployTo meet meet the ever increasing requirements of Live Interactive data with automatic refreshes and aninimationsIt rests on top of Socket.io and the popular Express framework, and you have access to them in their entirety, natively.

Simple installnpm install -g sailsConvention Over Configuration (like Rails)

Code Generator and Scaffolding>sails new testProject

>sails generate user (will create model and controller for user entities)

Anchors Aweigh!>sails lift (runs node server, makes use of grunt)

RESTful endpointsCreate user object to test server: http://localhost:1337/user/create?username=John Tomaselli&[email protected]&password=123456&role=4&title=software programming

http://localhost:1337/user

Backend Organization {image of dir structure}

Similar to frontendRoutesModelsControllersConfig: Simple change will fire up a different backendData Out-of-the-box: Mongodb, mysql, reddisYou can create a custom adapter too!

config/adapters.js

Similar to frontendRoutesModelsControllersConfig: Simple change will fire up a different backendconfig/adapters.jsmodule.exports.adapters = { // If you leave the adapter config unspecified // in a model definition, 'default' will be used. //'default': 'disk', 'default': 'mongo', // In-memory adapter for DEVELOPMENT ONLY memory: { module: 'sails-memory' }, // Persistent adapter for DEVELOPMENT ONLY // (data IS preserved when the server shuts down) disk: { module: 'sails-disk' },

config/adapters.js // MySQL is the world's most popular relational database. mysql: { module: 'sails-mysql', host: 'YOUR_MYSQL_SERVER_HOSTNAME_OR_IP_ADDRESS', user: 'YOUR_MYSQL_USER', password: 'YOUR_MYSQL_PASSWORD', database: 'YOUR_MYSQL_DB' } , mongo: { module : 'sails-mongo', host : 'localhost', port : 27017, database : crm }};

Controllerssails generate controller comment create destroy tag likegenerates:

// Comment controller with generated actions.var CommentController = { create: function(req, res) {

},

destroy: function(req, res) {

},

tag: function(req, res) {

},

like: function(req, res) {

}}

module.exports = CommentController;

Sails controllers work very similarly to controllers in other MVC frameworks. Think of controllers as being the middleman between your model and your views.

Controller BlueprintsAfter a controller has been defined, Sails will automatically map out routes to give you easy access.For the controller above, the routes would be the following:http://localhost:1337/comment/createhttp://localhost:1337/comment/destroyhttp://localhost:1337/comment/taghttp://localhost:1337/comment/likeAdditionally, thanks to blueprints, you also get these methods by default:get /:controller/:id?post /:controllerput /:controller/:iddelete /:controller/:id/:controller/find/:id?/:controller/create/:controller/update/:id/:controller/destroy/:id

config/routes.js # Conventions GET : /:controller => findAll() GET : /:controller/read/:id => find(id) POST : /:controller/create => create() POST : /:controller/create/:id => create(id) PUT : /:controller/update/:id => update(id) DELETE: /:controller/destroy/:id => destroy(id)

# You can also explicitly state the action GET : /:controller/find => findAll() GET : /:controller/find/:id => find(id) POST : /:controller/create => create(id) PUT : /:controller/update/:id => update(id) DELETE: /:controller/destroy/:id => destroy(id)

config/routes.js 'get /logout': { controller: 'AuthController', action: 'logout' } , '/': { view: 'home/index' // view: 'partials/home' } , '/partials/:file' : { controller : 'foo', action : 'partials'} , '/meetings/:lat/:lng/:radius': { controller: 'foo', action: 'test' } , '/partials/meetings/:lat/:lng/:radius': { controller: 'foo', action: 'test2' }

ie:http://localhost:1337/vendor?State=NY

Models: Attributes

module.exports = { attributes : { "VendorID" : "string", "VendorNumber" : "string", "CompanyName" :"string", "Address" : "string", "City" : "string", "State" : "string", "ZipCode" : "string", "Country" : "string", "Type" : "integer", "CompanyAddition" : "string", "Terms" : "integer", "AccountID" : "integer", "VendorAccountId" :"integer", "contacts" : "array" },

Models: methods Instance MethodsLifecycle Callbacks

Angular ClientC:\Node\Apps\sails9\park-tower\assets\linker\js\app\controllers\controllersPO.js'use strict'Application.Controllers.controller('PoEditCtrl', ['$rootScope', '$scope', '$location', '$http', '$routeParams', 'mongosailsHelper', '$q', 'lookupCache', 'lookupCachePO', 'lookupCacheAcct', '$timeout', 'PO', function ($rootScope, $scope, $location, $http, $routeParams, mongosailsHelper, $q, lookupCache, lookupCachePO, lookupCacheAcct, $timeout, PO) { // PO comes from app .factory('PO', ['$resource', function ($resource) { var param = $routeParams.id;//POID; $scope.save = function () { //console.log('in sav ')

if ($scope.mess === 'Create New PO') { PO.create(0, ( $scope.po1), function (success, error) { //console.log('create success ', success, error, success.data.POID); if (success.data.POID !== 0) { var poPromise = lookupCachePO.resetPO();// look to refactor $location.path('/po'); Angular} }); } else { var id = $scope.po1.id; PO.update(({id: id}, $scope.po1)); // updates json without the id // console.log(' $scope.poOrig.newValue;:: ', $scope.poOrig.newValue) // place values back from poview $scope.po1.vendorName = $scope.currentVendor.CompanyName; $scope.po1.acctDesc = $scope.currentAccount.Desc; $scope.po1.newValue = 'test';// $scope.poOrig.newValue; // just for test $location.path('/po'); } };App.jsApp.jsvar Application = Application || {};Application.Services = angular.module('application.services', []);Application.Controllers = angular.module('application.controllers', []);Application.Filters = angular.module('application.filters', []);Application.Directives = angular.module('application.directives', []);angular.module('application', ['application.filters', 'application.services', 'application.directives', 'application.controllers','ngResource','ngRoute','angular-table','ui.bootstrap','ngGrid','ngCookies']) .config(['$routeProvider', '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) { var access = routingConfig.accessLevels; $routeProvider // anon .when('/', {templateUrl: '/partials/login', controller: 'LoginCtrl', access: access.anon}) .when('/home', {templateUrl: '/partials/home', controller: 'HomeCtrl', access: access.anon}) .when('/login', {templateUrl: '/partials/login', controller: 'LoginCtrl', access: access.anon}) .when('/logout', {templateUrl: '/partials/login', controller: 'LogoutCtrl', access: access.user}) // .when('/view1', {templateUrl: '/partials/partial1', controller: 'MainCtrl',access: access.anon}) .when('/foodview', {templateUrl: '/partials/foodview', controller: 'FoodCtrl', access: access.anon}) .when('/vendor', {templateUrl: '/partials/vendorview', controller: 'VendorCtrl',access: access.user}) //using modal .when('/vendor/:VendorNumber', {templateUrl: '/partials/vendorviewedit', controller: 'VendorEditCtrl',access: access.user})