Angular JS Controllers and Scopes

Hello guys this post really helps for those who wanted to deep dive into Controllers and $scope. So our agenda is as follows

Agenda

  • Controllers
  • Monolithic Controllers
  • Scope/ Controller Inheritance
  • Scopeless Controllers

 

Controller:

  • AngularJS applications are controlled by controllers.
  • A controller is defined using ng-controller
  • A controller is a JavaScript object containing attributes/properties and functions. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller’s constructor function.
  • Controllers are used to setup the initial state and adding behaviour of the $scope
  • Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has data-binding for most cases and directives to encapsulate manual DOM manipulation.

Monolithic Controllers:

Monolithic Controllers can create only a single view throughout the application.

Let us see some Examples.

Example 1:

Step 1: Design View

Step 2:  Initializing ng-app and ng-controller

O/P

 

Example 2:

How to declare ng-app from External JS.

Right click on project   Add New Item JavaScript name it as app.js

Add reference of app.js in the <head> </head>

Now follow the same steps from Example1

Remove the initialization of ng-app from step 2 , and add that in app.js

Example 3:

Check whether the number is even or Odd.

O/P

Scope/Controller Inheritance:

The hierarchy of scopes that inherits from each other known as Scope/Controller Inheritance. This can be described briefly as nested Controllers  in AngularJS. The $scope that each Controller receives will have access to properties and methods defined by Controllers higher up the hierarchy.

Example 1:

Scopeless Controllers:

  • If an application does not depend upon communication with other controllers, or does not require any inheritance feature, you can use Scopeless Controllers. Scopeless Controllers are useful for small applications, to avoid complexities. Scopeless Controlles will be using this keyword instead $scope.
  • But this is not same as $scope.
  • $scope is more powerful and its use allows you to share the same data between controllers.
  • $watch services are attached with $scope which allows the view to be updated, where this doesn’t have such services. So that views will not get updated when using this

Example:

Using $scope

Using this

O/p: On clicking this button view remains same. That changes can be seen in Console.

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