AngularJs call one method of controller in another controller .


I have seen many question about calling one method of one controller in another controller or extending scope of one controller in another controller.so here are the ways.
if you want to call one controller into another or extending scope of controllers there are four methods available
  1. $rootScope.$emit() and $rootScope.$broadcast()
  2. If Second controller is child ,you can use Parent child communication .
  3. Use Services
  4. Kind of hack – with the help of angular.element()
1. $rootScope.$emit() and $rootScope.$broadcast()
Controller and its scope can get destroyed, but the $rootScope remains across the application, that’s why we are taking $rootScope because $rootScope is parent of all scopes .
If you are performing communication from parent to child and even child wants to communicate with its siblings, you can use $broadcast
If you are performing communication from child to parent ,no siblings invovled then you can use $rootScope.$emit
HTML
<body ng-app="myApp">
    
ng-controller="ParentCtrl" class="ng-scope"> // ParentCtrl
ng-controller="Sibling1" class="ng-scope"> // Sibling first controller
ng-controller="Sibling2" class="ng-scope"> // Sibling Second controller
ng-controller="Child" class="ng-scope"> // Child controller
</div> </div> </body>
Angularjs Code
 var app =  angular.module('myApp',[]);//We will use it throughout the example 
    app.controller('Child', function($rootScope) {
      $rootScope.$emit('childEmit', 'Child calling parent');
      $rootScope.$broadcast('siblingAndParent');
    });

app.controller('Sibling1', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside Sibling one');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});

app.controller('Sibling2', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside Sibling two');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});

app.controller('ParentCtrl', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside parent controller');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});
In above code console of $emit ‘childEmit’ will not call inside child siblings and It will call inside only parent, where $broadcast get called inside siblings and parent as well.This is the place where performance come into a action.$emit is preferrable, if you are using child to parent communication because it skips some dirty checks.
2. If Second controller is child, you can use Child Parent communication
Its one of the best method, If you want to do child parent communication where child wants to communicate with immediate parent then it would not need any kind $broadcast or $emit but if you want to do communication from parent to child then you have to use either service or $broadcast
For example HTML:-
ng-controller="ParentCtrl">
ng-controller="ChildCtrl">
</div>
Angularjs
 app.controller('ParentCtrl', function($scope) {
   $scope.value='Its parent';
      });
  app.controller('ChildCtrl', function($scope) {
   console.log($scope.value);
  });
Whenever you are using child to parent communication, Angularjs will search for a variable inside child, If it is not present inside then it will choose to see the values inside parent controller.
3.Use Services
AngularJS supports the concepts of “Seperation of Concerns” using services architecture. Services are javascript functions and are responsible to do a specific tasks only.This makes them anindividual entity which is maintainable and testable.Services used to inject using Dependency Injection mecahnism of Angularjs.
Angularjs code:
app.service('communicate',function(){
  this.communicateValue='Hello';
});

app.controller('ParentCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" Parent World");
});

app.controller('ChildCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" Child World");
});
It will give output Hello Child World and Hello Parent World . According to Angular docs of servicesSingletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.
4.Kind of hack – with the help of angular.element()
This method gets scope() from the element by its Id / unique class.angular.element() method returns element and scope() gives $scope variable of another variable using $scope variable of one controller inside another is not a good practice.
HTML:-
id='parent' ng-controller='ParentCtrl'>{{varParent}} ng-click='getValueFromChild()'>Click to get ValueFormChild
id='child' ng-controller='childCtrl'>{{varChild}} ng-click='getValueFromParent()'>Click to get ValueFormParent
</div>
Angularjs:-
app.controller('ParentCtrl',function($scope){
 $scope.varParent="Hello Parent";
  $scope.getValueFromChild=function(){
  var childScope=angular.element('#child').scope();
  console.log(childScope.varChild);
  }
});

app.controller('CarentCtrl',function($scope){
 $scope.varChild="Hello Child";
  $scope.getValueFromParent=function(){
  var parentScope=angular.element('#parent').scope();
  console.log(parentScope.varParent);
  }
}); 
In above code controllers are showing their own value on Html and when you will click on text you will get values in console accordingly.If you click on parent controllers span, browser will console value of child and viceversa.

Angular js sample projects


Angularjs sample application

19 AngularJS Admin Templates for Download

https://github.com/angular/angular.js/wiki/Projects-using-AngularJS

http://angularcode.com/

https://www.template.net/web-templates/website-templates/angularjs-template/

http://startangular.com/

15 Best Responsive HTML5 & CSS3 AngularJS Admin Templates To Build Awesome Web Apps 2016

30+ Responsive Free AngularJS Admin Themes

Bootstrap scrollspy affix


Understanding Bootstrap’s Affix and ScrollSpy plugins

 

Bootstrap horizontal scrolling tabs


http://www.bootply.com/l2ChB4vYmC

HTML:

</div>

CSS:

.wrapper {
position:relative;
margin:0 auto;
overflow:hidden;
padding:5px;
height:50px;
}

.list {
position:absolute;
left:0px;
top:0px;
min-width:3000px;
margin-left:12px;
margin-top:0px;
}

.list li{
display:table-cell;
position:relative;
text-align:center;
cursor:grab;
cursor:-webkit-grab;
color:#efefef;
vertical-align:middle;
}

.scroller {
text-align:center;
cursor:pointer;
display:none;
padding:7px;
padding-top:11px;
white-space:no-wrap;
vertical-align:middle;
background-color:#fff;
}

.scroller-right{
float:right;
}

.scroller-left {
float:left;
}

 

JAVASCRIPT:

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
var itemsWidth = 0;
$(‘.list li’).each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};

