Skip to main content

AngularJS


WIRING VIEWS 

STEP 1

STEP 2
include ng-route.js
STEP 3
create route.js

angular.module('RouteModule',['ngRoute'])
.config(['$routeProvider',function($routeProvider){

$routeProvider.when('/notes',{
templateUrl:'',
controller: function($http){
   var notes = this;
  $http({
      method:'GET',
      url: '/notes'
   }).success(function(data{
        notes.data = data
     })
},
controllerAs: aliasname

})
when('/noteworthy',{

controller: ['$http','$routeParams',function($http,$routeParams){
   var notes = this;
  $http({
      method:'GET',
      url: '/notes/'+$routeParams.id
   }).success(function(data{
        notes.data = data
     })
},

}).
when('/notes',{
}).
otherwise({
   redirectTo:
})
}])



angular.module('NoteWrangler', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider

    .when('/notes', {
      templateUrl: 'templates/pages/notes/index.html'
    })
    .when('/users', {
      templateUrl: 'templates/pages/users/index.html'
    })
  .when('/notes/new', {
      templateUrl: 'templates/pages/notes/edit.html'
    })
  .when('/', {
      redirectTo: '/users'
    })
  .otherwise( {
      redirectTo: '/notes'
    })
    ;

}]);

LOGIC IN ROUTES 
$http({ 
method:'POST',
url:'/resource/path.json',
data: noteData
})


.when('/notes', {
    templateUrl: 'templates/pages/notes/index.html',
      controller: function($http) {
      var donkey = this; // closes over 'this'
         $http({method: 'GET', 
                url: '/notes'}).success(function(data) {
                donkey.notes = data;
            });
         },
  controllerAs: 'notesCtrl'
    })


angular.module('NoteWrangler')

.controller('NotesShowController', ['$http','$routeParams',function($http,$routeParams) {

var notes = this;

  $http({method:'GET',

      url: '/notes/' + $routeParams.id}).success(function(data){

       notes.note  = data;

});


}]);


 















 

DIRECTIVES WITH SCOPE 

Level 2 $scope


angular.module('NoteWrangler').directive('newCard',function(){
return{
   restrict:"E",
   templateUrl:"templateUrl/directives/nw-card.html"
}
})















When using the controllerAs syntax, the controller's context ( this) attaches things to the current scope behind the scenes.
{{header}}
  {{description}}

________________________________________________________

angular.module('NoteWrangler').directive('nwCard', [function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/nw-card.html',
    controller: function($scope) {
      $scope.header = 'Note Title';
      $scope.description = 'A lovely note description.';
    }
  };
}]); 
________________________________________________________


 

angular.module('NoteWrangler')
.controller('NotesIndexController', ['$http','$scope', function($http,$scope) {
  $http({method: 'GET', url: '/notes'}).success(function(data) {
    $scope.notes = data;
  });
}]);

route.js



angular.module('NoteWrangler', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      redirectTo: '/users'
    })
    .when('/notes', {
      templateUrl: 'templates/pages/notes/index.html',
      controller: 'NotesIndexController',
     controllerAs: notesCtrl ===removed
    })
    .when('/users', {
      templateUrl: 'templates/pages/users/index.html'
    })
    .when('/notes/new', {
      templateUrl: 'templates/pages/notes/edit.html',
      controller: 'NotesCreateController'
    })
    .when('/notes/:id', {
      templateUrl: 'templates/pages/notes/show.html',
      controller: 'NotesShowController'
    })
    .otherwise({
      redirectTo: '/notes'
    });
}]);




________________________________________________________

  Scope the Config Object

Directives by default inherit the parent's scope,i.e scope of div 
in order to avoid themfrom having this issue,we need 
angular.module("NoteWrangler")
       .directive("directive-name",function(){
       var num = i;
       return{
       restrict:"E",
       templateUrl:"templateUrl/directives/nw-card.html",
       scope:{
           header:@  
          }

       controller:function($scope){
        $scope.header = "Note Title"+ num 
       }

     }

})

Three options that comes with scope
 scope:{
           header:@   // one way  binding 
       }
 scope:{
           header:=   // Two way  binding 
       }
 scope:{
           header:&   // one way  binding 
       }













angular.module('NoteWrangler')
.directive('nwCard', function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/nw-card.html',
    scope:{
      header:"=",
      description :"="
    }
  };
});

angular.module('NoteWrangler')
.directive('nwCard', function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/nw-card.html',
    scope:{
      header:"=",
      description :"="
    }
  };
});

 
<div class="card" title="{{header}}">
  <h2 class="h3">{{header}}</h2>
  <p>{{description}}</p>
</div>

 
<div class="users-wrapper">
  <h1>Users</h1>

  <div class="users-wrapper">
    <a class="card-users" ng-repeat="user in users">
      <nw-card header ="user.name" description="user.bio"></nw-card>
    </a>
  </div>
</div>

What is link function ?

 Where is the proper place to access the HTML element within a directive?
inside link function 

  • Link function runs after the directive has been complied & linked up
  • Its a perfect place to manipulate DOM elements



 markdown.js

 What are ngBindHtml & $sce used for

 $sce: Strict 













_______________________________________________________

What does a service do ?

They hold functions 
  • responsible for connecting & fetching data 
  • sharing it across our application 

They can be used within 
  • controller
  • service
  • directive
  • filter 

They can be created using 5 recipes
  • value
  • Factory//used for sharing functions and objects across application 
  • Service
  • Provider//used for sharing methods and objects,but allows configuration
  • Constant
Creating a Factory

