Tuesday, 8 November 2016

Bootstrap
------------------------------

- free front-end framework for faster and easier
-Includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
-
What is Responsive Web Design?
creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

syntax:
<!DOCTYPE html> : at the beginning of the page
<html lang="en">

Library: including bootstrap.min.css along with jquery.min.js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

width=device-width: gets the width of the device like mobile,tab
initial-scale: initial zoom level when the page is first loaded by the browser
<meta name="viewport" content="width=device-width, initial-scale=1">

Containers classes:
-----------------------
-.container class provides a responsive fixed width container
-.container-fluid class provides a full width container ex: <div class="container-fluid">
-nested not possible(we cannot put a container inside another container)

Bootstrap Grid System:
-----------------------
-Bootstrap's grid system allows up to 12 columns across the page like span1...span12
Grid Classes(Bootstrap grid system has 4-classes)
---------------------
xs (for phones)
sm (for tablets) ex: <div class="col-sm-4">
md (for desktops)
lg (for larger desktops)

ex: <div class="col-sm-4"> : column-smalltablet-length

<small> :is used to create a lighter, secondary text in any heading
<mark> : in the light-yellow colored text
<abbr>: displays with caps like abbrivattion(UNO)
<blockquote>: used to tell them like this content takent from www website in <footer>
<blockquote class="blockquote-reverse"> :from right-to left alignment of the content
<dl>: Description Lists
<dl>
<dt>Heading </dt>
<dd>points</dd>
</dl>]

- <code> : snippet looks like code in red color
-<kbd>ctrl + p</kbd> displays like shortcuts of keyboard(kbd)
-<pre>: Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.

Text can be displayed using diff classes:
<p class="text-success"> green color
<p class="text-danger"> red color
<p class="text-muted"> light color

Similarly BgColor can be displayed using diff classes:
<p class="bg-success"> green color or simply "success" ex: <tr class="success" >
<p class="bg-danger"> red color
<p class="bg-muted"> light color

Class Description Example(without dot)
-------------------------------------------
.lead Makes a paragraph stand out
.small Indicates smaller text (set to 85% of the size of the parent)
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
.initialism Displays the text inside an <abbr> element in a slightly smaller font size
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
.list-inline Places all list items on a single line
.dl-horizontal Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side
.pre-scrollable Makes a <pre> element scrollable

Bootstrap Table:
-----------------
table: <table class="table"> content will display with table style with horizontal lines
Striped Rows: <table class="table table-striped"> : alternative rows in different default colors
<table class="table table-bordered"> : table with default borders

Image shapes: <img class="">
--------------
class="img-rounded" : rounded corners to an image
class="img-thumbnail" : shapes the image to a thumbnail
class="img-circle" : Circle shape image
class="img-responsive" : Adjusting(responsive) the image to the scale size of the window

Responsive Videos:
<iframe class="embed-responsive-item" src="http://youtube.com/video/1268/2762"></iframe>
class="embed-responsive-item-4by3 : 4:3 ratio old style
class="embed-responsive-item-16by9 : 16:9 ratio HD style

jumbotron (large box with grey color)
------------------------------------
<div class="jumbotron">
-we can place jumbotron ouside the container class if we dont wont screen size
-class="page-header" :page header like Bold font at the header of the page

-.well class adds a rounded border around an element with a gray background color and some padding
class="well" :Normal rounded with gray color box
class="well well-sm" :small rounded with gray color box
class="well well-lg" :large rounded with gray color box

Alerts with colored boxes: class="close" and data-dismiss="alert" is used to close the alert box
-------------------------------------------
<div class="alert alert-success">
<div class="alert alert-info">
<div class="alert alert-warning">
<div class="alert alert-danger">

Closing Alerts:
---------------------
To close the alert message, add class="close" and data-dismiss="alert" to a link or a button element:

The .fade and .in classes adds a fading effect when closing the alert message:
-------------------------------------------------------------------------------
-> The .fade and .in classes adds a fading effect when closing the alert message
<div class="alert alert-info fade in"> : multiple classes alert, alert-info, fade, in

Ex:
<div class="alert alert-info fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div

Bootstrap Buttons:
---------------------------
Bootstrap provides 7-styles with diff colors of buttons:

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
-<button type="button" class="btn btn-default">

- Media queries for response web design

Wednesday, 19 October 2016

AEM
-------------------------------------------------------------
AEM:
-Creating, managing and handling the web page components

