Tutorial by Examples: angular

This example is a quick setup of Angular and how to generate a quick example project. Prerequisites: Node.js 6.9.0 or greater. npm v3 or greater or yarn. Typings v1 or greater. Open a terminal and run the commands one by one: npm install -g typings or yarn global add typings npm install -...

Before deploying the angular project in server we need to build angular project for production. We also need to change the routing path in index.html file from <base href=”/”> to <base href=”./”> if it is not done then your project wouldn’t get loaded properly there will be some routing ...

ng build –prod Above given command with extra option like –prod would generate the production build project bundle. Once the above command gets executed in the root directory of your project would appear a directory called dist. In which all the production build bundle of your project appears in ...

Once the dist directory is ready with your production built bundles. Just open the dist directory and open the command prompt type the following command to create the war file to deploy your project on apache tomcat server. jar cvf dist.war . Once the above jar commands gets executed. It wou...

Cut/Copy the dist.war file from dist directory and place it in apache tomcat webapp directory. Go to apache tomcat bin folder and double click on startup.bat file. Now tomcat server will execute dist.war file and startup the tomcat catalina server. Once the tomcat catalina server gets started o...

We can create dynamic component and get the instances of component into an array and finally rendered it on template. For example, we can can consider two widget component, ChartWidget and PatientWidget which extended the class WidgetComponent that I wanted to add in the container. ChartWidget.ts ...

In the new Angular framework, Components are the main building blocks that compose the user interface. So one of the first steps that helps an AngularJS app to be migrated to the new Angular is to refactor it into a more component-oriented structure. Components were also introduced in the old Angu...

step 1: Create Project - Application - app.js - Controllers - appController.js - Factories - SignalR-factory.js - index.html - Scripts - angular.js - jquery.js - jquery.signalR.min.js - Hubs SignalR version use: signalR-2.2.1 Step 2: Startu...

Protractor Installation and Setup Step 1: Download and install NodeJS from here. Make sure you have latest version of node. Here, I am using node v7.8.0. You will need to have the Java Development Kit(JDK) installed to run selenium. Step 2: Open your terminal and type in the following command to i...

Angular 4 is now available! Actually Angular uses semver since Angular 2, which requires the major number being increased when breaking changes were introduced. The Angular team postponed features that cause breaking changes, which will be released with Angular 4. Angular 3 was skipped to be able to...

Angular 2 wrapper library for Dropzone. npm install angular2-dropzone-wrapper --save-dev Load the module for your app-module import { DropzoneModule } from 'angular2-dropzone-wrapper'; import { DropzoneConfigInterface } from 'angular2-dropzone-wrapper'; const DROPZONE_CONFIG: DropzoneCon...

When generating new Angular 2 components in a .NET Core project, you may run into the following errors (as of version 0.8.3): Error locating module for declaration SilentError: No module files found OR No app module found. Please add your new Class to your component. Identica...

You will need to install node.js - https://nodejs.org/en/ npm install -g @angular/cli - install the CLI by executing this command in the terminal ng new projectname - after executing this command in the terminal, you will create a new sub folder titled projectname in your current folder. cd pro...

There are many ways to use MaterializeCSS framework. Few things to keep in mind before going to installation It is not a CSS only framwork, though it has CSS name in it. We can use its SCSS too It is not built for Angular It is a component framework too built on jquery. Though we are not supp...

This is an Angular 2 wrapper library for Dropzone. npm install angular2-dropzone-wrapper --save-dev Load the module for your app import { DropzoneModule } from 'angular2-dropzone-wrapper'; import { DropzoneConfigInterface } from 'angular2-dropzone-wrapper'; const DROPZONE_CONFIG: Dropzon...

Prerequisites: Setting up the Development Environment Before we get started, we have to setup our environment. Install Node.js and npm if they are not already on your machine. Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console wi...

If you want to see overall test coverage statistics than of course in Angular CLI you can just type below command, and see the bottom of your command prompt window for results. ng test --cc // or --code-coverage

This sample demonstrates the use of AD B2C for securing an AngularJS based web and mobile app. Refer https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample Azure AD B2C Azure AD B2C is a cloud identity management solution for your web and mobile applications. It is a highly available global...

Refer the example in https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample Web app implementation uses Hello.js that performs identity management with Azure AD B2C . Hello.js is a client-side JavaScript SDK for authenticating with OAuth2 web services and querying REST APIs. jwtHelper of ang...

<div ng-app="MainApp" ng-controller="SampleController"> <input ng-model="dishName" id="search" class="form-control" placeholder="Filter text"> <ul> <li dir-paginate="dish in dishes | filter : di...