Automatic (vs) Manual Bootstrapping in Angular JS

Hi guys, this article will helps you to understand a bit more about Angular JS bootstrapping. Here is the explanation for two ways of bootstrapping the Angular application with short examples.

  1. Automatic Bootstrapping
  2. Manual Bootstrapping

 

What are the Initialization Steps for Every AngularJS Application?

  • Angular initializes automatically when DOM content is completely loaded or when the jsscript is evaluated.
  • Angular looks for the ng-appdirective, if found then it loads the module associated with the ng-app
  • Then an application injector is created.
  • This will retrieve object instances, instantiate types, invoke methods, and load modules.
  • Compile the DOM elements treating the element containing ng-app directive as the root of the application.

What is Automatic Bootstrapping?

  • Theng-app is the directive that can be placed anywhere in the application. And that’s going to be the entry point of the application.
  • Angular will automatically bootstrap the application when it sees the ng-app
  • When you addng-app directive to the root of your application, typically on the <html> tag or <body> tag if you want angular to auto-bootstrap your application.

  • The script tag is placed at the bottom of the page to improve application load time. By placing script at the end, we can ensure that HTML loading is not blocked by jsscript loading.

What is Manual Bootstrapping?

  • Angular provides a method to control the bootstrap process programmatically or we say manually using boostrap()method.
  • You should not use theng-app directive if you use bootstrap  method.
  • Manual Bootstrap will provide more control over when and where angular to be initialized. So that the programmer can avoid deadlock situations b/w various script references when using Automatic Bootstrapping.
  • Below script will allow user to bootstrap manually.

  • The first parameter document in angular.bootstrap( ) will make sure that your document is ready before bootsrapping.
  • Second parameter is the name of the Module.

Here is the example for Manual Bootstrapping

Make sure that your application consist of AngularJS reference

Below is script which will be placed in <body> .

Below is script for manual bootstrap

 

Output: Here is the output for manually bootstraped angular application

Using Camera along with Gallery in Xamarin Forms

Hi guys. This article gives beginners a very good understanding about how to use Camera & Gallery in Xamain Forms.

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017    File    New    Project    Choose Cross-Platform Template    Choose MobileApp (Xamarin.Forms )    Name it as CamandDocApp    Click on OK    Choose .NetStandard    Click OK

Step2: Creating a model Gallery.cs

Go to Project CamandDocApp    Right Click    Add Class Gallery.cs

 

File: Gallery.cs

Model as shown in the following code,
Let consider two properties as Path and Index, as we considering Path as OnpropertyChange .

Step 2: Setting up OnpropertyBase

File: OnpropertyBase.cs

As the Application is creating through MVVM Pattern , we have declared the Model and

Now we have to create the View of Application

Step 3: Setting up Mainpage.Xaml

File: MainPage.Xaml

Step 4:  Installing NuGet Pakages for Camera/Media and Connectivity

  1. Xam.Plugin.Media
  2. Xam.Plugin.Connectivity

Go to Project CamandDocApp   Right Click   ManageNuGet Pakages for Solution

 

Step 5: Initializing CrossMedia

Go to Project .Android   MainActivity.cs

 

Step 6: Creating ViewModel

File: GalleryViewModel.cs

Step 7: Setting up Required Permissions

Go to Project .Android   RightClick Properties   Select Android Manifest   Required Permissions

* CAMERA

* READ_EXTERNAL_STORAGE

* READ_INPUT_STATE (Please check with below Image)

 

Step 8: Creating paths to save the Images.

Go to Project .Android    RightClick Resources   Create New Folder “xml”   Create new file in xml folder “file_paths.xml”

File: file_paths.xml

 

Step 9: Setting up new resource in Android.Manifest.xml

File: Android.Manifest.xml

Add the below code in between the <manifest></manifest>

For the <application> open tag, setup the label with your application Name

Output:

