Thursday, August 29, 2013

how to edit Javascript (ar any) file in Sharepoint from VisualStudio

this is a nice little secret i've learned today from our new friend Horhe!

in ur machine right click Computer =>>Manage =>> right click Features =>> Add Features =>> choose (or make sure u have it) Desktop Experience.

then say ur site is "MySite". u can open a folder by this path "\\MySite\style library" in the file explorer. now u can edit that file anywhere, VS, notePad, Submile ect. and just by clicking CTRL + S and F5 u have ur new file in the browser!!.

*REMEMBER 1: unless u canceled versions u need to checkout the file (and if u did canceled i must not check it out)
*REMEMBER 2: plz dont forget to eventually copy the file to TFS or whatever backup u use.

HF!

Thursday, August 22, 2013

Bresleveloper's AngularJS Tutorial : QueryString - $location

http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-table.html

1st thing is that $location does everything the usual window.location but only under the module, everything after the hash tag(#).
in case u want the usual's they have $window as a wrapper to window (if u wanna know why go read :)).

so I am currently testing what we can do with that.
initially, if u look in my examples Ex 12-17 I got some conclusions:
1. changing anything in the $location while using $routeProvider refreshes the page.
2. u cant use $route and $routeParams in a service.
3. but u can use $location and everything is there
4. after an some more complex rendering events like Ajax based on my big proj the "updates" we put in the $location r sometimes being overrun and cleared.

so currently I think there is not much to do by combining the 2 unless like ur intending to refresh ur page with it. sound logical, just beware and put some logs to supervise what's happening.

exploring with event driven development the conclusion is that its basically useless, as after every event it gets deleted, and can only be used as a side base storage since it doesnt support the "back" in the browser.

cyu until next time

Tuesday, August 20, 2013

Bresleveloper's AngularJS Tutorial : Basic+ Route / Routing

http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-table.html

there is a nice thing with the $routeProvider that I learned from maybe the best and most advanced blogger in the world about angular - Ben Nadel, here in this post : http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
u can put anything u want in ur routes!

Ex no. 11

view (customRouteView, only for that top div) - I added this div at the top:
<div>{{ Bresleveloper }}</div>

code (Ex 11) - there r only 2 changes, 1st I added a view with the extra div
templateUrl: 'Views/customRouteView.html'

2nd change is in the CTRL:
       
var myController = function ($scope, myService, $route) {
    console.log("myController - NEW INSTANCE");
    $scope.myService = myService;
    myService.getData();

   
if ($route.current.Bresleveloper) {
        $scope.Bresleveloper = $route.current.Bresleveloper;
    }
   
else {
        $scope.Bresleveloper = ":)";
    }
};
 
 
 


another example, to help understand Bens example is my Ex 19

now if u think its of no use, then Ben took it to the next level here : http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm
I do advice you to make a couple of angular apps before trying that cuz its a bit hard to grasp, u use routing but not for routing, look at my examples Ex 19.

Next : http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial_22.html

Bresleveloper's AngularJS Tutorial : Basic Route / Routing

http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-table.html

u'll here a lot about angular's $route and $routeProvider, and let me warn u: its awesome and does ITS work great, BUT ONLY ITS JOB. so u should either manage ur app flow / navigation with angular's routing ALONE, or some other way while NOT mixing the angular route.

the good part is that if u use routing right u already have full links "built in" (I mean like www.ursite.com/thing1/filter2) support and browsers entries for back and forward, and that really great and sometimes that's what u need.

lets see why - if we take our previous example and try to "just" add routing like that we'll see that stuff just wont get updated, u can try to add to this all kinds like broadcast ect., the point is that here is where u can easly fall:

our view (I call it problemView cuz I don't use myService.X in it):

<div class="singleItem" ng-repeat="catalogItem in MainCatalog" ng-click="MainItemClick(catalogItem)" >
   <a class="box" href="#" >
      <img ng-src="{{ catalogItem.image }}" width="100">
      <div class="textContainer" >
         <h4>{{ catalogItem.level }} - {{ catalogItem.name }}</h4>
      </div>
   </a>
</div>

our code (Ex 4)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
   .main { width: 400px; }
   .singleItem { width: 25%; display:inline-block; border: 2px dashed green; }
   .textContainer { text-align: center; }
</style>

<script src="angular.js"></script>
<script >
   var myStudyModule = angular.module('myStudyModule', []);

   myStudyModule.config(function ($routeProvider) {
      console.log("config");
      $routeProvider
        
.when('/', { controller: 'myController', templateUrl: 'Views/problemView.html' })
         .when('/somethingElse/:level', { controller: 'myController', templateUrl: 'Views/problemView.html' })
         .otherwise({ redirectTo: '/' });
   });

   myStudyModule.service('myService', function ($http) {
      console.log("myService");
      var self = this;
     
      self.getDataPromise = function (parentKey, level) {
         console.log("myService.getDataPromise");
         var url = 'Handler1.ashx';
         if (parentKey && level)
            url += '?parentKey=' + parentKey + '&level=' + level;
         return $http.get(url);
      };
   });

   var myController = function ($scope, myService) {
      console.log("myController - NEW INSTANCE");
      $scope.MainCatalog = [];
      
      var getMyData = function (parentKey, level) {
         console.log("myController.getMyData");
         myService.getDataPromise(parentKey, level).success(function (data) {
            $scope.MainCatalog = data;
         });
      };


      getMyData();
      $scope.MainItemClick = function (catalogItem) {
         console.log("$scope.MainItemClick");
         getMyData(catalogItem.key, catalogItem.level + 1);
      };
   };

   myStudyModule.controller(myController);


</script>
</head>
<body>
   <div class="main" ng-app="myStudyModule" ng-controller="myController">
      <ng-view></ng-view>
   </div>
</body>
</html>

that's cuz when ur using $routeProvider its will create a new controller with every change. that thing is really forcing u to make ur controllers very abstracts, pure user behavior managers.
the right way to use routing is like that:

view (simpleView):

<div class="singleItem" ng-repeat="catalogItem in myService.catalog" ng-click="MainItemClick(catalogItem)" >
   <a class="box" href="#" >
      <img ng-src="{{ catalogItem.image }}" width="100">
      <div class="textContainer" >
         <h4>{{ catalogItem.level }} - {{ catalogItem.name }}</h4>
      </div>
   </a>
</div>

code (Ex 5)

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

myStudyModule.config(function ($routeProvider) {
   console.log("config");
   $routeProvider
     
.when('/', { controller: 'myController', templateUrl: 'Views/simpleView.html' })
      .when('/somethingElse/:level', { controller: 'myController', templateUrl: 'Views/simpleView.html' })
      .otherwise({ redirectTo: '/' });
});

myStudyModule.service('myService', function ($http) {
   console.log("myService");
   var self = this;
   self.catalog = [];

  
self.getData = function (parentKey, level) {
      console.log("myService.getMyData");
      var url = 'Handler1.ashx';
      if (parentKey && level)
         url += '?parentKey=' + parentKey + '&level=' + level;
      $http.get(url).success(function (data) {
         console.log("$http.get.success");
         self.catalog = data;
      });
   };


   self.getData();
});
var myController = function ($scope, myService) {
   console.log("myController - NEW INSTANCE");
   $scope.myService = myService;
  

   $scope.MainItemClick = function (catalogItem) {
      console.log("$scope.MainItemClick");
      myService.getData(catalogItem.key, catalogItem.level + 1);
   };
};

myStudyModule.controller(myController);
 


but that's a bit futile and can be very dangerous, we want to use the route parameters for the flow, so angular provides us the $routeParams.
with this way we actually use the anchor's href or $location or $window id needed.

DONT use is in the controller, in my example project (goto toc) ex no.6 is how bad it is, and 7-9 are just more examples about how to use all that but only Ex 10 is the really right one and i'll save for u here and give just no.10:

view (routeView - cuz I use href here):

<div class="singleItem" ng-repeat="catalogItem in myService.catalog" >
   <a class="box" href="#/{{ catalogItem.level + 1 }}" >
      <img ng-src="{{ catalogItem.image }}" width="100">
      <div class="textContainer" >
         <h4>{{ catalogItem.level }} - {{ catalogItem.name }}</h4>
      </div>
   </a>
</div>

code (Ex 10)

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

myStudyModule.config(function ($routeProvider) {
   console.log("config");
   $routeProvider
     
.when('/', { controller: 'myController', templateUrl: 'Views/routeView.html' })
      .when('/:level', { controller: 'myController', templateUrl: 'Views/routeView.html' })
      .otherwise({ redirectTo: '/' });
});
 
       
myStudyModule.service('myService', function ($http, $routeParams) {
   console.log("myService");
   var self = this;
   self.catalog = [];

  
self.getData = function () {
      console.log("myService.getMyData");
      var level = $routeParams.level;
      if (!level)
         level = 1;
     
var parentKey = 1; //this should also come from $routeParams with the same logic as level
      var url = 'Handler1.ashx?parentKey=' + parentKey + '&level=' + level;
      $http.get(url).success(function (data) {
         console.log("$http.get.success");
         self.catalog = data;
      });
   };

  
   //u cant put getData here cuz the service gets only 1 instance unlike the ctrl who gets an instance every route

});
 

var myController = function ($scope, myService) {
   console.log("myController - NEW INSTANCE");
   $scope.myService = myService;
   myService.getData();
};

myStudyModule.controller(myController);
 


Next : http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-basic_20.html