Small Overview About Angular Electron?

What is Electron In Angular?

Electron framework (formerly known as Atom Shell) lets you write cross-platform desktop application using HTML, CSS and JavaScript. It's a variant of io.js run-time which is focused on desktop applications instead of web servers.

Electron’s rich native APIs enables us to access native things directly from our pages with JavaScript.

Electron is an open-source project from GitHub that lets us create cross-platform desktop applications with web technologies. It doesn't matter which specific framework we use; if it works for the web, it works for Electron. We can use Angular 2 for Electron apps, and in this tutorial, we explore how to get a desktop image size calculator app wired up.

NPM Code:

npm install angular-electron

Bower Code:

bower install angular-electron

Angular Injection

angular.module('myModule', ['angular-electron']);

Videos for about Electron in Angular

Small Overview About Angular Xeditable?

What is Angular Xeditable?

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place. It is based on ideas of x-editable but was written from scratch to use power of angular and support complex forms / editable grids.

Bower

bower install angular-xeditable

NPM

npm install angular-xeditable

Common Dependencies

Basically it does not depend on any libraries except AngularJS itself.
For themes you may need to include Twitter Bootstrap CSS.
For some extra controls (e.g. datepicker) you may need to include angular-ui bootstrap.

Dependency Injection

var app = angular.module("app", ["xeditable"]);

For More Document Visit here : https://vitalets.github.io/angular-xeditable/

Videos about Angular Xeditable - Live View

https://www.youtube.com/watch?v=UbL5SQND1NQ

Small Overview About Angular CLI ?

What is Angular CLI?

Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box.
The Angular2 CLI makes it easy to create an application that already works, right out of the box.

Npm Commends:

npm install -g angular-cli

Features

Built with BrowserSync: Reload on saves
Automatically routed for us
Found in the browser at http://localhost:4200
Simplicity and ease-of-mind

Angular-CLI supports all major CSS preprocessors:

