To resolve EACESS issue, when installing yo

Install an AngularJS generator

You can install Yeoman generators using the npm command.

Install prerequisites

Before installing Yeoman, you will need the following:

• Node.js v0.10.x+
• npm (which comes bundled with Node) v2.1.0+
• git

You can check if you have Node and npm installed by typing:

 node --version && npm--version

You can check if you have Git installed by typing:

• git --version

Install the Yeoman toolset

Once you’ve got Node installed, install the Yeoman toolset:

• npm install --global yo bower grunt-cli

 Errors?

If you see permission or access errors, such as  EACCESS, do not use sudo as a work-around.Then

• sudo chown -R $USER:$GROUP ~/.npm
• npm cache clean  

then install yo

•  npm install --global yo bower grunt-cli 

Confirm installation

• yo --version && bower --version && grunt --version

Install an AngularJS generator

• npm install --global generator-angular@0.11.1

ngNotify in angularjs

ng-notify:-

 A simple, lightweight module for displaying notifications in your AngularJS app.

Implementation:-

 

a)Requirements

AngularJS is the only dependency. Animation is achieved with pure JS, jQuery not necessary.

b)Installation

You can install ng-notify with Bower.


 bower install ng-notify --save

c)Usage

After including ng-notify.min.js and ng-notify.min.css, inject the ng-notify provider into your project.

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

Now you can trigger notifications from anywhere in your app. To display a notification, just use the set method.

ngNotify.set('Your notification message goes here!');

To specify the type of notification to display, provide the optional type param. (For available types, check the definitions below.)

ngNotify.set('Your error message goes here!', 'error');

Advanced Usage:-

a)Default Configuration

You can override the default options for all notifications by using the config method. None of these options are required. (For available options, check the definitions below.)

ngNotify.config({
    theme: 'pure',
    position: 'bottom',
    duration: 3000,
    type: 'info',
    sticky: false
});

b)Individual Configurations

You can also pass an object of options to individual notifications. You can pass through any combination of our available options here as well. (For available options, check the definitions below.) For example:

 ngNotify.set('Your first message.', {
    position: 'top',
    sticky: true
});

ngNotify.set('Your second message.', {
    type: 'error',
    duration: 2000
});

ngNotify.set('Your third message.', 'error'); // Original use case still works, too.

ngNotify.set('Your fourth message.', {
    theme: 'pitchy'
});

ionic inputs

Text

First up is the Text Input, the most common input type used. The code is pretty standard, and if you’re used to web development this input isn’t anything new. This is also the fallback if a device does not support a certain HTML input type.

 <label class="item item-input">
  <span class="input-label">Username</span>
  <input type="text">
</label>

Email

The Email Input should be used anytime you require a user to enter an email address. It’s important to take advantage of this input type because it offers a much smoother keyboard experience, displaying the @ and . characters within the initial keypad for quicker typing.

 <label class="item item-input">
  <span class="input-label">Email</span>
  <input type="email">
</label>

Tel

The Tel Input is a very unknown and underused input type. It displays a full numeric keypad, which makes for a great user experience when all that is required from the user is numbers. Take advantage of this one!

 <label class="item item-input">
  <span class="input-label">Telephone</span>
  <input type="tel">
</label>

Search

The Search Input doesn’t do anything too different from the text input except change the standard “go” button to read “search” instead.

<label class="item item-input">
  <i class="icon ion-search placeholder-icon"></i>
  <input type="search" placeholder="Search">
</label>

Number

The Number Input is another way to offer numbers for your users. The difference between the number input and the tel input is that also offers easy access to special characters and symbols. However, if you only need numbers entered, it’s best to stick with the tel input.

<label class="item item-input">
  <span class="input-label">Number</span>
  <input type="number">
</label>

Date

The Date Input should be utilized for when a user is asked to enter the month, day, and year. The mobile keyboard will offer a nice interactive panel for easy entering.

<label class="item item-input">
  <span class="input-label">Date</span>
  <input type="date">
</label>

Month

The Month Input will trigger a keyboard experience similar to the date input, however it leaves out the “day” option. Use this input when your user only needs to enter the month and year. A perfect example would be for taking credit card expiration dates.

 <label class="item item-input">
  <span class="input-label">Month</span>
  <input type="month">
</label>

Password

The Password Input is another commonly used input in normal web development. It hides the characters so nobody else can see what the user is typing.

 <label class="item item-input">
  <span class="input-label">Password</span>
  <input type="password">
</label>

http request

What is HTTP?

The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers.
HTTP works as a request-response protocol between a client and server.
A web browser may be the client, and an application on a computer that hosts a web site may be the server.
Example: A client (browser) submits an HTTP request to the server; then the server returns a response to the client. The response contains status information about the request and may also contain the requested content.

