Health to the Web

Directives are often mentioned as one of the "3 Ds" of angular (the other 2 being Data Binding and Dependency Injection). So Directives are a very important part of angular. Yet at the same time, mention of Directives can cause even experienced angular developers to acquire a haunted look (think Frodo and the Dark Riders and you have the idea ;-) ) A classic case for a directive is creating a reusable element for displaying customer information. It's part of the angular directive tutorial docs  and what I implemented for our site since we need to display the same contact info in multiple places. Steps to create: create the directive js create the directive html partial (optional but if have html then make partial) add directive name to app list of dependencies include the js file create the test use in your app Attribute vs Element There are 4 ways to include directives but the most common are as attribute or element as defined by the restrict setting: ...

angular js forms are a whole sophisticated micro framework within angular angular builds on top of html and provides directives for form, input, textarea, select and provides a model instance for each, so when you write the following you're really using the angular input directive:     <input type="text" ng-model="person.name" required>     <input type="checkbox" ng-model="person.wantsEmails"> here's the docs for input directive  which lists all the options, note that angular supports enforcing different types such as email etc. angular has very good support for html select and iterating options some key directives include the following ng-model  creates a 2 way binding to the data on the page, angular ensures changes flow from the html into the ng-model and also flow from the ng-model to the html (contrast this to ng-bind or {{}} which are one way only binding from model to html) each ng-model creates an instan...

Start December I did some work kickstaring our e2e test scripts for our app. Since angular js is now using protractor for e2e tests then team agreed its best to (try) use protractor. Protractor is a node package that is a wrapper around WebDriverJS and Protractor is used for running automated tests in a browser. WebDriverJS (and Protractor) apis are asynchronous. All functions return promises. WebDriverJS maintains a queue of pending promises, called the control flow. Protractor has adapted Jasmine so that each spec waits until the control flow is empty. Jasmine expects understand promises and add a task to the control flow to be executed after others are executed. Protractor runs on top of Selenium-Webdriver which is a browser automation framework. You have to run your Protractor tests on top of a running selenium standalone server (installed as part of Protractor install). (* this content from Protractor pages ) Learnings : I'm overall positive on protractor (after appr...

Like other angular newbies, I'm trying to understand what Scope means in angular js. Scope is a complex concept in Angular js because the angular framework manages scope for you e.g. - each time you navigate to a controller then that controller is created and a new scope created for it that scope inherits prototypal from its parent scope all the way up to the top level root scope (scope is created for a number of built in ng-* as well as custom directives too) - when you navigate away from that controller to a page without that controller then the controller and its scope are destroyed; you can listen to controller destroy event $destroy (snippet below) - angular provides framework properties $scope and $rootScope - each $scope has a $parent which allows you access the parent scope, all the way up to root scope; this can be handy for debugging up the scope chain This is a really useful tutorial about scope And the answer here is informative about controllers and scope ...

Youtube here Useful best practices and insights especially 9 and 10 angularjs team believes in "configuration over construction" like RoR "don't fight the html, extend it" - augment the html vocabulary using directives, html as a DSL which you can extend Use a bootstrap project. angular/angular-seed on github exists to bootstrap an app (you copy and run with it) BUT yeoman.io is recommended now script files just before the body angulars modules configure the injector and how objects are created; requirejs deals with how scripts tags are loaded into the browser only done once If you use something like require js then you must manually bootstrap angular e.g. angular.bootstrap() wrap callbacks for 3rd party api into $apply flash of unstyled content momentarily; caused because browser renders before angular. Options: ng-cloak on <body>   but this will show nothing until angular runs a better options is to use ng-bind on the index.html only (j...