angular.module('NoteWrangler')
       .factory("Note",[function NoteFactory() {
}])

 Populating a Factory

 
angular.module('NoteWrangler')
.factory('Note', ['$http',function NoteFactory($http) {
return  {
    all:function(){
      return   $http({method: 'GET', 
              url: '/notes'});
   }
   };
}]);

 Calling a FactoryService

  • Injecting factory
  • call its/get/post/put/delete/update call accordingly

angular.module('NoteWrangler')
.controller('NotesIndexController', ['$scope', 'Note', function($scope, Note) {
  Note.all().success(function(data){
    $scope.notes = data;
  });
}]);
Calling a FactoryService














==================================================================

Why this is correct?
(from your correct response)
FACTORY NOTE
angular.module('NoteWrangler')
.factory('Note', ['$http', function NoteFactory($http) {
  return {
    all: function(){
      return $http({method: 'GET', url: '/notes'});
    }
  };
}]);
CONTROLLER
angular.module('NoteWrangler')
.controller('NotesIndexController',['$scope', 'Note', function($scope,Note){
  Note.all().success(function(data){
    $scope.notes = data;
  });
}]);


 HASHIFY : CRYPTO.JS
http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js
CRYPTOJS.MD5(email)









angular.module('NoteWrangler') .controller('NotesIndexController', ['$scope', 'Note', 'Tweetable', function($scope, Note, Tweetable) { Note.all().success(function(data) { $scope.notes = data; }); $scope.tweetThatNote = function ( desc ) { Tweetable( desc ).success(function(data, status, headers, config) { console.log( data ); }); }; }]); angular.module('NoteWrangler') .factory("Tweetable", function TweetableFactory($http){ return function(potentialTweet) { var url = "http://gentle-spire-1153.herokuapp.com/tweet"; return $http({method:'POST', url: url, data: {description:potentialTweet}}); }; });
WHY USE PROVIDERS TO BUILD A FACTORY ?




Providers make services configurable
SYNTAX

 .provider("SERVICE NAME",function <SERVICE NAME>Provider(){
  this.$get = function($http){};
});


 











































angular.module('NoteWrangler')
.provider('Tweetable', function TweetableProvider() {
  var characterLength = 144;

  this.setLength = function(maxLength) {
    characterLength = maxLength;
  };

  this.$get = function($http) {
    return function(potentialTweet) {
      return $http({
        method: 'POST',
        url: 'http://gentle-spire-1153.herokuapp.com/tweet',
        data: {
          description: potentialTweet,
          maxLength: characterLength
        }
      });
    };
  };
});
angular.module('NoteWrangler')
.provider('Tweetable', [ function TweetableProvider() {
  var characterLength = 144;

   this.setLength = function(length){
    this.characterLength = length;
  };
  this.$get = function($http){
     return function(potentialTweet) {
       return $http({
         method: 'POST',
         url: 'http://gentle-spire-1153.herokuapp.com/tweet',
         data: {
           description: potentialTweet,
           maxLength: characterLength
        }
       });
     };
  };
}]);

 __________________________________________________________________

 $resource

angular-resourse.js





















  1. angular-resource.js

angular.module('NoteWrangler')

.factory('Note', ['$resource', function NoteFactory($resource) {

  return $resource("/notes",{},{});

}]);

angular.module('NoteWrangler')
.controller('NotesIndexController', ['$scope', 'Note', 'Tweetable', function($scope, Note, Tweetable) {
$scope.notes = Note.query();
  
  $scope.tweetThatNote = function(noteToTweet) {
    Tweetable(noteToTweet).success(function(status) {
      console.log(status);
    });
  };
}]);


Labels:

Comments

Post a Comment

Popular posts from this blog

Microservices Design patterns

What are microservices? Microservices - also known as the microservice architecture - is an architectural style that structures an application as a collection of services that are Highly maintainable and testable Loosely coupled Independently deployable Organized around business capabilities Owned by a small team The microservice architecture enables the rapid, frequent and reliable delivery of large, complex applications. It also enables an organization to evolve its technology stack. You are developing a server-side enterprise application. It must support a variety of different clients including desktop browsers, mobile browsers and native mobile applications. The application might also expose an API for 3rd parties to consume. It might also integrate with other applications via either web services or a message broker. The application handles requests (HTTP requests and messages) by executing business logic; accessing a database; exchanging messages with other systems; and returni...
Post a Comment
Read more

GraphQL

What is GraphQL  API Standard invented & open-sourced by Facebook Alternative to  REST API  enables declarative data fetching  exposes single endpoint & responds to queries How it works?  Why Graphql? Improvises performance by reducing the data that is to be transferred over the internet Variety of different frontend frameworks and platforms on client-side Fast development speed & expectation for rapid feature development Why Graphql is better than REST? Flexibility & efficient  No more over /under fetching of data Over fetching : Under fetching: Insightful analytics  Schema serves as contract between client and server CORE CONCEPTS : SDL :SCHEMA DEFINITION LANGUAGE Writing Data with mutations 3 kinds of mutations creating new data updating existing data deleting existing data
Post a Comment
Read more

Jackson

<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-core </artifactId> <version>2.9.6</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-annotations </artifactId> <version>2.9.6</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-databind </artifactId> <version>2.9.6</version> </dependency> CBOR encoded data with Jackson <dependency> <groupId>com.fasterxml.jackson.dataformat</groupId> <artifactId>jackson-dataformat-cbor</artifactId> <version>2.9.6</version> </dependency> In order to read and write MessagePack encoded data <dependency> <groupId>org.msgpack</groupId> <artifactId>jackson-dataformat-msgp...
Post a Comment
Read more