top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration
Print Preview

Small Overview About Angular CLI ?

0 votes
22 views

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:

Video for Angular Cli

 

posted Dec 27, 2016 by Manish Tiwari

  Promote This Article
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button


Related Articles

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

READ MORE

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​

READ MORE

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

READ MORE

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​

READ MORE

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 

READ MORE

Providers
A provider is the most sophisticated method of all the providers. It allows you to have a complex creation function and configuration options. A provider is actually a configurable factory.

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

app.provider("myProvider", function() {
    this.value = "My Value";

    this.setValue = function(newValue) {
        this.value = newValue;
    };

    this.$get = function() {
        return this.value;
    };
});

app.config(function(myProviderProvider) { // ADDED config section
    // Note the extra "Provider" suffix
    myProviderProvider.setValue("New Value");
});

Services

A service is an injectable constructor. If you want you can specify the dependencies that you need in the function. A service is a singleton and will only be created once by AngularJS. 

app.service("myProvider", function() { 
    this.getValue = function() {
        return "My Value";
    };
});

 

Factories
A factory is an injectable function. A factory is a lot like a service in the sense that it is a singleton and dependencies can be specified in the function. The difference between a factory and a service is that a factory injects a plain function so AngularJS will call the function and a service injects a constructor.

app.factory("myProvider", function() { 
    return "My Value";
});


Value
A value is nothing more than a simple injectable value. The value can be a string, number but also a function.

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

app.value("Value1", "First Value");
app.value("Value2", "Second  Value");


Constants

A constant can be injected everywhere. The value of a constant can never be changed.


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


app.constant("Constant1", "First Constant Value");
app.constant("Constant2", "Second Constant Value");

Video Tutorial

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

READ MORE

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

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

READ MORE
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#470/147, 3rd Floor, 5th Main,
HSR Layout Sector 7,
Bangalore - 560102,
Karnataka INDIA.
QUERY HOME
...