sass/scss (http://sass-lang.com/)
less (http://lesscss.org/)
stylus (http://stylus-lang.com/)

Video for Angular Cli

https://www.youtube.com/watch?v=QMQbAoTLJX8

Small Overview About Angular.Js Protactor E2E

What is Protactor Frameowrk in Angular JS?
Protractor, formally known as E2E testing framework, is an open source functional automation framework designed specifically for AngularJS web applications. It was introduced during AngularJS 1.2 as a replacement of the existing E2E testing framework.

Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Protractor is a Node.js program, and runs end-to-end tests that are also written in JavaScript and run with node. Protractor uses WebDriver to control browsers and simulate user actions.

Protractor uses Jasmine for its test syntax. As in unit testing, a test file is comprised of one or more it blocks that describe the requirements of your application. it blocks are made of commands and expectations. Commands tell Protractor to do something with the application such as navigate to a page or click on a button. Expectations tell Protractor to assert something about the application's state, such as the value of a field or the current URL.

If any expectation within an it block fails, the runner marks the it as "failed" and continues on to the next block.

Node Code Setup

npm install -g protractor

This will install two command line tools, protractor and webdriver-manager. Try running protractor --version to make sure it's working.

The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries wit

webdriver-manager update

Now start up a server with:

webdriver-manager start

This will start up a Selenium Server and will output a bunch of info logs. Your Protractor test will send requests to this server to control a local browser. You can see information about the status of the server at http://localhost:4444/wd/hub.

Simple Example Test

describe('TODO list', function() {
it('should filter results', function() {
// Find the element with ng-model="user" and type "jacksparrow" into it
element(by.model('user')).sendKeys('jacksparrow');
// Find the first (and only) button on the page and click it
element(by.css(':button')).click();
// Verify that there are 10 tasks
expect(element.all(by.repeater('task in tasks')).count()).toEqual(10);
// Enter 'groceries' into the element with ng-model="filterText"
element(by.model('filterText')).sendKeys('groceries');
// Verify that now there is only one item in the task list
expect(element.all(by.repeater('task in tasks')).count()).toEqual(1);
});
});

Video for Protactor E2E

https://www.youtube.com/watch?v=idb6hOxlyb8

Small Overview about Angular Promises?

Promises in AngularJS are provided by the built-in $q service. They provide a way to execute asynchronous functions in series by registering them with a promise object.

A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.

A new instance of deferred is constructed by calling $q.defer().

Methods:

Resolve(value)
Reject(reason)
Notify(notify)

A new promise instance is created when a deferred instance is created and can be retrieved by calling deferred.promise.

Methods:

then()
catch()
finally()

$q is integrated with the $rootScope.Scope Scope model observation mechanism in angular, which means faster propagation of resolution or rejection into your models and avoiding unnecessary browser repaints, which would result in flickering UI.

Example Code:

_{var deferred = $q.defer();
var promise = deferred.promise;

promise.then(function success(data) {
console.log('Success!', data);
}, function error(msg) {
console.error('Failure!', msg);
});

deferred.reject('We failed :(');}

Video about Angular Services

https://www.youtube.com/watch?v=cdG_T6ufcbE

Overview About Angular Interceptor?

Interceptors define custom transformations for HTTP requests and responses at the application level. In other words, interceptors define general rules for how your application processes HTTP requests and responses.

An interceptor is simply a factory() service that returns an object with 4 properties that map to functions:

request: interceptors get called with a http config object. The function is free to modify the config object or create a new one. The function needs to return the config object directly, or a promise containing the config or a new config object.
requestError: interceptor gets called when a previous interceptor threw an error or resolved with a rejection.
response: interceptors get called with http response object. The function is free to modify the response object or create a new one. The function needs to return the response object directly, or as a promise containing the response or a new response object.
responseError: interceptor gets called when a previous interceptor threw an error or resolved with a rejection.

We activate an interceptor service by pushing that service into the $httpProvider.interceptors array in the config block of our application.
A session token can be added for all outgoing HTTP requests by adding it to the config.headers object in a request interceptor.
We can intercept HTTP response errors and handle specific errors by checking the response.status code.
$rootScope has limited utility when it comes to direct interaction, but it works well as an event bus as seen in the case of keeping our MainCtrl synchronized.

Example Code:

m.config(function($httpProvider) {
$httpProvider.interceptors.push(function($q, $injector, userService) {
return {
request: function(request) {
request.headers.authorization =
userService.getAuthorization();
return request;
},
// This is the responseError interceptor
responseError: function(rejection) {
if (rejection.status === 401) {
// Return a new promise
return userService.authenticate().then(function() {
return $injector.get('$http')(rejection.config);
});
}
/* If not a 401, do nothing with this error.
* This is necessary to make a `responseError`
* interceptor a no-op. */
return $q.reject(rejection);
}
};
});
});

Video for HTTP Interceptors

https://www.youtube.com/watch?v=K6W0kf6o_Zk

Small Discuss about Angular App Exception Handling?

What is Angular App Exception Handling?

The AngularJS $exceptionHandler service allows you to catch and handle unanticipated JavaScript errors in a meaningful way.

Example:
app.factory('$exceptionHandler',function($log,ErrorService) {
   return function(exception,cause) {
       if(console) {
       }

   }
   ErrorService.send(exception,cause);
});

Any uncaught exception in angular expressions is delegated to this service. The default implementation simply delegates to $log.error which logs it into the browser console. In unit tests, if angular-mocks.js is loaded, this service is overridden by mock $exceptionHandler which aids in testing.

$exceptionHandler is very useful for sending errors to third party error logging services or helpdesk applications. Errors trapped inside of event callbacks are not propagated to this handler, but can manually be relayed to this handler by calling $exceptionHandler(e) from within a try catch block.

Video Tutorial for handling Exception Handling

https://www.youtube.com/watch?v=9xdIvUD2Jug

Overview of Directives in Angular JS

Directives in AngularJS are prefixed with ‘ng-‘. Basically, these directives are included in the HTML elements or tags, like an attribute. By using these ng-directives as attributes of HTML elements, we can provide a special feature to the particular HTML element.

Directives behave as markers on the HTML DOM element attributes. Directives speak to the HTML Compiler of AngularJS to attach a specified behavior. $Compile is the one which compiles the Angular code from the DOM. The custom directives are used to create our own directives.

The ng-app directive defines the root element of an AngularJS application.

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

AngularJS comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for AngularJS to use. When AngularJS bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

Creating a custom directive

var app = angular.module('Customers', [])

app.controller('CustomerDetails', function ($scope) {

$scope.CustName = "Ravi";

});

app.directive('customInfo', function () {

});

Small Overview About Angular Electron?

References

Your comment on this post:

Related Articles