Installation:
------------------
1.AEM-author-4502.jar
2.cq-quickstart(by double clicking on jar)
3.liscence.properties

Development:
-------------
-CRXDE eclipse was introduced by AEM But not preferable for bulk projects
-crd/de web-browser based development is suitable for light weight apps
-Eclipse with Maven is most suitable option to do devlopment with the support of java and jsp , pom.xml

-Tool: FileVault: for importing/exporting content to and from AEm's content repository

Running the AEM:
------------------
Just click on AEM-author-4502.jar will open adobe site with 4502 localhost
login with admin/admin

urls:
--------------------------
defualt username/pssowrd: admin

localhost:4502/

DB
----
-Aem doesn't use RDBMS it uses Content Repository
-Apache Jackrabbit (Oak) is a Content Repository
-Supports Mongo DB
-Interoperable with Jsp or Sightly(replacing jsp)

AEM MODES: Author and publish modes
------------------------------------
Author mode:(http:localhost:4502)
----------------------------------------
-Designing web pages, content creation,editing and publishing
-system administration
-Resides as a firewall in the network
-
publish mode:(http:localhost:4503)
---------------------------------------
-End users can able to see the pages published by author
-sotres the end uses written info like comments
-Dmz zone (Demilitarized zone) or publishers zone

AEM- Key components
--------------------
WCM : webCM - Admin related
DAM : Digital AudioM - docs, content,
Social Collaboration :- fb, wApp
Mobile
Marketing
Scene 7 Intergration

AEM UI'Scene
------------
1.Classic UI: desktop devices
2.Touch Optimized UI: touch devices, mobiles..etc

welcome Page: http://localhost:4502/welcome
Sites: http://localhost:4502/sites
http://localhost:4502/siteadmin

in components properties(ResourceSuperType: wcm/foundation/components/page):
sling:returnSuperType String
/foundation/components/page or wcm/foundation/components/page

Directories which we need to involve:
---------------------------------------
/apps- which code resides in this folder
/content- web based contennt, design content, developed code will goes to content folder
/home- User and Group Info.