How to add dynamic fields in Angular 6

  • FormArray is one of the three basic building blocks to define forms in angular along with FormGroup, FormControl.
  • It works similar to FormGroup, where a FormArray status depends upon all its children status. That is if any one FormControl in FormArray is invalid then the status of the entire array becomes
  • A FormArray can hold any instances either it can be FormGroup, FormControl (or) even other
  • This is mostly used for adding dynamic controls in Reactive Forms.

Step1: Create a component

File: FormComponent.ts

Step2: Create a template

File: template.html

Step3: Adding FormsComponent in AppModule

File: app.module.ts

Step4: Bootstraping AppModule

File: main.ts

Step5: Creating Startup file. Add the required files for bootstrap in your directory.

File: index.html

Output:

Entry with Custom Border in Xamarin Forms

Introduction:

In Xamarin Forms Entry control allows a single line of text to be edited. This article demonstrates how to create a custom renderer for the Entry control, enabling developers to override the default native rendering with their own platform-specific customization.

Custom Renderer:

  1. This sample demonstrates a custom renderer for the Entry control, “Enabling developers to override the default native rendering” with their own platform-specific customization.
  2. Custom renderers provide a powerful approach for customizing the appearance and behavior of Xamarin Forms controls. They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.

 

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017 à File à New à Project à Choose Cross-Platform Template à Choose MobileApp (Xamarin.Forms )à Name it as EntryLineWithanyColorà Click on OKà Chose .NetStanderdà Click OK

 

Step2: Creating CustomEntry.cs

Go to Project EntryLineWithanyColorà Right Click àAdd Class CustomEntry.cs

File Name: CustomEntry.cs

A custom Entry can be created by subclassing the Entry control, as shown in the following code

The CustomEntry control is created in the .NET Standard library project and is simply  ENTRY control. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the CustomEntry control.

 

Step 3:  Create a class in the Android directory and name it as CustomRenderer.cs

Go to EntryLineWithanyColor.Android à Right Click àAdd Class CustomRenderer.cs

 

File Name: CustomRenderer.cs

Brief Explanation of the above Code:

Here Added the ASSEMBLY attribute it means like declarations

  • CustomEntry is the name of the placeholder class in your common (PCL or Shared) Forms library.
  • ExportRenderer is the name of the actual platform specific implementation class in your iOS/Android/WP project.

Essentially, telling Forms, “when you need to render CustomEntry on Platform X, use the class CustomRenderer.”

  1. Create a subclass of the EntryRenderer class that renders the native control.
  2. Override the OnElementChangedmethod that renders the native control and write logic to customize the control. This method is called when the corresponding Xamarin Forms control is created.
  3. Added an ExportRendererattribute to the custom renderer class to specify that it will be used to render the Xamarin Forms control. This attribute is used to register the custom renderer with Xamarin Forms.

 

 

Step 4: Create UI for Border less Entry 

File Name: MainPage.xaml

Here for Example I have taken Login Form for better Understand

Here we have to declare the Local Refernce nameSpace in MainPage.xaml

 

 

Output: Run the program Ctrl+F5

 

Deploy ASP.NET MVC + Angular 4 + PostgreSQL into AWS

Hello guys hope you are doing good 🙂

From the past few days I was suffering to deploying my ASP.NET MVC application integrated with Angular 4 + PostgreSQL DB into AWS. After my serious deliberation I’ve goto know the procedure and wanted my friends to know about this. That might help you in future.

Step1: Create Elastic Beanstalk web application in AWS

  • Once you login into your account you can find the “Build a solution” section below
  • Choose on Build a web app

  • To create a new Application click on Create New Application, and fill the following required fields Application Name & Platform (.Net). And click on “Create application” button which will start creating the application

 

  • Once application is created with Environments, then you must be able to see HealthGreen

  • Now make sure that the user which is going to be used has the following permissions.

 

