npm install -g protractor@2).git clone https://github.com/angular/protractor.git
cd protractor
npm install
./bin/webdriver-manager update
cd website
npm install
cd ..
http://localhost:4444/wd/hub. A selenium server can be started with webdriver-manager which is included in bin/webdriver-manager.webdriver-manager update
webdriver-manager start
npm run install_testapp
npm start
npm test
Ex. : <div ng-app="app" ng-controller="AnimalCtrl as animal"> <div>
Ex.: app.controller("AnimalCtrl", function(){
<div ng-controller="MainController as main">
{{ main.someProp }}
</div>
app.controller('MainController', function () {
this.someProp = 'Some value.'
// the above is equal to $scope.MainController = this; this.someProp = 'Some value.'
});
<div ng-controller="ParentController as parent">
ParentController: <input type="text" ng-model="parent.foo" />
parent.foo: {{ parent.foo }}
<div ng-controller="ChildController as child">
ChildController: <input type="text" ng-model="parent.foo" />
parent.foo: {{ parent.foo }}
</div>
</div>
app
.controller('ParentController', function () {
this.foo = "bar";
})
.controller('ChildController', function () { /*empty*/ });
| |||||
One of the amazing directives from Angular JS is ng-repeat. We cannot even think about an app based on angular without its presence as a beginner.
Ng-repeat quietly affect performance when not used properly. Having nested ng-repeats is a quick and easy way to increase
your watcher count exponentially and should be avoided if at all possible.
| |||||
Use ng-if in place of ng-show wherever possible. ng-show merely hides the element with display none and bounded
element would still hang in DOM.
ng-if directive add or remove the elements based on demand which avoids the unnecessary DOM rendering.
Therefore the additional DOM elements and data-bindings are evaluated on demand.
| |||||
One of the reasons being Angular App slowness is more bindings in the app. When watchers set in application angular
internal engine hold the responsibility to keep track of changes and update wherever required.
Applying changes to the bounded model set by watchers is called digest cycle. The more watchers present will take longer
digest cycle result in slow and unresponsive application.
Angular becomes slower with around 2,000 bindings due to the process behind dirty-checking. Lesser binding will boost up performance!
| |||||
$watch() function allow us to create custom watchers in angular application to manipulate the data on change. By default the deep checking of the reference would not be done on $digest cycle.
The $watch() function takes a third, optional argument for "object equality." If you pass-in "true" for this argument, AngularJS will actually perform a deep-object-tree comparison. This means that within each $digest, AngularJS will check to see if the new and old values have the same structure (not just the same physical reference).
This causes app to track larger foot print; however, the deep object tree comparison is far more computationally expensive. Instead we could use $watchCollection() to fulfill that scenario.
| |||||
Filters are powerful service provided in angular which transform your application data at runtime based on business need.
Even though filters are allowed to place it in the view Its good practice to transform the data in the controller applying
necessary filters before binding.
When filters are applied in the view with pipe symbol which in turn creates watchers. If digest cycle is triggered with
any changes to the model all the filters would execute.
This again adds heavy lifting to angular engine to keep track and run filter function on each digest cycle.
| |||||
Angular provides all the necessary information for debugging along with other features. This debugging supported through adding some addition properties and classes to the DOM. Manipulating attributes and classes will also cost to performance
and expensive operation on DOM elements.
We need to turn off this debug flag while distributing the code to production.
| |||||
$scope.$apply() is costly operation which typically trigger the digest cycle from root scope. Calling all the watchers to recheck and update the value.
We should use $scope.$digest() instead of $scope.$apply() when we know the $scope changes are needed to update in the
child node. Because $digest() will propagate the update downwards through child node from where it started.
| |||||
Do not use the standard JavaScript setTimeout and setInterval function over Angular wrappers functions such as$timeout and $interval to avoid manually calling $scope.$apply().
These wrapper functions internally call $scope.$apply when handler is completed execution. One important thing to take
care of setting $interval or $timeout is setting optional invokeApplly parameter.
By default the third parameter is set to true which indicated angular engine to trigger $scope.$apply internally.
InvokeApplly parameter should set to false explicitly if there are no $scope updating is required.
| |||||
$watch() function is used to create custom watchers in application to do some operation based on model changes.
When this watch is registered and called it returns a callback function.
This function holds unregistering instruction for the respective watchers. Unregistering must be done calling this
function to avoid the memory leak.
Similarly $timeout and $interval ids must be cleared using $timeout.cancel() function after its usage and scope destroy.
| |||||
