weshouman/Debugging States.md

## Debugging States.md

      
    Raw
  

              Debugging States.md
            
          
    Transition messages

Following code displays log messages that get fired when state transitions happen,

watch for the error messages, in case any exists, if 404 is found for a requested object

check the templateURL naming the state shows in the developer tools console
Add the following to the html were angular is activated
ie: anywhere into index.html.erb given that application.html.erb has angular activated
<script>
angular.element(document).ready(function(){
// Credits: Adam's answer in http://stackoverflow.com/a/20786262/69362
// Paste this in browser's console
var $rootScope = angular.element(document.querySelectorAll("[ui-view]")[0]).injector().get('$rootScope');

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeStart to '+toState.to+'- fired when the transition begins. toState,toParams : \n',toState, toParams);
});

$rootScope.$on('$stateChangeError',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeError - fired when an error occurs during transition.');
  console.log(arguments);
});

$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
  console.log('$stateChangeSuccess to '+toState.name+'- fired once the state transition is complete.');
});

$rootScope.$on('$viewContentLoaded',function(event){
  console.log('$viewContentLoaded - fired after dom rendered',event);
});

$rootScope.$on('$stateNotFound',function(event, unfoundState, fromState, fromParams){
  console.log('$stateNotFound '+unfoundState.to+'  - fired when a state cannot be found by its name.');
  console.log(unfoundState, fromState, fromParams);
});
console.log("Some testing line");
});

</script>
Making State Transitions

In the index.html (or any html file that gets rendered) add the following snippets
<div ui-view>here</div>
<a ui-sref="MainState">Click Here to goto MainState</a>
<a ui-sref="SecState">Click Here to goto SecState</a>
or
<ui-view/>
<a ui-sref="MainState">Click Here to goto MainState</a>
<a ui-sref="SecState">Click Here to goto SecState</a>
That way when we click on some Click Here text we'll get a state transition with it's log messages.

  
## Including html files.md

      
    Raw
  

              Including html files.md
            
          
    Including a file into another

That's how we can include files/nested files, If I recall right, angular-rails-templates should be working for that.
<!--
  including the 2 files, that shall work if angular-rails-templates is working properly
  file1: app/assets/javascripts/test.tmpl.html
  file2: app/assets/javascripts/templates/stern/departments/departments.tmpl.html ->-
<div ng-include='"test.tmpl.html"'></div>
<div ng-include='"stern/departments/departments.tmpl.html"'></div>

  
## Template URL syntax.md

      
    Raw
  

              Template URL syntax.md
            
          
    Template Urls

Represent html files with pathes relative to the directories require-tree-ed in application.js
ie:
//= require_tree ./templates  
//= require_tree .  

enable us to access templates relative to:

app/assets/javascripts/templates/

and

app/assets/javascripts/

in order.
Using double quotation in single quotations syntax works with files that have no slashes in their path

ie: a file that is found directly in app/assets/javascripts/templates or app/assets/javascripts/
If you are asking Why!? the reason is that the final output is inserted into double quotations, which results into ""example.html"" instead of "example.html"
an example:
$stateProvider.state('main_state', {
  url: '/',
  templateURL: 'stern/departments/departments.tmpl.html',
  controller: 'mainController',
  controllerAs: 'mainCtrl'
})