Step2: Create RDS (Postgres) in AWS

  • Go to RDS service, and choose PostgreSQL from Step1

 

  • Click on Next, in Step2 choose your case Production (or) Dev / Test
  • Provide the required details
    1. DB instance Class (1GB/ 2GB/…..)
    2. DB Instance Name
    3. Master Username & Password
  • Now make sure that your instance is publicly accessible – Yes, if not click on Modify in Details Section. And choose Public accessible – Yes. If it is not public accessible we will be not able to access this Database in PgAdmin.

 

Step3: Deploy the application into AWS

  • Firstly we need to install “AWS toolkit for Visual Studio 2017”. Once installed you can see the option “Publish to AWS Elastic Beanstalk” on right click the project.
  • Select “Publish to AWS Elastic Beanstalk”, it ask you to create Account Profile.
  • To get the Access Key Id & Secret Access Key, Go to IAM in AWS Console.
  • Select the user, then go to “Security Credentials”, where we can create the Access Key.

 

  • Once you create a new Access key, it gives you Access Key ID & Secret Access Key. Make sure to store your Secret Access Key in a secured place.
  • Now go back to VS 2017 and enter your credentials.
  • Now you can see the Web App we have created in AWS Console.
  • Now Go to View  Open AWS Explorer  Amazon EC2  Key Pairs  Create key pair

 

  • Creating a new Key Pair, will give you a <Key Pair Name>.pem
  • Select “Publish to AWS Elastic Beanstalk”, after selecting profile click on Next.
  • In the Application Options section add the key value pair. And click Next
  • Now click Deploy

 

Step4: Check database connections

  • Open PgAdmin4
  • Get the Host Name from the AWS Console  RDS  Instances  Copy the End Point (Host Name)
  • Now create New Server  Enter the Credentials of RDS.
  • Create your tables required for the application.

 

Step5: Install Angular Packages in EC2 instance using Remote Desktop

  • Go to EC2 Service
  • Click on “Instances”
  • Find your instance and right click on it, then choose “Get Windows Password”

  • Now it will ask you to upload “Key Pair Path” Get the <Key Pair Name>.pem file that we have created when deploying the Web App.
  • Once you upload it will generate the Password, make sure to store it a secured directory.
  • Now you can connect to the Remote desktop using that password.
  • Once you have connected go to C:\\inetpub\\wwwroot.
  • Open command prompt for wwwroot directory.
  • Download Node from the https://nodejs.org/en/ .
  • Now in the command prompt type “npm install”, this will install the packages required for angular.

  • Now run the application

 

Round Entry in Xamarin Froms

Introduction:

In Xamarin Forms Entry control allows a single line of text to be edited. This article demonstrates how to create a custom renderer for the Entry control, enabling developers to override the default native rendering with their own platform-specific customization.

Custom Renderer:

  1. This sample demonstrates a custom renderer for the Entry control, “Enabling developers to override the default native rendering” with their own platform-specific customization.
  2. Custom renderers provide a powerful approach for customizing the appearance and behavior of Xamarin Forms controls. They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.

 

 

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017    File    New    Project    Choose Cross-Platform Template     Choose MobileApp (Xamarin.Forms )    Name it as RoundEntry    Click on OK    Chose .NetStanderd    Click OK

Step2: Creating CustomEntry.cs

Go to Project CustomEntry    Right Click    Add Class CustomEntry.cs

 

FileName:CustomEntry.cs

A custom Entry can be created by sub classing the Entry control, as shown in the following code

The CustomEntry control is created in the .NET Standard library project and is simply  ENTRY control. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the CustomEntry control.

 

Step2:  Create a class in the Android directory and name it as CustomRenderer.cs

Go to RoundEntry.Android  Right Click   Add Class CustomRenderer.cs

 

 

Brief Explanation of the above Code:

Here Added the ASSEMBLY attribute it means like declarations

  • Custom Entry is the name of the placeholder class in your common (PCL or Shared) Forms library.
  • Export Renderer is the name of the actual platform specific implementation class in your iOS/Android/WP project.

