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

READ MORE

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

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 () {  

});  

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