var widthOfHidden = function(){
return (($(‘.wrapper’).outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};

var getLeftPosi = function(){
return $(‘.list’).position().left;
};

var reAdjust = function(){
if (($(‘.wrapper’).outerWidth()) < widthOfList()) {
$(‘.scroller-right’).show();
}
else {
$(‘.scroller-right’).hide();
}

if (getLeftPosi()<0) {
$(‘.scroller-left’).show();
}
else {
$(‘.item’).animate({left:”-=”+getLeftPosi()+”px”},’slow’);
$(‘.scroller-left’).hide();
}
}

reAdjust();

$(window).on(‘resize’,function(e){
reAdjust();
});

$(‘.scroller-right’).click(function() {

$(‘.scroller-left’).fadeIn(‘slow’);
$(‘.scroller-right’).fadeOut(‘slow’);

$(‘.list’).animate({left:”+=”+widthOfHidden()+”px”},’slow’,function(){

});
});

$(‘.scroller-left’).click(function() {

$(‘.scroller-right’).fadeIn(‘slow’);
$(‘.scroller-left’).fadeOut(‘slow’);

$(‘.list’).animate({left:”-=”+getLeftPosi()+”px”},’slow’,function(){

});
});

custom data stored in wordpress


Contactfomdb plugin using:

https://wordpress.org/plugins/contact-form-7-to-database-extension/

Retrieving the images and form fields form the database plugin:

[cfdb-html form=”Contact for5″ filelinks=”img” show=”your-name,your-email,your-subject,UPLOAD” limit=”10″ orderby=”Submitted desc”]

${your-name}: ${your-email}

Subject: ${your-subject}

Subject:${UPLOAD}

[/cfdb-html]

 

[cfdb-html form=”Contact for5″ show=”UPLOAD” filelinks=”url”]

 <img src=”${UPLOAD}” height=”100″ width=”100″/>

[/cfdb-html]

 

<marquee  behavior=”scroll” direction=”left” width=”1000″>[cfdb-html form=”Contact for5″ show=”UPLOAD” filelinks=”url” stripbr=”true”]

 <img src=”${UPLOAD}” height=”100″ width=”100″ id=”imgbr” />

[/cfdb-html]

</marquee>

 

LESS Tutorial


Less could save variables!

Think of having to do big changes to your css colors. It’s obviously your designer fault but you’ll waste precious hours you could spend on facebook.
Less declare variables, if used smartly they could become precious patners. Example:

CSS Version

#content{
color: #FFFFFF;
background-color: #333333;
}

#title{
color: #333333;
background-color: #FFFFFF;
}

