Notes on AngularJS

01-angularjs-introduction.md

What is AngularJS

• AngularJS is not a library, it's a framework that embraces extending HTML into a more expressive and readable format
• AngularJS is a structural framework for dynamic web apps
• A framework that lets you use HTML as your template language and extend HTML's syntax to express your application's components clearly and succinctly
• Angular is an opinionated framework on how a CRUD application should be built

Use AngularJS to build CRUD application

• Angular was built for the CRUD application in mind. Games and GUI editors are examples of applications with intensive and tricky DOM manipulation. These kinds of apps are different from CRUD apps, and as a result are probably not a good fit for Angular

http://docs.angularjs.org/guide/overview

Introduction to AngularjS

• Angular is pure client-side technology, written entirely in JavaScript.
• Angular is designed primarily for developing single-page apps.

Things I Wish I Were Told About Angular.js

• Angular.js does not force you to use its module system
• Understand how Angular modules works before you start
• You need to understand how $scope works
• When You Manipulate DOM in Controller, Write Directives
• And the best part is, your controller does not need to know the existence of directives: communications are achieved through scope sharing and $scope events.
• put control logic in directive controller, and DOM logic in link function; scope sharing is the glue.
• The only unit test that requires some DOM manipulation is directive.

02-angularjs-mvc.md

About MVC in AngularJS

• Along with services and dependency injection, MVC makes angular applications better structured, easier to maintain and more testable.

Understanding the Model Component

• Depending on the context of the discussion in the Angular documentation, the term model can refer to either a single object representing one entity (for example, a model called "phones" with its value being an array of phones) or the entire data model for the application (all entities).

Undestanding the Controllers Component

Understanding Controllers

• In Angular, a Controller is a JavaScript constructor function

Use Controllers to:

• Set up the initial state of the $scope object.
• Add behavior to the $scope object.

Scope Inheritance

• If the child controller are having the same properties with the parent controller, then it will override the parent properties.

angularjs-controller.md

• Controller is the business logic behind views
• The purpose of controllers is to expose variables and functionality to expressions and directives.
• The primary responsibility of a controller is to initialize scope objects.
• In practice, the initialization logic consists of the following responsibilities: providing initial values and augmenting $scope with UI-specific behavior (functions).
• Controllers in AngularJS are regular JavaScript functions.

angularjs-directive.md

• Directive extend HTML with custom attributes and elements. We use Directive to apply special behaviour to attributes or elements in the HTML.

Notes on creating directives

• Use the module.directive API to register a directive
• The factory function should return an object
• The factory function is invoked only once when the $compiler matches the directive for the first time.
• Perform any initialization work on factory function
• Prefer using the definition object over returning a function
• Prefix your own directives with 2 or 3 words, and avoid prefix your own directives with ng- or they might conflict with directives included in a future version of Angular.
• Use the templateUrl option if the size of the template relatively big.

Notes on directive restrict option

• When you create a directive, it is restricted to attribute only by default.
• Use an element restrict option (E) when you are creating a component that is in control of the template. The common case for this is when you are creating a Domain-Specific Language for parts of your template.
• Use an attribute restrict option (A) when you are decorating an existing element with new functionality.
• Notes on directive scope option

Notes on directive scope option

• Use the scope option to create isolate scopes when making components that you want to reuse throughout your app

Notes on manupulating the DOM

• Directives that want to modify the DOM typically use the link option.
• When a DOM node that has been compiled with AngularJS's compiler is destroyed, it emits a $destroy event.

Notes on creating directives that communicate

• use controller option when you want to expose an API to other directives. Otherwise use link.
• When other directives try to communicate wit other directives via exposed API, they will received controller as their fourth argument link function. For example function (scope, element, attrs, myTabsCtrl) { ... }

angularjs-model.md

• Model is the data that i

angularjs-modules.md

Module

• A module acts as container for other AngularJS managed objects (controllers, services and son on).
• To define new module provide it's name as the very first argument to the module function call. The second argument makes it possible to express a dependency on other modules.
• A call to the angular.module function returns an instance of newly created module.
• Globally-defined controller's constructor functions are only good for quick-code examples and fast prototpying. Never user globally-defined controller functions in larger, real-life applications.

Dependency Injection

AngularJS has the dependency injection (DI) engine built-in. To perform the following activities:

• Understand a need for a collaborator expressed by objects.
• Find a needed collaborator.
• Wire up objects together into a fully-functional application

Modules Lifecycle

AngularJS splits module's lifecycle into two phases, which are as follows:

• The configuration phase
• The run phase

The configuration phase

• It is the phase where all the recipes are collected and configured.
• The configuration phase allows us to do the last moment tweaks to the object's creation formula
• AngularJS can have multiple configure blocks

The run phase

• Allows us to register any work that should be executed upon the application's bootstrap.
• AngularJS can have multiple run blocks

AngularJS modules and files

There are basically three approaches we could take to relate individual files and AngularJS modules:

• Allow multiple AngularJS modules in one JavaScript file
• Have AngularJS modules spanning multiple JavaScript files
• Define exactly one AngularJS module per JavaScript file

angularjs-scope.md

• Scope is context where the model is stored so that controllers, directives, and expressions can access it. The values that are stored in variables on the scope are referred to as the model.
• AngularJS will create a new instance of the Scope class whenever it encounters a scope-creating directive in the DOM tree. The ng-controller directive is an example of scope-creating directive.
• Each $scope is an instance of the Scope class.
• The scope class has methods that control the scope's lifecycle, provide event-propagation facility, and support the template rendering process.
• A new $scope was created by the ng-controller directive using the Scope.$new() method call.
• $rootScope instance gets created when a new application

angularjs-testing.md

Guides

• http://docs.angularjs.org/guide/dev_guide.unit-testing
• http://docs.angularjs.org/guide/dev_guide.services.testing_services
• http://docs.angularjs.org/guide/dev_guide.e2e-testing

Tutorials

• http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html
• http://www.yearofmoo.com/2013/09/advanced-testing-and-debugging-in-angularjs.html
• http://www.nysavann.com/javascript/testing/2013/10/01/testing-external-templates-in-angular.html
• http://stackoverflow.com/a/14962049/1061371

angularjs-view.md

• When Angular starts your application, it parses and processes this new markup from the template using the so called compiler. The loaded, transformed, and rendered DOM is then called the view. So, the view and template are really a different things. The template is HTML with additional markup, and the view is the output of compile process.
• AngularJS framework rely on the HTML for its template syntax.
• It depends on the browser to parse the template's text.
• After browser is done transforming the markup's text to the DOM tree, AngularJS kicks in and traverses the parsed DOM structure.
• We should ensure that the markup written on the template represents valid HTML.
• AngularJS promotes a declarative approach to UI construction.
• Templates are focused on describing a desired effect
• AngularJS heavily promotes declarative style of programming for templates and impervative one for the JavaScript code (controllers and business logic)
• Directives in AngularJS templates declaratively express the desired effect, so we freed from providing step-by-step instructions on how to change individual properties of DOM elements (as is often the case in applications based on jQuery).
• As a rule of thumb, one should never manipulate the DOM elements in AngularJS controllers. Getting a reference to a DOM element in a controller and manipulating element's properties indicate imperative approach to UI - something that goes againts AngularJS way of building UIs.
• Expressions access the variables and functions from the scope. An expression in a template is a JavaScript-like code snippet that allows to read and write variables that live in a scope.

communicating-with-backend-server.md

• AngularJS is well equipped to communicate with various back-ends using XMLHttpRequest (XHR) and JSONP requests.
• Use $http service for issuing XHR and JSONP calls or specialized $resource service to easily target RESTful endpoints.

A generic way to issuing XHR request

To issuing XHR request in generic way, we can use the $http(configObject) function with the config object can have the following properties:

• method: HTTP method to be issued
• url: URL to be targeted with a request
• params: parameters to be added to the URL query string
• headers: additional headers to be added to a request
• timeout: timeout (in ms) after which a XHR request will be dropped
• cache: enables XHR GET request caching
• transformRequest, transformResponse: transformation functions that allows us to pre-process and post-process data exchanged with a back-end.

Dedicated shortcut methods to issue XHR request

• GET: $http.get(url, config)
• POST: $http.post(url, data, config)
• PUT: $http.put(url, data, config)
• DELETE: $http.delete(url, config)
• HEAD: $http.head

Use those shortcut methods since it's more concise and easier way to read code, and use this form over the generic one whenever possible.