Essentially, telling Forms, “when you need to render Custom Entry on Platform X, use the class CustomRenderer.”

  1. Create a subclass of the EntryRenderer class that renders the native control.
  2. Override the OnElementChangedmethod that renders the native control and write logic to customize the control. This method is called when the corresponding Xamarin Forms control is created.
  3. Added an ExportRendererattribute to the custom renderer class to specify that it will be used to render the Xamarin Forms control. This attribute is used to register the custom renderer with Xamarin Forms.

 

Step 3: Create UI for Round Entry 

File Name: MainPage.xaml

Here for Example I have taken Login Form for better Understand

Here we have to declare the Local Refernce nameSpace in MainPage.xaml

Output: Here we go.. Press Ctrl+F5

Border less Entry in Xamarin Forms

Introduction:

In Xamarin Forms Entry control allows a single line of text to be edited. This article demonstrates how to create a custom renderer for the Entry control, enabling developers to override the default native rendering with their own platform-specific customization.

Custom Renderer:

  1. This sample demonstrates a custom renderer for the Entry control, “Enabling developers to override the default native rendering” with their own platform-specific customization.
  2. Custom renderers provide a powerful approach for customizing the appearance and behavior of Xamarin Forms controls. They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.

 

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017    File   New   Project   Choose Cross-Platform Template   Choose MobileApp (Xamarin.Forms )   Name it as BorderLessEntry   Click on OK   Choose .NetStanderd   Click OK

 

Step2: Creating CustomEntry.cs

Go to project BorderLessEntry   Right Click   Add Class CustomEntry.cs

File Name: CustomEntry.cs

A custom Entry can be created by subclassing the Entry control, as shown in the following code

The CustomEntry control is created in the .NET Standard library project and is simply an Entry control. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the CustomEntry control.

 

Step 3: Create a class in the Android directory and name it as CustomRenderer.cs

Go to BorderlessEntry.Android   Right Click   Add Class CustomRenderer.cs

 

File Name: CustomRenderer.cs

Brief Explanation of the above Code:

Here Added the ASSEMBLY attribute it means like Declarations

  • CustomEntry is the name of the placeholder class in your common (PCL or Shared) Forms library.
  • ExportRenderer is the name of the actual platform specific implementation class in your iOS/Android/WP

 

Essentially, telling Forms, “When you need to render CustomEntry on Platform X, use the class CustomRenderer

  1. Create a subclass of the EntryRenderer class that renders the native control.
  2. Override the OnElementChangedmethod that renders the native control and write logic to customize the control. This method is called when the corresponding Xamarin.Forms control is created.
  3. Added an ExportRendererattribute to the custom renderer class to specify that it will be used to render the Xamarin Forms control. This attribute is used to register the custom renderer with Xamarin Forms.

 

Step 4: Create UI for Border less Entry 

File Name: MainPage.xaml

I have taken example as Registration Form for better Understand

Here we have to declare the Local Reference namespace in MainPage.xaml

 

Output: Tadaa, here is the expected output

Pinch and Pan Image in Xamarin Forms

ZoomImage (PINCH and PAN) In Xamarin Forms

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017    File    New    Project    Choose Cross-Platform Template    Choose MobileApp (Xamarin.Forms )    Name it as ZoomImageApp    Click on OK    Chose .NetStanderd    Click OK

Step2: Creating DoubleExtension.cs

Go to PCF file In ZoomImageApp    Right Click    Add Class DoubleExtention.cs

File Name: DoubleExtensions.cs

Step 3: Creating Pinch & Pan Container

Create a class in the root directory and name it as PinchAndPanContainer.cs

File Name: PinchAndPanContainer.cs

Step 5: Copy any source image to Zoom it.

Go to ZoomimageApp.Android    Resources    Drawable    In my case I’ve taken slip.png

