[Angular JS] ng-click and ui-serf

Problems
Using angularJS ui router with 3 ui views, Leftbar for showing menu, topbar for showing application title and actions and content view for displaying actual content.


Clicking links in leftbar trigger change in state which in turn change the view of the content correspondingly. At the same time, current usage of the tab will be highlighted.


Problem is the color highlight is wrong. Surfing content B highlights menu of title A.


Reasons and Solutions
The mixture of usage of "ng-click" and  "ui-serf" in menu bar item causes the issue, I somehow used both ng-click to change router state and the view simultaneously, but the funny thing is when you change the router state, the binding will re-do and all the view binding will reset to initial state. This explains why when I click the link one more time, the color highlight becomes correct.


To fix this, I change the implementation method, I bind the $stateParams and $state to $rootScope as follows

$rootScope.$stateParams = $stateParams;
$rootScope.$state = $state;

After assigning, I can access the current state directly in the view template and therefore save the effort on changing the state in ng-click

References

• Can you use ng-click with ui-sref?
• Angular - run block vs bootstrap
• Angular UI Router Quick References
• UI Router Tabs with Routing

[requireJS] Case Study: Working With AngularJS

Struggling for 2 days, I finally make myself clear with the combination of angularJS and requireJS. I will note down with examples.


Target

• To load controllers, directives of AngularJS through requireJS.
  
  
• Enjoy the benefits of requireJS on AngularJS

Files Included

• main.js
• Centralize all the js loading by one single main js file.
  
  
• Specifying the dependencies of each module when loaded. E.g.: Bootstrap depends on jQuery
  
  
• insiderApp.js
• To define the Angular main insiderApp module
  
  
• controller.js
• To define the Angular controller module
  
  
• step0.html
• The Angular view

Coding

main.js

require.config({
 paths: {
  'jquery' : 'lib/jquery.min',
  'bootstrap' : 'lib/bootstrap.min',
  'bootstrap_select' : 'lib/bootstrap-select',
  'stepOne' : 'core/stepOne',
  'angular' : 'lib/angular',
  'angular-animate' : 'lib/angular-animate',
  'angular-route' : 'lib/angular-route',
  'controller' : 'controllers/controller'
 },
 
 //we do not add AMD-compliant script here!!
 shim: {
  "bootstrap" : { "deps" : ['jquery'] },
  'bootstrap_select' : { "deps" : ['jquery', 'bootstrap'] },
  'stepOne' :  { "deps" : ['jquery','bootstrap_select'] },
  'angular' : {
   exports : 'angular'
  },
  'angular-animate' : {
   "deps" : ['angular'],
   exports : 'angular-animate'
  },
  'angular-route' : { 
   "deps" : ['angular'],
   exports : 'angular-route'
  },
 },
 //for debug
 urlArgs: "bust=" + (new Date()).getTime() 
});


require(["jquery", "bootstrap", "bootstrap_select", "stepOne", "insiderApp", "angular", "controller"], function() {
 //requirejs sugar function >> Avoid putting all modules to the parameters
 var angular = require('angular')

 var csArr = ["/css/bootstrap-select.min.css", "/css/bootstrap.min.css", "/css/psliteM.css"];
 
 //manually start over insiderApp for angularJS, no need to put ng-app in html file
 angular.bootstrap(document,["insiderApp"]);
});

insiderApp.js

define(["angular", "angular-route", "angular-animate"],function(angular){
 var insiderApp = angular.module("insiderApp",["ngRoute", "ngAnimate"]);
 //routing
 insiderApp.config(['$routeProvider','$locationProvider',function($scope,$routeProvider,$locationProvider){
  
 }]);
 
 return insiderApp;
});

controller.js

//controller
define(['insiderApp'],function(insiderApp){
 insiderApp.controller('insiderControl', ['$scope', function($scope){
  //store all the required images path here
  $scope.menuImages = [
                     {
                      lm : './images/info.png',
                      width : '200px', 
                     },
                     {
                      mid : './images/setting.png',
                      width : '200px',
                     },
                     {
                      rm : './images/tv.png',
                      width : '200px',
                     },
                    ];
 }]);
});

step0.html

 

   

       

         Title alpha
       


 
 

  

   

     
        
      
   

    
        
      
   

    
        
      
   

Points to Note

• main.js
• Some tutorials will use require.config and we may also have requirejs.config, they are basically the same
  
  
• Requirejs object is used to setup 
• Dependencies of different modules
• Remember only non-AMD script is allowed to put in the deps parameters for dependency loading.
  
  
• Module exports as global variables for use of other modules
  
  
• Define the exact path of the js files
  
  
• require(["jquery", "bootstrap", "bootstrap_select", "stepOne", "insiderApp", "angular", "controller"]....
• jquery, bootstrap etc. is the self-defined name of js scripts to load, they are loaded in order
  
  
• We must load the controller module for the AngularJS controller to work properly
  
  
• Inside require function we have a second require function,which is called sugar function, it only loads the required modules for use inside the function, if you don't need it, you are NOT required to include in function parameters.
  
  
• angular.bootstrap is to manually trigger the start of angularJS, which is highly recommended to use when cooperate with requireJS
• When this was set, NO exists in the html view or AngularJS will throw errors
  
  
• insiderApp.js
• define(["angular", "angular-route", "angular-animate"],function(angular){
• Normally, we will ignore the first parameter of the define function and let requireJS to use the file name as the module name (recommended)
  
  
• Second array parameter tells requireJS that insiderApp module requires angular, angular-route and angular-animate to be loaded before executing the insiderApp module
  
  
• function parameter "angular" is returned by the angular function, this object is for the implementation of insiderApp
  
  
• Return the insiderApp variable or not depends on whether or not other modules need insiderApp, normally you need to return it.
  
  
• var insiderApp = angular.module("insiderApp",["ngRoute", "ngAnimate"]);
  Just like usual, start the angular module, we can do any configuration of the angular object in this file.
  
  
• controller.js
• Just like usual, controller of the Angular object
  
  
• define(['insiderApp'],function(insiderApp)...
• Controller rely on insiderApp for adding controller to the Angular module, so we need to put insiderApp to the array and use it inside the function
  
  
• insiderApp.controller('insiderControl', ['$scope', function($scope){...
• Do all the work of Angular controller as usual
  
  
• step0.html
• Main view
  
  
• NO here as we have already bootstrapped it manually in main.js

Others

•   How to determine whether a module is AMD-compatibile module
• Check the source code to see whether it has keyword like "define", "require"

References

1. http://segmentfault.com/blog/moejser/1190000000492238 
2. http://camnpr.com/archives/1563.html
3. http://tech.pro/blog/1561/five-helpful-tips-when-using-requirejs
4. http://stackoverflow.com/questions/17366073/requirejs-define-vs-require
5. http://kielczewski.eu/2013/04/integrating-angularjs-with-requirejs/
6. http://stackoverflow.com/questions/14619239/require-js-shim-not-working-for-this-code

[AngularJS] Basic Concepts

Here are the basic concepts of Angularjs, these concepts are barely well documented by the officials.

1. angular.config only accepts providers
2. Every service and factory are the instances of the providers
   
   e.g.
   

   angular.module('myApp')
     .service('FooService', function(){
       //...etc
     })
     .config(function(FooServiceProvider){
       //...etc
     });
   
   
   

   Reference: http://stackoverflow.com/questions/17485900/injecting-dependencies-in-config-modules-angularjs