This document provides an overview of the MEAN stack and demonstrates how to build a sample application with it. It begins with defining each component of the MEAN stack: MongoDB as the database, Express as the web application framework, AngularJS for the frontend framework, and Node.js as the runtime environment. It then demonstrates setting up a basic Express app, integrating authentication with Passport, and interacting with MongoDB using Mongoose. The document also discusses key concepts like asynchronous I/O in Node.js and model-view-controller patterns in AngularJS. Overall, it serves as a high-level introduction to the technologies that make up the MEAN stack.
MongoDB Days Silicon Valley: Building Applications with the MEAN StackMongoDB
Presented by Jason Zucchetto, Curriculum Engineer, MongoDB
Experience level: Introductory
Walk through building a sample application with the MEAN stack (MongoDB-Express-Angular-Node.js). We'll start from the beginning, walking through every component of the MEAN stack, in building a modern web application. The presentation focuses on building MongoMart, a simple application for searching and viewing MongoDB merchandise. You'll walk away with a basic knowledge of MEAN stack components and how to leverage them in building applications.
The document provides an overview of the MEAN stack, which uses JavaScript for full-stack development. It discusses the evolution of web development from separate front-end and back-end work to full-stack JavaScript with Node.js. The MEAN stack combines MongoDB for the database, Express for the web framework, Angular for the front-end, and Node.js as the runtime environment. Each component is introduced, with Node.js using a single-threaded and asynchronous model, Express providing features like routing and middleware, Angular using templates and two-way data binding, and MongoDB as a flexible document database.
This meetup will bring us back to basics with a bootstrapping session on building an all Javascript web application on a MEAN Stack:
• MongoDB - NoSQL DB
• ExpressJS - Server Application Framework
• AngularJS - Client Application Framework
• NodeJS - Application Platform
I'll cover the basics of getting bootstrapped with Node.js and building out a fully featured web application from backend-to-frontend. I'll highlight some of the advantages of an all javascript web application as well as show some development tips leveraging gruntJS based on Nate's presentation last meetup.
This ppt is all about the MERN stack in JavaScript.
So, will first discuss:
What is Mern,
what is MongoDB, expressJS,reactJS and nodeJS.
Also, I bit more discussed the Installation process.
Getting the MERN stacks will sure increase your web development skills in 2020.
The document provides an overview of the MEAN stack, which is a full-stack JavaScript solution for building web applications. It consists of MongoDB (a NoSQL database), Express (a Node.js web application framework), AngularJS (a client-side framework), and Node.js (a JavaScript runtime). The document discusses each component, how they work together, advantages like using a single programming language throughout and ability to build fast applications, and disadvantages like MongoDB not being as robust as SQL databases. It concludes that MEAN provides a fast, easy way to create modern, responsive dynamic web sites.
Rapid Application Development with MEAN StackAvinash Kaza
This document proposes a new RAD (Rapid Application Development) approach using the MEAN stack (MongoDB, ExpressJS, AngularJS, NodeJS) to quickly build full-stack web applications. It describes how the authors built a basic TODO application over a weekend using this approach. The key advantages highlighted are the ability to build and test applications quickly at low cost, with high flexibility to change requirements later.
MEAN Stack is a full-stack JavaScript solution that helps you build fast, robust and maintainable production web applications using MongoDB, Express, AngularJS, and Node.js.
The document discusses the MEAN stack, which is a full-stack JavaScript solution for building web applications using MongoDB, Express, AngularJS, and Node.js. It describes each component, why the MEAN stack is useful, and key concepts like non-blocking I/O, MVC architecture, and Angular directives. Tools like Yeoman, Grunt, and Bower that are often used with MEAN projects are also covered, as well as deployment.
Building an E-commerce website in MEAN stackdivyapisces
This document provides an overview of building an eCommerce site using the MEAN stack. It begins with an introduction to JavaScript and then discusses the key components of the MEAN stack including Node.js, AngularJS, and MongoDB. It provides details on each component, their history, features, and how they work together. It emphasizes how MongoDB is well-suited for eCommerce applications due to its flexible schema and ability to store different product types within the same collection.
This document summarizes a presentation about building an IoT application using the MEAN stack. It discusses five key things they learned: performance depends on test data; MEAN is fast to develop with but frameworks can obscure what's happening so profiling is important; incremental aggregation works well for IoT; Node.js bottlenecks before MongoDB; and performance tuning patterns like identifying bottlenecks and slam-dunk optimizations. It also describes building user stories for an advertising application, modeling the data, initial measurements that guided prototyping, challenges of scaling, and using "boxes" to identify hot sales areas.
The document provides an overview of the MEAN stack, which is a collection of JavaScript technologies used to develop web applications. It consists of MongoDB (a no-SQL database), ExpressJS (a web application framework), AngularJS (a front-end JavaScript framework), and NodeJS (a runtime environment for JavaScript). Each technology is described briefly, outlining its purpose and benefits like performance, scalability, and the use of a single programming language throughout the application stack.
This document provides an overview of the MEAN stack and how it can be used to quickly prototype and build web applications. It discusses how MongoDB, ExpressJS, AngularJS, and NodeJS work together to allow real-time data binding from the database to the client. The document also covers best practices for adapting applications based on feedback, automating testing, and scaling applications efficiently as they grow in usage.
This document provides an overview of a guided hackathon to build a single page application using the MEAN stack (MongoDB, Express, AngularJS, Node.js) in 2 hours. It outlines the concepts that will be covered, including API testing, DOM integration testing, build systems, and more. Attendees will build a package manager for the Go programming language, creating the server with Express and Mongoose, and the client with AngularJS and Browserify. Testing will be done with Mocha, Karma, and other tools.
The document discusses the MEAN stack, including its components (MongoDB, Express, AngularJS, Node.js) and how they work together. It notes that the MEAN stack allows building full-stack web applications using only JavaScript, and that it offers advantages like increased productivity, ease of debugging, and support for MVC architecture. Some disadvantages mentioned are that MongoDB may not scale as well for very large applications. The document then proposes building a simple app to demonstrate the MEAN stack in action.
Part One: Building Web Apps with the MERN StackMongoDB
This document provides an overview and agenda for a workshop on building web applications with the MERN stack using MongoDB Atlas and Google Cloud Platform. It introduces MERN stack technologies like MongoDB, Express, React, and Node.js. It discusses database concepts and shows how to get started with MongoDB Atlas, including creating a free account and building a cluster. It also outlines plans to code an exercise tracker application using MongoDB and Mongoose to explore and work with data in the MongoDB Atlas database.
MEAN is a collection of JavaScript-based technologies — MongoDB, Express.js, AngularJS, and Node.js — used to develop web applications. From the client and server sides to databases, MEAN is a full-stack development toolkit. Play through the following five courses to become a MEAN stack developer and earn a new badge!
This document discusses strategies for improving JavaScript performance on websites. It begins by noting that JavaScript is often the number one cause of slow web pages. It then reviews the history of JavaScript loading approaches, from loading scripts in the page head in 1995 to more modern async and deferred loading. It discusses using localStorage as a cache and the Google Analytics async snippet as examples. It concludes by recommending tools and resources for measuring and improving JavaScript performance, including WebPagetest.org, ControlJS, and Steve Souders' own site and books.
A Lecture given in Aalto University course "Design of WWW Services".
Single page app is already several years old web application paradigm that is now gaining traction due to the interest towards HTML5 and particularly cross-platform mobile (web) applications. The presentation overviews the single page application paradigm and compares it with other web app paradigms.
The presentation uses Backbone.js as the sample and gives practical tips on how to best structure Backbone.js applications. It contains an extensive set of tips and links in the notes section.
The reader is adviced to download the presentation for better readability of the notes.
This document provides an overview of the MEAN stack and its components. It discusses Node.js and its asynchronous and non-blocking architecture. It introduces MongoDB for data storage. It also covers Express, a web application framework for Node.js, and Angular 2, a front-end framework. Code examples and demos are provided for Node.js, Express, MongoDB integration, and building an Angular 2 application. The document is intended to educate developers on the MEAN stack technologies.
Node.js is an asynchronous event-driven JavaScript runtime that uses non-blocking I/O to build scalable network applications. It allows for the creation of web servers and networking tools using a event-driven, non-blocking I/O model rather than the traditional threaded model. Node.js is popular because it uses JavaScript and allows code reuse on both the server-side and client-side, offers high performance and scalability for real-time applications, and has a large passionate community supporting its use.
1) Single page applications (SPAs) use JavaScript to dynamically update the content of a single web page rather than loading entire new pages. This reduces page refreshes.
2) React is a popular JavaScript library for building user interfaces, especially for SPAs. It uses a virtual DOM for faster rendering.
3) Create-React-App is a command line interface that sets up a React project with common dependencies like Babel and Webpack preconfigured.
Topics covered :
- What is Meteor
- What is inside
- What is reactivity
- Reactivity in Meteor
- DDP
- Minimongo
- To use or Not to use
- File Structure
In the times of rapid app development, we need better ways to quickly develop interactive web applications and that is where JavaScript frameworks such as angularJS come to the rescue. The slides discuss how the tech stack evolved, the architectural concepts behind them and the usage of such frameworks along-with few other technologies to use together
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
Node.js is an open source command line tool built for the server side JavaScript code.
Node ACS allows customers to extend the Appcelerator Cloud Services platform using Node.js. Node.js provides an event-driven and scalable framework for building network applications. With Node ACS, customers can create custom microservices that integrate with ACS features like checkins and social posting. These microservices can leverage Node.js modules and scale using MongoDB. The document provides examples of setting up a Node.js app with ACS, adding services, using modules, calling the ACS API, and connecting to MongoDB for data storage. This allows customers to build and deploy scalable web services without server configuration.
The document summarizes an AngularJS workshop that covers AngularJS core principles, building a sample website, and AngularJS 2. It discusses building the sample site from scratch using tools like NodeJS, Bower, and Bootstrap. Key AngularJS concepts covered include modules, views, controllers, directives, routing, promises, and AngularJS 2.0. Hands-on tasks include adding routing, creating a header directive, loading data from a service, and validating a form.
1> What is node
2> What is node.js
3> Installation steps
4> Create first Node application
5> How it works ?
6> Why node is so popular ?
7> Where to use ?
8> Advantages
9> Disadvantages
10> Statistics
1) Isomorphic JavaScript allows code to run on both the client and server by being environment-agnostic or shimmed for different environments.
2) It improves performance by enabling faster initial page loads and improves SEO by allowing search engines to crawl single page apps.
3) Popular libraries like Underscore, Backbone, Handlebars, and React can be used isomorphically, and isomorphic applications exist on a spectrum from sharing small parts of code to entire applications.
Node.js is an open-source JavaScript runtime environment that allows building scalable server-side and networking applications. It uses asynchronous, event-driven, non-blocking I/O which makes it lightweight and efficient for data-intensive real-time applications that run across distributed devices. Some key features of Node.js include excellent support for building RESTful web services, real-time web applications, IoT applications and scaling to many users. It uses Google's V8 JavaScript engine to execute code outside of a browser.
Meteor is a JavaScript web framework developed by the Meteor Development Group. It uses a single JavaScript codebase across both client and server and allows for real-time updates through WebSockets. Meteor uses MongoDB as its default database and includes packages for user accounts, routing, and more. Some key features include latency compensation, reactivity across all layers of the app, and supporting one language across front-end and back-end.
Node.js is a server-side JavaScript platform that allows building scalable network applications quickly. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js runs on a single thread event loop, handles concurrent connections without blocking and takes advantage of asynchronous programming. It is commonly used for real-time applications that require two-way communication between client and server like chat, streaming etc.
Sails.js is a realtime MVC framework for Node.js that provides conventions and structures for building applications. It includes features like a lightweight ORM, policies for authentication and authorization, and integrates Socket.io for realtime functionality. Sails.js aims to simplify building realtime apps by handling websockets and HTTP requests together and providing patterns for application structure. The framework is actively maintained by an open source community.
This document discusses using various technologies on Google App Engine including JIQL, GaeVFS, RESTlets, scheduled tasks, JRuby on Rails, task queues, XMPP, and Clojure. JIQL emulates a relational database on App Engine's Bigtable datastore. GaeVFS provides a virtual filesystem on Bigtable. RESTlets make RESTful web services easy to implement in Java on App Engine. Scheduled tasks allow for background processing via cron jobs. JRuby on Rails provides a way to run Ruby on Rails applications on App Engine. Task queues allow for asynchronous background processing. XMPP enables instant messaging and peer-to-peer applications. Clojure can also be used
These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"
This document provides an overview of Node.js, including what it is, how it uses JavaScript and an event-driven asynchronous model, and examples of building HTTP servers and RESTful APIs. It also discusses MongoDB for data storage and the Express framework. Node.js is a platform for building fast and scalable network applications using an event-driven, non-blocking I/O model. It is well-suited for data-intensive real-time applications that leverage JavaScript and JSON.
The document discusses several key technologies for developing Java web applications, including Java Servlet technology, WebWork framework, Spring framework, and Apache Maven build tool. It provides an overview of how each technology addresses common problems like stateless communication, business logic implementation, view generation, and data access overhead. Examples are given showing how WebWork and Spring can be used together with Maven to build a simple "Hello World" application that follows the MVC pattern and leverages dependency injection.
Break data silos with real-time connectivity using Confluent Cloud Connectorsconfluent
Connectors integrate Apache Kafka® with external data systems, enabling you to move away from a brittle spaghetti architecture to one that is more streamlined, secure, and future-proof. However, if your team still spends multiple dev cycles building and managing connectors using just open source Kafka Connect, it’s time to consider a faster and cost-effective alternative.
Ansys Mechanical enables you to solve complex structural engineering problems and make better, faster design decisions. With the finite element analysis (FEA) solvers available in the suite, you can customize and automate solutions for your structural mechanics problems and parameterize them to analyze multiple design scenarios. Ansys Mechanical is a dynamic tool that has a complete range of analysis tools.
Overview of ERP - Mechlin Technologies.pptxMitchell Marsh
This PowerPoint presentation provides a comprehensive overview of Enterprise Resource Planning (ERP) systems. It covers the fundamental concepts, benefits, and key functionalities of ERP software, illustrating how it integrates various business processes into a unified system. From finance and HR to supply chain and customer relationship management, ERP facilitates efficient data management and decision-making across organizations. Whether you're new to ERP or looking to deepen your understanding, this presentation offers valuable insights into leveraging ERP for business success.
Sami provided a beginner-friendly introduction to Amazon Web Services (AWS), covering essential terms, products, and services for cloud deployment. Participants explored AWS' latest Gen AI offerings, making it accessible for those starting their cloud journey or integrating AI into coding practices.
An MVP (Minimum Viable Product) mobile application is a streamlined version of a mobile app that includes only the core features necessary to address the primary needs of its users. The purpose of an MVP is to validate the app concept with minimal resources, gather user feedback, and identify any areas for improvement before investing in a full-scale development. This approach allows businesses to quickly launch their app, test its market viability, and make data-driven decisions for future enhancements, ensuring a higher likelihood of success and user satisfaction.
Attendance Tracking From Paper To DigitalTask Tracker
If you are having trouble deciding which time tracker tool is best for you, try "Task Tracker" app. It has numerous features, including the ability to check daily attendance sheet, and other that make team management easier.
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...onemonitarsoftware
Unlock the full potential of mobile monitoring with ONEMONITAR. Our advanced and discreet app offers a comprehensive suite of features, including hidden call recording, real-time GPS tracking, message monitoring, and much more.
Perfect for parents, employers, and anyone needing a reliable solution, ONEMONITAR ensures you stay informed and in control. Explore the key features of ONEMONITAR and see why it’s the trusted choice for Android device monitoring.
Share this infographic to spread the word about the ultimate mobile spy app!
Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdfTrackobit
What do fleet managers do? What are their duties, responsibilities, and challenges? And what makes a fleet manager effective and successful? This blog answers all these questions.
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Softwares
NBFC Software: Optimize Your Non-Banking Financial Company
Enhance Your Financial Services with Comprehensive NBFC Software
NBFC software provides a complete solution for non-banking financial companies, streamlining banking and accounting functions to reduce operational costs. Our software is designed to meet the diverse needs of NBFCs, including investment banks, insurance companies, and hedge funds.
Key Features of NBFC Software:
Centralized Database: Facilitates inter-branch collaboration and smooth operations with a unified platform.
Automation: Simplifies loan lifecycle management and account maintenance, ensuring efficient delivery of financial services.
Customization: Highly customizable to fit specific business needs, offering flexibility in managing various loan types such as home loans, mortgage loans, personal loans, and more.
Security: Ensures safe and secure handling of financial transactions and sensitive data.
User-Friendly Interface: Designed to be intuitive and easy to use, reducing the learning curve for employees.
Cost-Effective: Reduces the need for additional manpower by automating tasks, making it a budget-friendly solution. Benefits of NBFC Software:
Go Paperless: Transition to a fully digital operation, eliminating offline work.
Transparency: Enables managers and executives to monitor various points of the banking process easily.
Defaulter Tracking: Helps track loan defaulters, maintaining a healthy loan management system.
Increased Accessibility: Cutting-edge technology increases the accessibility and usability of NBFC operations. Request a Demo Now!
Lots of bloggers are using Google AdSense now. It’s getting really popular. With AdSense, bloggers can make money by showing ads on their websites. Read this important article written by the experienced designers of the best website designing company in Delhi –
In this talk, we will explore strategies to optimize the success rate of storing and retaining new information. We will discuss scientifically proven ideal learning intervals and content structures. Additionally, we will examine how to create an environment that improves our focus while you remain in the “flow”. Lastly we will also address the influence of AI on learning capabilities.
In the dynamic field of software development, this knowledge will empower you to accelerate your learning curve and support others in their learning journeys.
React and Next.js are complementary tools in web development. React, a JavaScript library, specializes in building user interfaces with its component-based architecture and efficient state management. Next.js extends React by providing server-side rendering, routing, and other utilities, making it ideal for building SEO-friendly, high-performance web applications.
Are you wondering how to migrate to the Cloud? At the ITB session, we addressed the challenge of managing multiple ColdFusion licenses and AWS EC2 instances. Discover how you can consolidate with just one EC2 instance capable of running over 50 apps using CommandBox ColdFusion. This solution supports both ColdFusion flavors and includes cb-websites, a GoLang binary for managing CommandBox websites.
5. What’s MEAN Stack?
MEAN Stack is a full-stack JavaScript solution that helps you
build fast, robust and maintainable production web
applications using MongoDB, Express, AngularJS, and Node.js.
6. What’s a Framework?
structure that includes libraries of code
1. Code and File Organization
2. Libraries & Extensions
3. Faster Development
4. Community
5. Updates
7. What’s a dev Stack?
LAMP - Linux, Apache, MySQL, PHP
.net - Windows, IIS, C#, MSSQL Server
Java - Tomcat, Java, JSP, Oracle
9. What’s express?
Express is a web application framework built on
node.js which comes with a set of features for building
single-page, multi-page, and hybrid web apps.
10. What’s AngularJS?
AngularJS is an application framework that lets you
extend HTML and teach it new tricks. The code is
expressive, readable, and quick to develop.
11. What’s node.js?
Open source
Server side JavaScript
Executed by the V8- a JavaScript engine developed by
Google which is used in Chrome
Comes with built-in library to act as a web server, like
Apache.
12. Why MEAN Stack?
All of these components use JavaScript / JSON.
One language, same context
Consistent
Scalability
Asynchronous
19. I/O Bound vs. CPU Bound Applications
CPU Intensive vs. IO Intensive
node.js is a good solution for IO intensive apps
web applications are usually IO intensive
Background jobs for processing CPU intensive workload
20. Event Loop in Node
(Reactor Pattern - Single Thread)
JavaScript runtime contains a message queue which stores a list of
messages to be processed and their associated callback functions.
These messages are queued in response to external events (such
as a mouse being clicked or receiving the response to an HTTP
request) given a callback function has been provided. If, for
example a user were to click a button and no callback function was
provided – no message would have been enqueued…
21. Synchronous Calls
Code execution will block
(or wait) for the call to return
before continuing.
App will not execute any
further, which could be
perceived by the user as
latency or performance lag
in your app.
22. Node.js Asynchronous Calls
Calls do not block (or
wait) for the call to return
from the server.
Execution continues on in
your program, and when
the call returns from the
server, a "callback"
function is executed.
32. How to create a new express app? (1)
- Ensure you have express-generator installed globally
$ npm install express-generator -g
- Command Options
$ express -h
1. Create a new app
$ express myapp --hogan --css less
33. How to create a new express app? (2)
2. Install dependencies
$ cd myapp && npm install
3. Run the app
$ DEBUG=myapp:* ./bin/www
Run the app on Windows
set DEBUG=myapp & node .binwww
4. Visit your browser
http://localhost:3000/
34. Lab2
1. Create the Hello World Express Application
2. Run the app
3. Check your browser
39. What’s a document store?
Document stores provide an alternative to relational
databases (ex. mysql, postgres), not a replacement.
Each has its place.
40. CAP Theorem (1)
Consistency: All the data change can be seen by all
nodes.
Availability: Reads and Writes are guaranteed to have a
response.
Partition Tolerance: the system will continue working even
if any number of messages sent between nodes is lost.
41. CAP Theorem (2)
Each database engine is designed prioritize two of these.
Understanding these tradeoffs helps in choosing the
correct data stores in different layers of an application.
42. Document Store 1
{
"_id": 1,
"firstname": "Rob",
"lastname": "Davarnia",
"phone": "9491234567",
"email": "robdvr@gmail.com"
}
Rob Davarnia
9491234567
robdvr@gmail.com
47. MongoDB Pros - Sharding & Scaling
Sharding is the process of storing data records
across multiple machines and approach to
meeting the demands of data growth
48. MongoDB Pros - Map/Reduce
Processing and generating large data sets
with a parallel, distributed algorithm on a
cluster.
49. MongoDB Cons - Data size
Typically higher data size because of the repeated
field names stored
50. MongoDB Cons - Less Flexible
Less flexibility for querying (no joins!!)
51. MongoDB Cons - Transactions
No support for transactions. Some atomic operations
are supported.
52. MongoDB Cons - Maturity
Still not as mature as Relational Databases
56. What is AngularJS?
Javascript Framework maintained by Google.
Model-View-Controller (MVC or MV*)
Makes development and testing easier
Teaches HTML new tricks!
58. Quick Web History
1996 - Microsoft introduces the iframe in IE
1999 - Microsoft introduces the XMLHTTP ActiveX control
2004 - Gmail & Kayak, two heavily ajax’ed apps
2005 - Jesse James Garrett’s article coins the phrase AJAX
2006 - jQuery introduced
*Slide by Troy Miles - http://therockncoder.blogspot.com/
59. How can Angular help?
Integrate in parts of your existing website
Single Page Applications (SPA)
60. How can Angular help?
Integrate in parts of your existing website
Single Page Applications (SPA)
63. How a Single Page Application works?
CONTROLLER
VIEW MODEL
RESTful API
BROWSER ROUTER
1
2
3
4
5
DATABASE
64. Feature - Two Way Data-binding
- When the model gets updated, the UI (View) gets updated
- When UI gets updated, the changes are reflected back to the model
65. Feature - Model View Controller
CONTROLLER
VIEW MODEL
DATABASE
BROWSER ROUTER
1
2
3
4
5
66. Feature - Deep Linking
- Deep linking allows AngularJS to get back to the state it
was depending on the URL
- Using the “back” button is okay!
- Hyperlinks won’t break things
67. Feature - Dependency Injection
- Design pattern that implements inversion of control for libraries
- Dependency passed into one or multiple objects
- Easier to test
- Harder to break apps
- If any underlying code changes in your dependency, the object
using it doesn’t care about implantation
70. How Angular works?
• Browser loads the HTML and parses into DOM
• Browser loads angular.js script
• Angular waits for DOMContentLoaded event
• Angular looks for ng-app directive, which designates the app boundary
• The module specified in ng-app is used to configure $injector
• The $injector is used to create the $compile service as well as the $rootScope
• $compile service is used to compile the DOM and link it with $rootScope
• The ng-init directive assigns World to the name property on the scope
• {{ name }} interpolates the expression to “Hello World!”
71. Angular Terms - Controller
Interacts with Model
Sets up what’s needed for presentation (View)
Constructs model and pass it along to view along with
callbacks
72. Angular Terms - Model
Data which gets combined with the template
to produce the view
73. Angular Terms - View
What user sees.
Starts as a template, and then it is merged
with the model, and finally rendered into the
browser DOM
74. Angular Terms - $scope
The scope is responsible for detecting changes to
the model and provides the execution for
expressions.
Also represents the application model.
75. Angular Terms - Directives
A directive is a behavior or DOM transformation which is triggered
by the presence of a custom attribute, element name, or class name.
They make HTML cooler!
76. Angular Terms - Filters
Format and transform data.
example: make text uppercase
77. Angular Directives (1)
• ng-app
Declares an element as a root element of the application allowing behavior
to be modified through custom HTML tags.
• ng-bind
Automatically changes the text of a HTML element to the value of a given
expression.
• ng-model
Similar to ng-bind, but allows two-way data binding between the view and
the scope.
• ng-class
Allows class attributes to be dynamically loaded.
• ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.
78. Angular Directives (2)
• ng-repeat
Instantiate an element once per item from a collection.
• ng-show & ng-hide
Conditionally show or hide an element, depending on the value of a boolean
expression.
• ng-switch
Conditionally instantiate one template from a set of choices, depending on the
value of a selection expression.
• ng-view
The base directive responsible for handling routes that resolve JSON before
rendering templates driven by specified controllers.
• ng-if
Basic if statement directive which allow to show the following element if the
conditions are true.
79. How to create an Angular app?
1. Include angular.js library
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/
angular.min.js"></script>
2. Create AngularJS Application
<html ng-app></html> —OR—
<html ng-app=”demoApp”></html> —OR—
<div ng-app></div> —OR—
<div ng-app=”demoApp”></div>
80. Lab / Hands on
1. Create an angular.js application
2. Write a simple expression to ensure angular is
working
ex: {{ 1+1 }}
81. Simple Data Binding
<input type="text" name="name" ng-model="name"
placeholder="Type your name">
<h3> {{ name }} </h3>
82. Lab
1. Create an angular.js application
2. Write a simple data binding with an input element
and display
3. Type and see the magic!
84. Lab
1. Create an angular.js application
2. Create an additional script (app.js)
3. Include your script
4. Declare your module name
5. Create a controller
6. Add a model to $scope
7. Interpolate the model variable in your view
85. Creating Controllers + Two Way Data Binding
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope){
$scope.name = "hello";
}]);
<div ng-controller="MyController">
{{ name }}
<input type="text" name="name" value="" ng-model="name"
placeholder="Type your name">
</div>
app.js
index.html
86. Lab
1. Create an angular.js application
2. Create an additional script (app.js)
3. Include your script
4. Declare your module name
5. Create a controller
6. Add a model to $scope
7. Interpolate the model variable in your view
8. Add an input text field with the same model name
9. Change the text and see what happens
87. Some Angular Tags (1)
Bind (ng-bind):
1. <span ng-bind=“{expression}”></span>
2. {{ name }}
https://docs.angularjs.org/api/ng/directive/ngBind
Loops (ng-repeat):
<ul>
<li ng-repeat=“item in items”>{{ item }}</li>
</ul>
https://docs.angularjs.org/api/ng/directive/ngRepeat
88. Some Angular Tags (2)
If statement (ng-if):
<div ng-if=“checked”>Show if true!</div>
https://docs.angularjs.org/api/ng/directive/ngIf
Including templates (ng-view):
<div ng-view=“_partial.html”></div>
89. Some Angular Tags (3)
Show and Hide (ng-show / ng-hide):
<div ng-show=“checked”>Show if true!</div>
<div ng-hide=“checked”>Hide if true!</div>
91. Lab
1. Create an angular.js application
2. Create an additional script (app.js)
3. Include your script
4. Declare your module name
5. Create a controller
6. Copy the list of people and add it to $scope
7. Use ng-repeat to display your data
92. Using ng-if
<input type="checkbox" ng-model="checked" ng-init="checked=true" />
Toggling this will show and hide the text!!<br /><br />
<span ng-if="checked">
This is removed when the checkbox is unchecked.
</span>
index.html
93. Lab
1. Create an angular.js application
2. Create an additional script (app.js)
3. Include your script
4. Declare your module name
5. Create a checkbox form tag and assign a model
6. Create a span/div and using ng-if and
checkbox’s model toggle
94. Using ng-show / ng-hide
<input type="checkbox" ng-model="checked" ng-init="checked=true" />
Toggling this will show and hide the text!!<br /><br />
<span ng-if="checked">
1.This is removed when the checkbox is checked.
</span>
<span ng-hide="checked">
2.This is removed when the checkbox is unchecked.
</span>
index.html
95. Lab
1. Create an angular.js application
2. Create an additional script (app.js)
3. Include your script
4. Declare your module name
5. Create a checkbox form tag and assign a model
6. Create two span/divs and use ng-show on one.
Use ng-hide on the other and bind to checkbox’s
model toggle
97. Lab
1. Copy your ng-repeat application
2. Add an input field with a model
3. Add the input field model as a filter to your
ng-repeat
4. Start typing and see what happens!
99. Lab
1. Continue with your existing search application
2. Add a select option with a model
3. Add two options to your select with the following
values “”,”reverse”
4. Create another select option
5. Add your categories within the new select option
6. Use “orderBy” filter
101. Lab
1. Create a blank angular application
2. Add a custom controller
3. Add a function to your controller’s scope, and
within that function make an alert or log to
console
4. Create a link with ng-click linked to the
function you made
103. Lab
1. Copy the ng-repeat application
2. Add images to your people scope model
3. Add an image tag (img) to your index.html’s
ng-repeat
4. Use ng-src to link to the person’s image
source
104. AJAX using $http service
app.controller('MyController', ['$scope', '$http', function ($scope, $http)
{
$http.get('people.json').success(function(data){
$scope.people = data;
});
}]);
app.js
https://docs.angularjs.org/api/ng/service/$http
105. Lab
1. Copy your ng-repeat application
2. Create a file named people.json that includes
your data.
3. Add $http service dependency to your
controller
4. Use plnkr.co or a web server to run the app and
see the results. (You won’t be able to make the
XHR request if you aren’t running a web server)
107. Lab
1. Create a blank angular application
2. Add a custom controller
3. Add a function to your controller’s scope, and
within that function make an alert or log to
console
4. Create a link with ng-click linked to the
function you made
108. How to make angular routes?
1. Include angular-route.js
library
2. Inject ‘ngRoute’ to app
module
3. Inject ‘$routeProvider’
to your app as a config
4. define your routes!
app.config(['$routeProvider',
function( $routeProvider ) {
$routeProvider.when('/', {
templateUrl: 'homepage.html',
controller: 'HomeController'
});
}
]);
109. How to make angular routes? (2)
- Nest other routes by
appending ‘.when()’
- the fallback route is
defined “otherwise”
app.config(['$routeProvider',
function( $routeProvider ) {
$routeProvider.when('/', {
templateUrl: 'homepage.html',
controller: 'HomeController'
}).
when('/about',{
templateUrl: 'about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/'
});
}
]);
110. How to make link to other routes?
<a ng-href="#/" href>Home</a>
<a ng-href="#/about" href>About</a>
111. Lab
1. Create a blank angular application
2. Include angular-route library and inject the appropriate
dependencies
3. Make a 2 custom controllers
3. Make 2 custom views for each controller
5. Create 2 routes
6. Declare ng-view on a div element in your index.html
7. Using ng-href create to hyperlinks to the different views
112. How to make angular routes? (3)
app.config(
['$routeProvider', function($routeProvider){
$routeProvider.when('/people', {
templateUrl: 'people.html',
controller: 'PeopleController'
}).
when('/person/:id', {
templateUrl: 'single_person.html',
controller: 'PersonDetailController'
}).
otherwise({
redirectTo: '/people'
});
}]
);
114. Basic Form with ng-model data binding
<input type="text" ng-model="person.name">
115. Angular Form Validations
$pristine: It will be TRUE, if the user has not interacted with the form yet
$dirty: It will be TRUE, if the user has already interacted with the form.
$valid: It will be TRUE, if all containing form and controls are valid
$invalid: It will be TRUE, if at least one containing form and control is
invalid.
$error: Is an object hash, containing references to all invalid controls or
forms, where:
- keys are validation tokens (error names)
- values are arrays of controls or forms that are invalid with given
error.
116. Angular Form Validation CSS Classes
ng-pristine
ng-dirty
ng-valid
ng-invalid
.ng-dirty{
background-color: yellow;
}
CSS Example
117. Angular Form Validation Usage
myForm.$dirty
In Form
myFor.fieldName.$dirty
For field
.ng-dirty{
background-color: yellow;
}
In CSS
118. Angular Form Rules
<input
ng-model="{ string }"
name="{ string }"
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
</input>
119. How to use Angular Form Validations? (1)
1. Add a name to your Form element
<form name=“myForm”>
2. Disable default HTML5 browser validations
<form name=“myForm” novalidate>
3. Create a form element and make it required
<input type="text" name="user" ng-model="user" required>
120. How to use Angular Form Validations? (2)
4. Create appropriate HTML to display field errors
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.
$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
5. Activate/Deactivate the Submit Button as needed
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
121. Lab
1. Create a form with appropriate name and
properties
2. Add a field to your form
3. Add a submit button
4. Add validation to your field, and disable your
submit button if the form is invalid
125. Unit Testing Example
Grouping Tests
describe("sorting the list of users", function() {
// individual tests go here
});
Individual test
describe('sorting the list of users', function() {
it('sorts in descending order by default', function() {
// your test assertion goes here
});
});
138. Why use Heroku?
Heroku is a PaaS (Platform as a Service)
You don’t need to manage servers!
You can focus on building your app and making
your users happy!
Heroku has addons.
139. What’s involved?
1. Create a new project
2. Initiate a git repository
3. Add remote branch
4. Push to branch
5. Sit-back and Enjoy!