Step 6:  Creating UI for Pinch & Pan Container

File: MainPage.xaml

Output: Tadaaa, Run the program Ctrl+F5

XPath Selenium Selectors

XPath Selenium Selectors

We can find the location of any element on a web page using XML path expressions. The basic syntax for XPath is shown below:

Example = //input[@id=’user-message‘]

Absolute and Relative XPath

Generally, in some test automation engineer interviews, I asked the difference between absolute and relative XPath. Actually, it is the answer is very easy.

Absolute XPath

  • It is a direct way to locate an element.
  • It is very brittle.
  • Starts with single slash “/” that means starting to search from the root.

Example: /html/body/div[2]/div/div[2]/div[1]/div[2]/form/div/input

Relative XPath

  • Starts from the middle of the HTML DOM.
  • Starts with a double slash “//” that means it can start to search anywhere in the DOM structure.
  • Shorter than Absolute XPath.
  • Less fragile.

Example: //div[@class=’form-group’]//input[@id=’user-message’]

Example: //*[@class=’panel-body’]//li[contains(text(),’entered in input field’)]

Writing Smart XPaths for Complex and Dynamic Elements

1) Writing XPath with Tag & Attribute & Value Trio

Example: //input[@id, ‘user-message’]

Examples:

2) Writing XPath with contains()

It is very handy XPath Selenium locator and sometimes it saves the life of a test automation engineer. When an attribute of an element is dynamic, then you can use contains() for the constant part of the web element but also you can use contains() in any condition when you need.

Example: //input[contains(@id, ‘er-messa’)]

Examples:

3) Writing XPath with starts-with

This method checks the starting text of an attribute. It is very handy to use when the attribute value changes dynamically but also you can use this method for non-changing attribute values.

Example: //input[starts-with(@id, ‘user’)]

4) Writing XPath with Chained XPaths Declerations

We can chain multiple relative XPath declarations with “//” double slash to find an element location as shown below.

Example: //div[@class=’form-group’]//input[@id=’user-message’]

5) Writing XPath with “and Statement

In this method, we use two interrogation conditions such as A and B and return a result-set as shown below:

Example: //*[@id=’user-message’ and @class=’form-control’]

6) Writing XPath with text()

We can find an element with its exact text.

Example: .//label[text()=’Enter message’]

 

$emit, $broadcast, $on – Part2

$emit: It dispatches an event name upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $emit was called. The event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.

$broadcast: It dispatches an event name downwards to all child scopes (and their children) and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $broadcast was called. All listeners for the event on this scope get notified. Afterwards, the event traverses downwards toward the child scopes and calls all registered listeners along the way. The event cannot be canceled.

$on: It listen on events of a given type. It can catch the event dispatched by $broadcast and $emit.

  • And now creating the script, here myController is the controller which is going to emit/broadcast an event with some arguments.
  • parentController1, parentController2 will listen to event which is dispatched from myController by $broadcast.
  • childController1, childController2 will listen to event which is dispatched from myController by $emit.

 

output

  • In this example we have used $scope context to $emit/$broadcast the events, and $on has listened all the events by using $scope.$on().
  • Now if we have used $rootscrope context to $emit/$broadcast, it will not work same as that works with $scope.
  • Because $rootscope is the parent scope and it doesn’t have any parent, when we emit using $rootscope.$emit(), only $rootscope.$on() can listen to that events. Whereas when we broadcast using $rootscope.$broadcast(), all the $rootscope.$on() and $scope.$on() can listen to that event.

 

 

Cancelling Events:

Canelling event is possible when event is emitted, but we cannont cancel the event when it is broadcasted.

  • If the event is dispatched by using $scope.$emit( ) then any of the $rootscope/$scope listeners can cacel it.
  • If the event is dispatched by using $rootscope.$emit() then any of the $rootscope listeners can cancel it.

$emit, $broadcast, $on – Part1