Mean.Git.Angular

Comments (0)

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 systemGitHub is an instantiation of GitMEANModelThe driving forceThe 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-ControllerExampleshttp://hello-angularjs.appspot.com/spa#/searchtable

GmailTwitterFacebookWeb apps that load a single HTML pageand 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 JavaScriptSo far...AngularJSSingle Page ApplicationMEAN / Git / AngularOnline 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. ViewThe user interface (UI) the user sees and interacts with. It is generated from the current model of the application.ControllerThe business logic and presentation layer, Performs actions such as fetching dataMaking 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 modelSo updates to one (either from the UI or in our code) update the other automaticallyData 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 InjectionExtensibleAngularBreakdownSimple Angular ExampleAngularJS Behind the ScenesThe 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)

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