I’ve been reading a great introductory book on AngularJS recently (authored by Brad Green and Shyam Seshadri) and thought i’ll share with you some of my notes (prior to going further with reading however, i strongly advise to watch few videos on the subject from the wonderful egghead.io website):
- The role of the server:
- Traditional Web Apps – create HTML pages by assembling components (header, content, footer, etc.), joining it with the data and then shipping it all over the wire to the browser to display.
- AngularJS Apps – serve static resources (HTML templates, media, etc.) and data to the browser which takes care of assembling.
- “By structuring your application with Angular, your application’s templates are kept separate from the data that populates them. The result of this is that these templates are cacheable. Only new data need to come down to the browser after the first load. Just as with JavaScript, images, CSS, and other resources, caching these templates can give your application even better performance.”
- Model-View-Controller (MVC)
- application architecture that separates the code between:
- model – managing data (which is stored in object properties)
- controller – managing the application logic (javascript classes)
- view – presenting the data to the user (DOM)
- “The view gets data from the model to display to the user. When a user interacts with the application by clicking or typing, the controller responds by changing data in the model. Finally, the model notifies the view that a change has occurred so that it can update what it displays.”
- application architecture that separates the code between:
- Data binding
- “…just declare which parts of the UI map to which JavaScript properties and have them sync automatically.”
- use double-curly syntax {{someText}} or ng-bind=”someText” directive to insert new content into an existing HTML template (with the double-curly syntax, on the very first page load of your application’s index.html, there’s a chance that your user will see the un-rendered template before Angular has a chance to replace the curlies with your data).
- Dependency Injection (definition taken from Craig Walls “Spring in Action” 3rd ed.)
- Any nontrivial application is made up of two or more classes that collaborate with each other to perform some business logic. Traditionally, each object is responsible for obtaining its own references to the objects it collaborates with (its dependencies). This can lead to code which is:
- highly coupled
- hard-to-test
- difficult to reuse
- difficult to understand
- code that typically exhibits “whack-a-mole” bug behavior (fixing one bug results in the creation of one or more new bugs)
- With DI, on the other hand, objects are given their dependencies at creation time by some third party (usually specialized DI framework) that coordinates each object in the system. Objects aren’t expected to create or obtain their dependencies—dependencies are injected into the objects that need them.
- Any nontrivial application is made up of two or more classes that collaborate with each other to perform some business logic. Traditionally, each object is responsible for obtaining its own references to the objects it collaborates with (its dependencies). This can lead to code which is:
- Directives:
- in AngularJS you can write your templates as HTML, because at the core of the framework there is a powerful DOM transformation engine included that lets you extend HTML’s syntax (ng-app, ng-controller, ng-model and similar directives).
- To invoke AngularJS you must:
- Load the angular.js library (eg. from Google’s CDN (content delivery network), ie.: https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”)
- Tell Angular which part of the DOM it should manage with the ng-app directive (eg. <html ng-app>)
- Basic AngularJS app startup flow:
- A user requests the first page of your application.
- The user’s browser makes an HTTP connection to your server and loads the index.html page containing your template.
- Angular loads into the page, waits for the page to be fully loaded, and then looks for ng-app to define its template boundaries.
- Angular traverses the template and looks for directives and bindings. This results in registration of listeners and DOM manipulation, as well as fetching initial data from the server. The end result of this work is that the app is bootstrapped and the template is converted into view as a DOM.
- You connect to your server to load additional data you need to show the user as needed.
- Rationale behind writing “unobtrusive JavaScript” code (eg. not using click, mousedown, and other such inline event handlers in your HTML) and how AngularJS re-examine the problem:
- Not everyone’s browser supports JavaScript. Let everyone see all of your content and use your app without needing to execute code in the browser.
- this is no longer true as if you’re running a browser without JavaScript, you’re relegated to sites created in the ’90s
- Some folks use browsers that work differently. Visually impaired folks who use screen-readers and some mobile phone users can’t use sites with JavaScript.
- modern screen-readers have caught up. With proper use of ARIA semantic tags, you can make very rich UIs easily accessible. Mobile phones now run JavaScript on par with desktop machines.
- Javascript works differently across different platforms. IE is usually the culprit here. You need to put in different event-handling code depending on the browser.
- Angular has an equivalent in the form of ng-eventhandler=”expression” where eventhandler would be replaced by click, mousedown, change, and so on. AngularJS directives differ from their event handler predecessors in that they b
ehave the same in every browser. Angular takes care of the differences for you.
- Angular has an equivalent in the form of ng-eventhandler=”expression” where eventhandler would be replaced by click, mousedown, change, and so on. AngularJS directives differ from their event handler predecessors in that they b
- These event handlers reference functions in the global namespace. It will cause you headaches when you try to integrate other libraries with functions of the same names.
- Similarly to the previous point, AngularJS equivalent eventhandlers do not operate on the global namespace. The expressions you specify can only access functions and data that is in the scope of the element’s controller.
- These event handlers combine structure and behavior. This makes your code more difficult to maintain, extend, and understand.
- There’s a simple acid test we can use to figure out if our system suffers from this coupling: can we create a unit test for our app logic that doesn’t require the DOM to be present? In Angular, yes we can write controllers containing our business logic without having references to the DOM.
- Not everyone’s browser supports JavaScript. Let everyone see all of your content and use your app without needing to execute code in the browser.
- While angular is a client-side-only technology and it’s possible to create angular web apps that don’t require a back-end server at all, it is recommended to host the project files using a local web-server during development to avoid issues with security restrictions (sandbox) in browsers. The sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr, etc to function properly when an html page is opened via
file://scheme instead ofhttp://.
Tagged: AngularJS, JavaScript
mariuszprzydatek.com 
nice article ..!!
Thanks Jaydipsinh, glad you like it. Have a nice weekend!