LESS Version

@gray: #333333;
@white: #FFFFFF;

#content{
color: @gray;
background-color: @white
}
#title{
color: @white;
background-color: @gray;
}

Powerful indeed. You could easily change your colors with just 1 line editing, plus variables works with any kind of css parameters, think of them as a code replacer.

 

Less make your code cleaner

Css could be a pain in the ass sometimes when you have to make specific class and expressions, Less works like a sir make your job easier and cleaner.

CSS Version

body #container { width: 200px; }
body #container .first_item{ color: black; }
body #container .first_item h2{ color: gray; }
body #container .first_item p{ color: red; }
body #container .second_item{ color: black; }
body #container .third_item{ color: gray; }
body #container .third_item p{ color: green; }

LESS Version

body{
    #container{
        width: 200px;
        .first_item{
            color: black;
            h2{
                color: gray;
            }
            p{
                color: red;
            }
        }
        .second_item{
            color: black;
        }
        .third_item{
            color: gray;
            p{
                color: green;
            }
        }
    }
}

If you look at the LESS syntax (that i’d remind you that minify when compiled) it’s much more clearer and specific. You could find that LESS version is far more similar to HTML than CSS one and this is one of most useful pratice of LESS, giving you the chance to read your and your patners code istantly.

Less can declare functions

LESS functions are like a bunch of css rules accepting variables. Actually functions are not required but they are the most powerful feature of LESS, the more you are smart the more you could make your code short and reusable.

CSS Version

#icon_1{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#icon_2{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#icon_3{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

LESS Version

.rounded-corners (@radius: 0) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#icon_1{
    .rounded-corners(5px);
}
#icon_2{
    .rounded-corners(10px);
}
#icon_3{
    .rounded-corners(15px);
}

Great feature, you could shorten big bunch of codes if you are smart enough to plan it early.

Less knows math

Self explains

LESS Version

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

LESS can import other .less files

Think of organizing your code in many .less files, one for variables, one for functions, one for fonts families. That’s what Bootstrap and Twitter guys do.
I will paste the bootstrap.less code, the power of this feature it’s that you could comment and cut out any part of your css anytime with just 2 digits, like i did:

LESS Version

