framework to implement two-way binding between the DOM and “plain old” JavaScript objects. • It’s a way to organize and encapsulate your JavaScript code base in a highly testable way. • It’s a tool to build single page applications. • It’s a way to extend HTML with custom functionality.
its features? • Dependency Injection - It’s built around an IOC container. • Model, View, Controller architecture - It helps you organize your code in a testable way. • HTML extensions (directives) - show and hide DOM elements, or create repeating lists with HTML attributes and other custom HTML markup. • Form Validation - Validate forms real-time in the browser using standard HTML5 validation attributes and some extended attributes built into Angular.
its features? • Output formatting - Use “filters” to format common outputs like dates, numbers and currency. • AJAX - Built in XHR wrapper • Promises - An A+ compliant Promise implementation • Create your own HTML elements - Use “directives” to create your own custom HTML elements, attributes and even comments that have custom behaviors.
its features? • Client-side routing - Enabling single-page applications by integrating with history state management • “Modules” - Creating reusable modules that can reference one another to help organize reusable code. • Development Tooling - Angular has a suite of development tools around it to help you build larger, more powerful JavaScript applications.
Well, technically, at this point you’ve seen a “View”. … It’s just HTML. And we do have controllers, actually. ! Here’s one way to wire up a controller: ! Example: ! <div ng-controller=“MyCtrl”>! Who am I controlled by? {{controllerName}}! </div>
$location, $window, etc. • Services can be injected into any Angular component: Controllers, Filters, Directives, and other Services. • Services are “singleton” instances unless they return a constructor function (JavaScript class) • Services can get very advanced, they can be declared with Providers that can be configured in a module’s config() function (i.e. $routeProvider), they sometimes work in concert with a directive to allow controller code to trigger DOM manipulation without coupling the controller to the view.
There are a variety of filters that Angular comes with out of the box: currency, date, number, orderBy, etc. • Filters generally do one of those things: • Format output for a view. • Filter/sort an array of outputs in the view. • Filters can also be used programmatically by getting them with the $filter service.
do all of the work of binding the DOM to the model, and the model to the DOM. • They can be used to create custom behaviors for custom HTML elements, attributes and even comments. • Useful for binding to DOM events. • Reusable controls. • Directives are useful for creating polyfills (i.e. a placeholder attribute polyfill for IE9)
can do anything in a directive, and you can do it all in a number of ways. • You can do everything in a directive, and you can do it all at once. • If a new developer is going to shoot himself in the foot, it will be with a custom directive.
need to create a new directive, keep the directive simple. • Make sure that directive is doing one and only one thing (i.e. it sets up one event binding, or it’s one reusable control) • Remember: Directives can be hard to unit test, and hard to debug. If you find you have a logic-heavy directive, move that logic into a controller or service, which is easier to unit test.
the ground up on top of an IOC container. Meaning dependency injection is a default. This makes your components highly testable. • Strong, easy to discover API - A few simple component types, a consistent api style, and using “plain old” JS objects as models makes learning Angular a breeze. • It leverages HTML and the DOM for templating. No crazy new markup to learn (HandleBars or HAML for example). Just some attributes on HTML elements you already know.
well with JQuery anyhow. Angular comes with JQLite, but will use JQuery instead if it’s detected. • Lots of built-in tools: Currency/Number filters, Localization, Templating, Animations, etc. • It has an awesome built-in expression engine. This means it can evaluate statements in the views, where something like HandleBars (Ember) isn’t as straight forward.
smaller than it’s contemporaries given everything it does, OOTB. Less than 1/2 of the size of Ember. • Community - Angular is backed by Google, and has a large and growing community. The biggest following for any library of it’s kind.
frameworks, such as Ember.js are more convention-based, which means component names all fit into a certain convention, and that means large teams will be forced to stick to some basic standards. • The $digest loop - It’s very well optimized, but if you get to where you’re updating thousands elements with multiple of points of data, it’s not going to be as fast as some of it’s observer-pattern-based contemporaries (such as Ember.js)… This would be extremely rare, however, and can be completely avoided with a custom directive.
primitive. If you reference a third party angular module that just happens to have a controller or service with the same name as one of yours, it will nuke yours. • Directives are really tempting to use because they’re super cool, but they’re “wild west” and can result in spaghetti.
blesh
manfredsteyer
maroon1st
oekazuma
fabpot
hiro_ghap1
mackee
utgwkk
kazatohiei
syumai
niftycorp
chobishiba
soyuka
destraynor
gr2m
quramy
maggiecrowley
aarron
chrisshort
csswizardry
sstephenson
stephaniewalter
afnizarnur
wjessup
lara
