Tuesday 7 February 2017

Angular directives & refrence at one place


ng-app: define in root element to identify & start angularJs.
ng-init: initializes application data.
ng-controller: define in root html of view part.
ng-model: define model name, bind data to input control
ng-bind: bind data to html tags by using ng-model.
ng-repeat: repeats html elements for each item in a collection.

DOM
ng-disabled : Active/inactive toggle control.
ng-show: show/hide toggle control.
ng-hide: hide/show toggle control.
ng-click: angularJs click ebent.

HTML elements Events
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste


Using CSS classes
To allow styling of form as well as controls, ngModel adds these CSS classes:

ng-valid: the model is valid
ng-invalid: the model is invalid
ng-valid-[key]: for each valid key added by $setValidity
ng-invalid-[key]: for each invalid key added by $setValidity
ng-pristine: the control hasn't been interacted with yet
ng-dirty: the control has been interacted with
ng-touched: the control has been blurred
ng-untouched: the control hasn't been blurred
ng-pending: any $asyncValidators are unfulfilled


AngularJS SQL over data collection
ng-repeat
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

AngularJS Select and Options
ng-options
<select ng-model="selectedName" ng-options="x for x in names">
</select>

AngularJS Services (AngularJS has about 30 built-in services.)
$location: app.controller('customersCtrl', function($scope, $location) {$scope.myUrl = $location.absUrl();});
$http: The service makes a request to the server, and lets your application handle the response.
$timeout: app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); });
$interval : app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString();$interval(function () {$scope.theTime = new Date().toLocaleTimeString();}, 1000);

Create Your Own Service
creation/
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
calling/
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});




AngularJS AJAX - $http
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "welcome.htm"
    }).then(function mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});

app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.content = response.data;
        $scope.statuscode = response.status;
        $scope.statustext = response.statustext;
    });