/*!
 * Bootstrap v2.0.4
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";

// Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less";

// Components: common
@import "sprites.less";
//@import "dropdowns.less";
//@import "wells.less";
@import "component-animations.less";
@import "close.less";

// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; 

// Components: Nav
//@import "navs.less";
//@import "navbar.less";
//@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";

// Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";

// Components: Misc
//@import "thumbnails.less";
@import "labels-badges.less";
@import "progress-bars.less";
//@import "accordion.less";
//@import "carousel.less";
//@import "hero-unit.less";

// Utility classes
//@import "utilities.less"; // Has to be last to override when necessary

wordpress training in bangalore

Tags

, ,


Regular Batch: Monday to Friday

Fast-track Batch: as per student requirements ( Sat & Sunday )

We give students an opportunity to learn first-hand the challenges involved in designing websites professionally. We prepare you to utilize the potential of wordpress to full extent to develop a wide range of real-time website and provide hands-on experience in:

Corporate Websites/ Organization Websites

Online media such as magazines, newspapers, and publications

eCommerce and online transactions/registrations

Government organizations / applications

Small & Medium-business websites

NGO & other non-profit organizations websites

Community-based portals

School and religious websites

Personal Websites (showcasing professional expertise)

Organizational intranets and extranets

Introduction to WordPress* What is WordPress* The Dashboard* Admin Bar* Exploring Settings* Posts vs. Pages* Creating Posts

* Adding Links

* Adding Images

* Formatting Posts

* Scheduling Posts

* Categories and Tags

* Custom Themes

* Managing Comments

* Creating Users

* Theme integartion

* Convention HTML to WordPress Theme

* Custom post and pages integartion

* Creating a Page* Page Templates* Child Pages* What is a Plugin* Finding Plugins* Free Themes

* Premium Themes

* Child Themes

* Custom Menus

* Managing Comments

* Creating Users

* Child Themes

* Custom Menus

* Custom Plugins

*Custom Pages
*Contact forms integartions

*SEO Optimization for wordpress website

http://topnotchinfo.co.in/wordpress-training.php

Contact Us:

Location : Hyderabad ( Ameerpet )

Name     : Mahesh

Email     : mahesh.alladi@gmail.com

Mobile   : 9603813050

Students did own projects:

Student name: vijay  && Number: 9542185209
http://www.merabijapur.com/
http://www.healthtradition.in/

————— &&&———–

Student name: Ramesh Number: 8050575856

http://thedigitalciti.com/

http://rameshpennam.com/

————— &&&———–

Student name: Sudhakar Number: 7799309956

http://propertyonsale.com.sg

————— &&&———–

Student name: Rajukumar Number: 9885225882

http://sysconcronus.com/

————— &&&———–

Student name: Pratima

http://impratima.in/

————— &&&———–

Student name : Anurag   Number: 9700123092

http://syncrooms.com/

http://isphier.com/

————— &&&———–

Student name : Rapolu Praveen reddy    Number: 9949290999

http://fotobuddha.com/

————— &&&———–

Student name : Manasvi A

http://hitechpublicity.net   (Shopping Cart )

————— &&&———–

Student name : Ravi Kanth Vallakati

http://www.executiveshuttle.co.nz/
http://taylorbuildingmaintenance.co.nz/
http://justfences.co.nz/

 

Learn LESS in less than 20 minutes!


Declaring variables:

Less code :

@border-width: 1px;
@red: #842210;

// Using variables
div#header {
border: @border-width solid @red;
}

Css output:

div#header {
border: 1px solid #842210;
}

Mixins:

less code:

// The bordered class
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

// We reuse the contents of the bordered class
// in #menu a and .post a
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}

css code:

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

parametric mixin

less code:

.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

// Which can be used like this:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

// A parametric mixin with a default value:
.border-radius-with-default(@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

// Which can be used like this:
#content {
.border-radius-with-default;
}

// You can also use a parametric mixin
// without any parameters. This is useful if
// you don’t want the original mixin itself
// in the css output
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap;
}

css output:

#header {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}

Nested rules

less code

// In LESS you can nest your rulesets.
// This is a very important feature because:
// -You don’t have to write out repeating long
//  selectors
// -It helps to structurize your code

#content {
width: 500px;

a {
color: white;

// You can use the ‘&’-selector to
// apply a nested selector to the
// parent selector:
&:hover {
color: blue;
}

&.selected {
color: yellow
}
}
}

css code:

#content {
width: 500px;
}
#content a {
color: white;
}
#content a:hover {
color: blue;
}
#content a.selected {
color: #ffff00;
}

Operations

less code

// In LESS you can operate on any number,
// color or variable.

// Basic operations
@base: 200px;
@height: @base * 2;
@min-width: @base + 100;
@max-width: (@min-width – 50) * 2;

.basic_operations {
height: @height;
min-width: @min-width;
max-width: @max-width;
}

// Operating on colors:
@base-color: #444;

.color_operations {
color: @base-color / 4;
background-color: @base-color + #111;
}

css code:

.basic_operations {
height: 400px;
min-width: 300px;
max-width: 500px;
}
.color_operations {
color: #111111;
background-color: #555555;
}

Scope 

less code

// Scope in LESS is very similar to that of
// programming languages. Variables and mixins
// are first looked up locally, and if they
// aren’t found, the compiler will look in the
// parent scope, and so on.

@var: red;

#page {
@var: white;
#header {
color: @var; // white
}
}

#footer {
color: @var; // red
}

css code

#page #header {
color: #ffffff;
}
#footer {
color: #ff0000;
}

Learn LESS in less than 20 minutes!

http://winless.org/online-less-compiler

http://freebiesbug.com/code-stuff/html-ui-kits/