-/apps
-/components
-pages(jsp's which are coded for UI)
-content
-other folders(drag and drop components)
-/install(osgi bundles)
-/src (osgi src code)
-/templates

Eclipse-Maven with Aem
------------------------
c:users/naveen/.m2/settings.xml (These are the plug-in settings we need to copy and paste into .m2 folder)
-We hv to give <localrepository> as m2-repo maven zip extracted file (if there is no firewall restriction go ahead with the central repository location)
-Setting path env-variables:
user variables:
JAVA-HOME: /jdk_1.6 jdk folder
MAVEN_HOME: /apache-maven folder

Edit the path as:
append at the end: ;%MAVEN_HOME%\bin;

check maven installed or not at cmd propmt: >mvn -version
-most commonly used archie_type for AEM is multimodule-content-package-archetype

FileVault:
------------
-cmd line tool to check-in/check-out from Content Repository
-usually required with Eclipse-Maven
-comes along with AEM jar file: \crx-quickstart\opt\filevault
-extract this filevault zip then we can set env-variables ./filevault/bin(after extracting copy upto bin then set

Friday, 23 September 2016

SELENINUM BASISCS:
-----------------------------

Pointing to the particular Element:
----------------------------------
1. driver.findElement(By.xpath("//input[@name='fname']"));
2. driver.findElement(By.xpath("//input[contains(@name,'fname')]"));
3. input[@id='email']/parent::*
4. input[@id='email']/following::*
5. input[@id='email']/following::tr

//select[@id='month']/following-sibling::*
//select[@id='month']/following-sibling::select/
//input[@id='pass']/preceding::tr

Locators:
----------------
By ID driver.findElement(By.id(<element ID>)) Locates an element using the ID attribute
By name driver.findElement(By.name(<element name>)) Locates an element using the Name attribute
By class name driver.findElement(By.className(<element class>)) Locates an element using the Class attribute
By tag name driver.findElement(By.tagName(<htmltagname>)) Locates an element using the HTML tag
By link text driver.findElement(By.linkText(<linktext>)) Locates a link using link text
By partial link text driver.findElement(By.partialLinkText(<linktext>)) Locates a link using the link's partial text
By CSS driver.findElement(By.cssSelector(<css selector>)) Locates an element using the CSS selector
By XPath driver.findElement(By.xpath(<xpath>)) Locates an element using XPath query

Ex: Chrome driver

System.setProperty("webdriver.chrome.driver", System.getProperty("user.dir")+"\\Drivers\\chromedriver.exe");
ChromeDriver driver= new ChromeDriver();
driver.get("http://www.google.com");
WebElement text =driver.findElement(By.xpath("//input[@name='q']"));
text.sendKeys("sample webdriver....");
driver.findElement(By.id("gsri_ok0")).submit();

EX:textbox
We can put values into a text box using the 'sendkeys' method. Similarly, we can also retrieve text from a text box using the getattribute("value") command.

1. driver.findElement(By.name("cpar1")).sendKeys("10");
Thread.sleep(10000000);

2. String result = driver.findElement(By.id("cpar1")).getAttribute("value");

Ex:Radio Button
(By default if selected then using click() we can unselect
By default if it is unselected then again using click() we can select)
We can select/unselect a check box using the 'click' method
To can select/unselect raido button using click()
1.driver.findElement(By.id("cpayoff1")).click();// becomes selected radio button
To check checkbox select/unselect
2.System.out.println("The Output of the IsSelected " + driver.findElement(By.id("cpayoff2")).isSelected());
.isDisplayed()) or .isEnabled()

EX:CheckBox
(By default if selected then using click() we can unselect
By default if it is unselected then again using click() we can select)

We can select/unselect a check box using the 'click' method
driver.findElement(By.id("caddoptional")).click();

Ex: DropDown
select an option using Text,Index, Value:
'selectByVisibleText':
Select dropdown = new Select(driver.findElement(By.id("ccompound")));
dropdown.selectByVisibleText("continuously");
or 'selectByIndex' :(indexing starts from zero)
Select dropdown = new Select(driver.findElement(By.id("ccompound")));
dropdown.selectByIndex(1)
or 'selectByValue' methods:
Select dropdown = new Select(driver.findElement(By.id("ccompound")));
dropdown.selectByValue("annually");

Ex:
<select id="ccompound" name="ccompound" style="width:80px;">
<option value="semiannually"> semiannually </option>
selectByValue selectByVisibleText

</select>

Thread.Sleep
----------------

Thread.Sleep is a static wait and it is not a good way to use in scripts as it is sleep without condition.
1.Thread.sleep(1000);
2.ExplicitWait: waits until that particulart element loading
WebElement DynamicElement = (new WebDriverWait(driver, 10)).until(ExpectedConditions.presenceOfElementLocated(By.id("DynamicElement")));

3.ImplicitWait: Waits tills DynamicElement loading
WebElement DynamicElement = driver.findElement(By.id("DynamicElement"));

4.FluentWait:
maximum amount of time to wait for a condition to take place, as well as the frequency with which to check the existence of the object condition.

Wait wait = new FluentWait(driver).withTimeout(60, SECONDS).pollingEvery(10, SECONDS) .ignoring(NoSuchElementException.class);
WebElement dynamicelement = wait.until(new Function<webdriver,webElement>(){

public WebElement apply(WebDriver driver){
return driver.findElement(By.id("dynamicelement"));
}

});

Ex: Drag and Drop
WebElement From = driver.findElement(By.xpath(".//*[@id='j3_7']/a"));
WebElement To = driver.findElement(By.xpath(".//*[@id='j3_1']/a"));

Keyboard Actions
-------------------
syntax to call keyboard functions using Selenium WebDriver.
sendKeys, pressKey,releaseKey
//to input the text as "software" to the browser textbox
driver.getKeyboard().sendKeys("software");
driver.getKeyboard().pressKey("software");
driver.getKeyboard().releaseKey("software");

Mouse Events:
----------------
click(WebElement onElement)
void contextClick(WebElement onElement)//ContexClick= mouse Right Click
void doubleClick(WebElement onElement)
void mouseDown(WebElement onElement)
void mouseUp(WebElement onElement)
void mouseMove(WebElement toElement)
void mouseMove(WebElement toElement, long xOffset, long yOffset)

Multi Select Action(multi select dropdown list)
------------------------------------------------
1. select dropdown button id
2. select desired item from dropdwon list of id'sample
3. Using WebElement we can get all the multiple selected list from dropdown list

Log4j methods
----------
Log level methods used for logging the messages as one of the following:
error
warn
info
debug
log

NDName = "^SeleniumAuto" + dateAndTime

id="ENodeB_deDetails";

urtrans_id_child1

after back button
backButton

xPathacBarringForSpecialACEdit://*[@id='paramDetailsDisplay']/div/div/div[2]/div/div/table/tbody/tr[1]/td/table/tbody/tr[2]/td/table/tbody/tr/td[2]/a

[@id='help']/following::a

input[@id='help']/following::tr

<script type="text/javascript"
function checkRedirect() { var userValue = document.getElementById('user').value; if (userValue == "null") { document.title = "Redirecting to Dashboard"; document.getElementById('redirect').click(); } }
var rootContext;
function openMasterHelpWindow()
{ var helppath="/pages/Help/";
title = "Masterhelp.html";
rootContext = $("#rootContext").attr("value"); var link = rootContext+helppath+title; window.open(link,"Help", "status=0, scrollbars=1, resizable=1 ,'height=' + screen.height + 'width=' + screen.width); "); return false; }</script>

eX:XPATHS:
--------------

//body/div/table/tbody/

1. xpath=//body/div[3]/form/fieldset/select
2. xpath=//body/div[3]/form/fieldset/select[last()]
3. xpath=//body/div[3]/form/fieldset/select[@id='searchLanguage']
4. xpath=//body/div[3]/form/fieldset/select[@name='language']
5. xpath=//div[@class='search-container']/descendant::select[@name='language']
6. xpath=//select[contains(@id, "searchLanguage")]
7. xpath=//div[@class='search-container']/descendant::select[position()=1]
8. xpath=//body/div[3]/form/fieldset/select[count(*)>1]

//*[@id='EntityContentDetails']/li/div/fieldset/div/div/div/div/div[2]/div/div/table/tbody/tr[3]/td/table/tbody/tr[4]/td/table/tbody/tr/td[2]/a

Monday, 8 August 2016

IntelliJ IDEA

Ctrl + N .class
ctl+shift+ N file in project
Alt+ f7 to know .class/method/variable in project
ctrl+ Q to view class documentation
ctrl+ O / ctrl+ I for overriding methods and Interfaces
Alt+Insert To generate Setter/Getter Methods

Tuesday, 26 July 2016

AngularJS

___________________________________________________

https://hello-angularjs.appspot.com/angularjs-restful-apis-get-method-code-example

https://docs.angularjs.org/api/auto/service/$injector

Background

In a traditional Web app, every time the app calls the server, the server renders a new HTML page. This triggers a page refresh in the browser. If you’ve ever written a Web Forms application or PHP application, this page lifecycle should look familiar.

In an SPA(AngularJS, AJAX), after the first page loads, all interaction with the server happens through AJAX calls. These AJAX calls return data—not markup—usually in JSON format. The app uses the JSON data to update the page dynamically, without reloading the page. Figure 2 illustrates the difference between the two approaches.

AngularJS starts automatically when the web page has loaded.

AngularJs treats quotes single quote(')= double quote(" ")
and it is case sensitive i.e a <> A

1.)The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
ex: <div ng-app=""> </div>

if ng-app="" that is empty then only ng-model values can be useful

otherwise means ng-app="myApp" contains any value then we have to use controllers to get the value from Scope.

2.)ng-init used to intialize the variables at ng-app level
ex: <div ng-app="" ng-init="myCol='lightblue'"> </div>
ex:
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
     <li ng-repeat="x in names">
       {{ x.name + ', ' + x.country }}
     </li>