Two HTTP Request Methods: GET and POST

Two commonly used methods for a request-response between a client and server are: GET and POST.

• GET - Requests data from a specified resource
• POST - Submits data to be processed to a specified resource

 Simple GET request example :

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

 Simple POST request example (passing data) :

$http.post('/someUrl', {msg:'hello word!'}).
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

In addition, you can supply a headers property in the config object passed when calling $http(config), which overrides the defaults without changing them globally.

To explicitly remove a header automatically added by $httpProvider.defaults.headers on a per request basis, Use the headers property, setting the desired header to undefined. For example:

 var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': undefined
 },
 data: { test: 'test' }
}

$http(req).success(function(){...})

      .error(function(){...});

Trim data in angularjs

If we want to trim data in angularjs and data fetched from the back-end then,include following filter in controller.js

 controller.js

.filter('cut', function () {
return function (value, wordwise, max, tail) {
if (!value) return '';

max = parseInt(max, 10);
if (!max) return value;
if (value.length <= max) return value;

value = value.substr(0, max);
if (wordwise) {
var lastspace = value.lastIndexOf(' ');
if (lastspace != -1) {
value = value.substr(0, lastspace);
}
}

return value + (tail || ' …');
};
});

And where you want to trim data in html page ,please include following:-

 a)If you want to ignore some later after spaces

{{expression.name| cut:true:100:'...' }}

b) If you want complete data

{{expression.name| cut:false:100:'...' }}

Ionic back arrow+hide data+history clear

 For adding the back arrow with out any text:-

 Firstly include following in the menu.html

 <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c arrow_size"></i>
        </ion-nav-back-button>
        </ion-nav-buttons side="left">
    </ion-nav-bar>

</ion-nav-buttons>

 Then include following in the app.js

 .config(function ($ionicConfigProvider){

 $ionicConfigProvider.backButton.text('').icon('').previousTitleText(false);

})

For hiding field from html page if that field has no data:-

 Include following in html page

 <div ng-show=”name == ‘myName’”>Some data</div> 

For clear history:-

Include following in the controller.js,for which you want to clear history

$ionicViewService.clearHistory();

Ionic list

Hi,
Here i am integrate expandable list in my project,like i have created a list and now i have to some child of each row into the list.When i will click on the any row of the list that time it will show its child elements with the expandable effect and other row's child element will hide.

 index.html

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic Accordion</title>
  
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>

  <body ng-controller="M<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic Accordion</title>
  
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>

  <body ng-controller="MyCtrl">
   
    <ion-header-bar class="bar-positive">
      <h1 class="title">Accordion List</h1>
    </ion-header-bar>

    <ion-content>

      <ion-list>
        <div ng-repeat="group in groups">
          <ion-item class="item-stable"
                    ng-click="toggleGroup(group)"
                    ng-class="{active: isGroupShown(group)}">
              <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
            &nbsp;
            Group {{group.name}}
          </ion-item>
          <ion-item class="item-accordion"
                    ng-repeat="item in group.items"
                    ng-show="isGroupShown(group)">
            {{item}}
          </ion-item>
        </div>
      </ion-list>

    </ion-content>
     
  </body>
</html>
   
    <ion-header-bar class="bar-positive">
      <h1 class="title">Accordion List</h1>
    </ion-header-bar>

    <ion-content>

      <ion-list>
        <div ng-repeat="group in groups">
          <ion-item class="item-stable"
                    ng-click="toggleGroup(group)"
                    ng-class="{active: isGroupShown(group)}">
              <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
            &nbsp;
            Group {{group.name}}
          </ion-item>
          <ion-item class="item-accordion"
                    ng-repeat="item in group.items"
                    ng-show="isGroupShown(group)">
            {{item}}
          </ion-item>
        </div>
      </ion-list>

    </ion-content>
     
  </body>
</html>

Css

  body {

  cursor: url('http://ionicframework.com/img/finger.png'), auto;

}

.list .item.item-accordion {

  line-height: 38px;

  padding-top: 0;

  padding-bottom: 0;

  transition: 0.09s all linear;

}

.list .item.item-accordion.ng-hide {

  line-height: 0px;

}

.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
  display: block !important;
}

js

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.groups = [];
  for (var i=0; i<10; i++) {
    $scope.groups[i] = {
      name: i,
      items: []
    };
    for (var j=0; j<3; j++) {
      $scope.groups[i].items.push(i + '-' + j);
    }
  }
 
  /*
   * if given group is the selected group, deselect it
   * else, select the given group
   */
  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };
 
});