Tag Archives: Angularjs

Angularjs – Modules

Leave a reply

This blog is basically for me to look back and understand about the angularjs modules.

A module is a collection of services, directives, filters and configuration information.

The angular.module is a global place for creating, registering and retrieving angular modules. “angular.module” is the function used to retrieve or create angularjs modules. If passed two or more parameters a new module is created and if passed a single parameter it will return the module with the provided name.

   //Create a new module
   var anyModule = angular.module('anyModule', []);

   //register a new service
   anyModule.value('anyAppName', 'name');

   //configure existing services inside config method
   anyModule.config('$locationProvider', '$resourceProvider', function($locationProvider, $resourceProvider){
  //configure providers here
});

  //one can create an injector and load your modules too
  var injector = angular.injector(['ng', 'anyModule']);

‘angular.module’ takes 3 parameters ‘name’, ‘requires’, ‘config’.
‘name’ -> module to create or retrieve
‘requires’ -> required modules for this module to run (dependencies)
‘config’ -> any configuration for the module (Use this to register work which needs to be performed on module loading).

By default, it uses provider service to create a new instance of the service.
it uses provider service to instantiate $provider.provider(), $provider.factory(), $provider.service(), $provide.value, $provice.constant()
and registers $animation, $filterProvider, $controllerProvider, $compileProvider with the newly created module.

Angular js – Calling a function when ng-repeat is finished

Leave a reply

I had to call the SyntaxHighlighter/Prismjs to reload once the angularjs loading data is finished. I took some time to figure it out, but finally I found a StackOverflow post which helped me to fix this.

   $scope.$watch("posts", function (value) {
                            //  var pr = new prism();
                            //  pr.load();
                            $timeout(function () {
                                Prism.highlightAll();
                                SyntaxHighlighter.highlight();
                            });
                        });

One can manually load prism syntax and SyntaxHighlighter to apply their syntaxes after the data is loaded
for prism use

  Prism.highlightAll(asyn,callback);

and for SyntaxHighlighter it was eash

  SyntaxHighlighter.highlight();

Angular js – restrict links to page refresh

Leave a reply

With the anchor tags and routing used in Angular js Single Page Apps(SPA), we don’t want the entire controller to reload and refresh all the items.
To restrict the anchor tags from refreshing, you can add the directive to the main module

   .directive('a', [
    function () {
        return {
            restrict: 'E',
            link: function (scope, elem, attrs) {

                elem.bind('click', function (e) {
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#') {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
]);

Angular js – Adding scripts dynamically

Leave a reply

I have been learning and trying to implement couple of things using Angularjs and Nancy.
NancyFx with owin is fun to start with. I am adding couple of things that took some time to implement and to find online also.

Adding scripts dynamically:
in the main controller add the below function 

            $scope.loadScript = (function (url, type, charset) {
            if (typeof (type) == 'undefined') type = 'text/javascript';
            if (url) {
                var script = document.querySelector("script[src*='" + url + "']");
                if (!script) {
                    var heads = document.getElementsByTagName("head");
                    if (heads && heads.length) {
                        var head = heads[0];
                        if (head) {
                            script = document.createElement('script');
                            script.setAttribute('src', url);
                            script.setAttribute('type', type);
                            if (charset) script.setAttribute('charset', charset);
                            head.appendChild(script);
                        }
                    }
                }
                return script;
            }
        });

and in the child controller add the below function

$scope.$parent.loadScript('../Scripts/libs/prism.js', 'text/javascript', 'utf-8');