</ul>
</div>

2.)The ng-model directive binds the value of the input field Values Validation purpose to the application variable name like input type as text, textarea, select...etc.
ex:

<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

3.)The ng-bind directive binds the innerHTML of the <p> element to the application variable name.
ex:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

Js will know as it is Angular Js with ng-app and ng-init:
---------------------------------------------------------
<div ng-app="" ng-init="firstName='John'">
</div>

<input type="text" ng-model="firstName"></p>
{{ firstName }}

calculations: {{ 5 + 5 }}

Controller:
------------
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}
</div>

Angular Module: (angular.module):

ex1: Addming Controller Module
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix ng-.

The ng-app directive initializes an AngularJS application.

The ng-init directive initializes application data.

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

ex2: Adding directive Module

You can invoke a directive by using:

Element name =E
Attribute=A
Class=C
Comment=M
By Default EA=elemnt and Attribute values exist in directive

ex: Directive By Element=E
<w3-tests-directive></w3-tests-directive>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestsDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>

ex: Directive By Attribute=A
here observe template is used

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});

</script>
<div w3-test-directive></div>

ex: Directive By Class=C
Here observe return, and template are used

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "C",
template : "<h1>Made by a directive!</h1>"
};
});

</script>
<div class="w3-test-directive"></div>

