API Driven Application - AngulatJS, NodeJS and MongoDB | JCertif Tunisia 2015
1 like794 views
This document discusses API driven applications using the MEAN stack. It provides an overview of REST APIs and the HTTP verbs used in CRUD operations. It then explains the basics of AngularJS for building front-end applications, Node.js and its event-driven and non-blocking architecture for building servers, and MongoDB for storing data in flexible JSON-like documents rather than rigid relational tables. Code examples are provided for basic AngularJS directives and controllers, setting up routes and handling requests in Node.js with Express, and performing CRUD operations in MongoDB with Mongoose.
![Update
● Model.update(conditions, update, [options],
[callback])](https://image.slidesharecdn.com/apingnodemongojcertif-150205181313-conversion-gate01/85/API-Driven-Application-AngulatJS-NodeJS-and-MongoDB-JCertif-Tunisia-2015-35-320.jpg)
![Delete
● Model.remove(conditions, [callback])
app.delete('/DeleteSpeaker/:id',function(req,res){
Speaker.remove({ _id : req.params.id}, function (err) {
if (err) return res.send(err);
res.json({"result":"success"});
});
});](https://image.slidesharecdn.com/apingnodemongojcertif-150205181313-conversion-gate01/85/API-Driven-Application-AngulatJS-NodeJS-and-MongoDB-JCertif-Tunisia-2015-36-320.jpg)
API Driven Application - AngulatJS, NodeJS and MongoDB | JCertif Tunisia 2015
- 1. API Driven Applications AngularJS, NodeJS and MongoDB @HmidiHamdi JSA | JCertif TN Software Engeneering | ISSATSo Member & Founder | ISSATSo Google Club
- 2. Agenda - API Driven Application - Getting started with Angular JS - Basics Of Node JS - Discovering MongoDB
- 4. REST API REST = Representation State Transfer. - Client Sends HTTP verbs(GET, POST, DELETE, PUT) along with a URL and variable parameters that are unlencoded. - The URL tells us what object to act on. - Server Replies with a result code and valid JSON.
- 5. HTTP Verbs - CRUD - GET : when a client want to read an object. - POST : when a client want to ceate an object. - PUT : when a client want to update an object. - DELETE : when a client want to delete an object.
- 6. Why REST API ? a simple way to create a data service enabling you to easy create all your other applications: - HTML5 / JAVASCRIPT. - ANDROID. - IOS.
- 7. MEAN STACK M : MongoDB (Most Popular NoSql DataBase). E : ExpressJS (Web Application Framework). A : AngularJS (A Robust Framework for creating HTML5 and Javascript rich web Applications). N : NodeJS (Server-side Javascript interpreter).
- 10. ● ● ● ●
- 11. ● ● ● ● ●
- 12. <!doctype html> <html> <head ng-app > <title>Exemple 1</title> <SCRIPT TYPE="text/javascript" src="JS/angular.min.js"> </SCRIPT> </head> <body > <input type="text" ng-model="name" > <h1>Hello {{name}} </h1> </body> </html>
- 13. Directives <html ng-app> <input type="text" ng-model="name" > <ng-view > </ng-view>
- 14. Model
- 16. Events ● ng-click ● ng-hide/ng-show ● ng-dbl-click ● ng-keydown ● ng-keyup
- 17. Routing
- 18. AJAX
- 19. Let’s Drive in
- 21. What is NodeJS ? ● Open Source, Cross-platform runtime environment for server-side and networking applications. ● NodeJS provides an Event-Driven architecture and non-blocking I/O API. ● Run your Javascript on Server. ● Uses V8 Engine.
- 22. Hello Node JS
- 24. Express JS
- 25. Uses app.use(express.static(__dirname + '/Public')); // set the static files location /public/img will be /img for users app.use(morgan('dev')); // log every request to the console app.use(bodyParser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded app.use(bodyParser.json()); // parse application/json app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json app.use(methodOverride());
- 26. Routes app.get('/todos/:id', function (req, res, next) { var todo=getTodo(id); res.json(todo); }); ------------- app.get('/todos', function (req, res, next) { var todos= getTodos(); res.json(todos); });
- 28. What is MongoDB? MongoDB is an Open-Source document- oriented NoSQL database. It stores data in JSON-like format.
- 29. Why use MongoDB ? - SQL databases was invented to store data. - MongoDB stores documents (or) Objects. - now-a-days, everyone works with Objects (Python/Ruby/Java/etc). - And we need Databases to persist our objects. - why not store objects directly? - Embedded documents and arrays reduce need for Join.
- 30. MongoDB Tools ● Mongo : MongoDB client as a Javascript shell. ● MongoImport : import CSV, JSON and TSV data. ● MongoExport : export data as JSON and CSV.
- 31. NoSQL DataBase Terms: DataBase : Like other Relational DataBases. Collection : Like Table in RDBMS(Has no common Schema). Document : Like a Record in RDBMS or Row. Field : Like a RDBMS column {key : value }.
- 32. Mongoose CRUD(Create, Read, Update, Delete) var mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/MyApp'); var SpeakerSchema = new mongoose.Schema({ name : String , img : String, detail : String }); var Speaker = mongoose.model('Speaker',SpeakerSchema);
- 33. Create app.post('/NewSpeaker',function(req,res){ var sp = new Speaker({ name : req.body.nameS, img : req.body.imgS, detail: req.body.det }); sp.save(function(err){ if(err) console.log(err); else res.json(sp); }); });
- 34. Read app.get('/getSpeakers/:Name',function(req,res){ Speaker.findOne({ name: req.params.Name }, function (err, doc){ if (err){ res.send(err); } res.json(doc); }); }); app.get('/getSpeakers',function(req,res){ Speaker.find(function(err, todos) { if (err){ res.send(err); } res.json(todos); // return all todos in JSON format }); });
- 35. Update ● Model.update(conditions, update, [options], [callback])
- 36. Delete ● Model.remove(conditions, [callback]) app.delete('/DeleteSpeaker/:id',function(req,res){ Speaker.remove({ _id : req.params.id}, function (err) { if (err) return res.send(err); res.json({"result":"success"}); }); });
- 37. <Coding Time !>