Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Transcript of Mean.Git.Angular
Express (Web application framework)
Angular (UI Framework [MVC])
Cloud 9 (c9.io)
Git (via GitHub)
Free and open source distributed version control system
GitHub is an instantiation of Git
The driving force
The data behind the application, usually fetched from the server.
Any UI with data that the user sees is derived from the model, or a subset of the model.
Web apps that load a single HTML page
and update that page dynamically as the user interacts with the app.
SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads.
Single Page Application
MEAN / Git / Angular
Online integrated development environment.
The user interface (UI) the user sees and interacts with.
It is generated from the current model of the application.
The business logic and presentation layer,
Performs actions such as fetching data
Making decisions such as how to present the model, which parts of it to display, etc.
Two-way data-binding ensures that our controller and the UI share the same model
So updates to one (either from the UI or in our code) update the other automatically
Declare right in your HTML what you are trying to accomplish.
Done through AngularJS calls directives.
Directives extend the vocabulary of HTML to teach it new tricks.
There is a clear separation of concerns between the various parts of your application:
Need some business logic? Use the controller.
Need to render something differently? Go to the view.
Want to change the data your application sends and receives. Put it in the model.
Separation of Concerns
The idea of asking for the dependencies of a particular controller or service,
Instead of instantiating them inline via the new operator or calling a function explicitly
For example, DatabaseFactory.getInstance()
Simple Angular Example
AngularJS Behind the Scenes
The HTML is loaded.
This triggers requests for all the scripts that are a part of it.
After the entire document has been loaded, AngularJS kicks in and looks for the
When it finds the
directive, it looks for and loads the module that is specified and attaches it to the element.
AngularJS then traverses the children DOM elements of the root element with the
and starts looking for directives and bind statements.
Each time it hits an
directive, it creates what we call a scope in AngularJS.
A scope is the context for that element.
The scope dictates what each DOM element has access to in terms of functions, variables, and the like.
AngularJS then adds watchers and listeners on the variables that the HTML accesses, and keeps track of the current value of each of them.
When that value changes, AngularJS updates the UI immediately.
Instead of polling or some other mechanism to check if the data has changed, AngularJS optimizes and checks for updates to the UI only on certain events, which can cause a change in the data or the model underneath. Examples of such events include XHR or server calls, page loads, and user interactions like click or type.
We could also call this an AJAX application
<tab title="Home">Some content here</tab>
<input type="text" datepicker
Anyone can extend existing directives or create their own.
We can develop robust and complex directives that integrate with third-party libraries
Like jQueryUI and BootStrap, to name a few, to create a language that is specific to our needs.