ex: Directive By comment=M
Here observe comment, restrict, replace, template fields


<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>Made by a directive!</h1>"
};
});

</script>

Angular Js Email Validation:
Here ng-model, ng-show are mandatory
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>

</form>

ng-model have the follwoing validation attibutes:

ng-empty ex: input.ng-empty{}
ng-not-empty
ng-touched
ng-untouched
ng-valid ex: input.ng-valide{backgorund-color:"green"}
ng-invalid ex:input.ng-invalid{background-color:"red"}
ng-dirty
ng-pending
ng-pristine

AngularJS Filters: (| pipe symbol in {{expression}} )

ex: {{ lastName | uppercase }}

ng-repeat with | symbol:
ex:<ul>
<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
</li>
</ul>

where names came from Scrope
$scope.names=[{name:'Naveen', country:'India'},
       {name:'praveen', country:'Australia'},
       {name:'Bhaaru', country:'India'}]
]

AngularJS Filters are as follws:
orderby:<li ng-repeat="x in names | orderby: 'country'">
filter, <li ng-repeat="x in names | filter : 'i'">

AngularJS provides filters to transform data:

currency Format a number to a currency format.
date Format a date to a specified format.
filter Select a subset of items from an array.
json Format an object to a JSON string.
limitTo Limits an array/string, into a specified number of elements/characters.
lowercase Format a string to lower case.
number Format a number to a string.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.

AngularJS Services:

-In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.

-30 built-in services.

|- $location service has methods which return information about the location of the current web page:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

|- $http service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

The $timeout Service

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

Create Your Own Service

To create your own service, connect your service to the module:

syntax:Create a service named hexafy:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

AngularJS $http

The AngularJS $http service makes a request to the server, and returns a response.

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});

</script>

Methods of $http service:

.get()

.put()

.post()

.delete()

.head()

.jsonp()

.patch()

Properties:(Response of get method url)

$http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });

|-The response from the server is an object with these properties:

.config the object used to generate the request.

.data a string, or an object, carrying the response from the server.

.headers a function to use to get header information.

.status a number defining the HTTP status.

.statusText a string defining the HTTP status.

|-get method

|-then method

if true success function

else error message function

JSON Records from the response object:

|-$scope.myData = response.data.records;

Select Box Using ng-options

DropDown:
<select ng-model="" ng-options="x for x in names">

</select>
(or)
<select>
<option ng-repeat="x in names">{{x}}</option>

</select>
Note: ng-repeat directive has its limitations, the selected value must be a string:
Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeathas to be a string.

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
Here, x is the key represents value as Y

Scopes:

Scope of particular attribute is available upto that tag-level only

Ex: <div ng-app="myApp"> </div>

Here, the Scope of the myApp is exist within div tag only
|-Scopes are attached to the DOM as $scope data property,

$rootScope

Every application has a single root scope. All other scopes are descendant scopes

$injector is used to retrieve object instances as defined by provider, instantiate types, invoke methods, and load modules.

ROUTING MODULE:
-----------------------------
with no page reloading, you can use the ngRoute module.

What is Routing in AngularJS?

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application),

with no page reloading, you can use the ngRoute module.

-ngRoute,
-$routeProvider
-templateurl:
-

ex:
To create app:
var app = angular.module("myApp", ["ngRoute"]);

To configure other pages:
app.config(function($routeProvider) {
$routeProvider
.when("/start.html", {
templateUrl : "main.htm",
controller: "I love starting the html",
template : "<h1>Main</h1><p>Click on the links to change this content</p>
  })
  .otherwise({
        template : "<h1>None</h1><p>Nothing has been selected,</p>"

Contoller: "otherwise option"

templateUrl : "sample.html" }); })

To display that routeProvider html pages:
<div ng-review> or <ng-review/> or <div class="ng-review">

-------------

Ex:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#red">Red</a>
<a href="#green">Green</a>
<a href="#blue">Blue</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>

2Ex:
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm",
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love Londonsssssssss";
});
app.controller("parisCtrl", function ($scope) {
$scope.msg = "I love Paris";
});

AngularJS Includes:

------------------------------------------------------

Ex:

</div>

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

app.controller('customersCtrl', function($scope, $http) {

$http.get("customers.php").then(function (response) {

$scope.names = response.data.records;

});

</script>

where myTable.htm:

<table>

<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

watermark-text:

Ex:
<input type="text" ng-model="username" watermark-text="Enter your user Name....." >
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attr) {
$timeout(function () {
var onFocus = function () {

NAVVENS