Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start 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

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Mean.Git.Angular

No description
by

Matthew Levy

on 21 September 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Mean.Git.Angular

Mongo (Database)
Express (Web application framework)
Angular (UI Framework [MVC])
Node.js (Event-driven I/O server-side JavaScript environment based on V8)
Cloud 9 (c9.io)
Git (via GitHub)
Free and open source distributed version control system
GitHub is an instantiation of Git
MEAN
Model
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.
Model-View-Controller
Examples
http://hello-angularjs.appspot.com/spa#/searchtable

Gmail
Twitter
Facebook
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.
This means heavy clients, as much of the work happens on the client side, in JavaScript
So far...
AngularJS
Single Page Application
MEAN / Git / Angular
Online integrated development environment.
It supports more than 40 programming languages, including PHP, Ruby, Python, JavaScript with Node.js, and Go.

It is written almost entirely in JavaScript, and uses Node.js on the back-end.
View
The user interface (UI) the user sees and interacts with.
It is generated from the current model of the application.
Controller
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
Data Driven
(data binding)
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.
Declarative

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()
Dependency
Injection
Extensible
Angular
Breakdown
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
ng-app
directive.
When it finds the
ng-app
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
ng-app
and starts looking for directives and bind statements.
Each time it hits an
ng-controller
or an
ng-repeat
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
(AJAX = Asychronous JavaScript and XML)

<tabs>
<tab title="Home">Some content here</tab>
<tab title="Profile">
<input type="text" datepicker
ng-model
="startDate"/>
</tab>
</tabs>

https://docs.angularjs.org/api/ng/directive/ngModel
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.
Full transcript