About Angular Component and advantages ?

What is Angular Component?

In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

This makes it easier to write an app in a way that's similar to using Web Components or using Angular 2's style of application architecture.

Advantages of Components:

simpler configuration than plain directives
promote sane defaults and best practices
optimized for component-based architecture
writing component directives will make it easier to upgrade to Angular 2

There’s nothing you can do with .component() that you can’t do with .directive().
It aims to simplify the way we create “components” – which roughly means UI directives.

Example Code

app.component('list', {
bindings: {
items: '='
},
templateUrl: 'list.html',
controller: function ListCtrl() {}
});

Video for Angular Components

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 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

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

About Redux in Angular 2

What is Redux?

The fundamental premise of redux is that the entire state of the application is represented in a single JavaScript object called a store, or application store, that can be acted upon using special functions called reducers.

Ng2Redux lets you easily connect your Angular 2 components with Redux, while still respecting the Angular 2 idiom.

Features include:

The ability to access slices of store state as Observables
Compatibility with existing Redux middleware and enhancers
Compatibility with the existing Redux devtools Chrome extension
A rich, declarative selection syntax using the @select decorator

Node Install CMD

npm install --save redux ng2-redux

In redux, user events are captured and emitted up to a reducer for processing. In Angular 1.x, it was a very common anti-pattern to see bloated controllers with large chunks of logic dedicated to manage local state. By moving logic that can directly manipulate state to reducers, the burden placed upon our components become negligible. In Angular 2, you will often see dumb controllers who do nothing more than capture an event and emit it via output to its parent controller.

Video for Redux in Angular 2

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

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 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

About Angular Component and advantages ?

References

Your comment on this post:

Related Articles