angular-bootstrap modal template not displaying on first open() when using templateCache

You may have encountered this issue where the angular-bootstrap modal template doesn't display the first time you call open().

$scope.open = function (size) {

            var modalInstance = $modal.open({

                animation: $scope.animationsEnabled,

                templateUrl: 'my-modal.html',

                controller: 'MyModalCtrl',

                size: size,

                resolve: {

                    items: function () {

                        return $scope.items;

                    }

                }

            });

You also have this as your html template

<div>

    <script type="text/ng-template" id="my-modal.html">

        <div class="modal-header">

            <h3 class="modal-title">Remove this item?</h3>

        </div>

        <div class="modal-body">

            Are you sure you want to remove <b>{{ item.name }}</b>

        </div>

        <div class="modal-footer">

            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>

            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>

        </div>

    </script>

</div>

The trick here is to just remove the <script></script>  tags.

Hope that helps!  :)

A little trick to reloading an Angular.JS view using a hyperlink

Angular.JS routing can be tricky especially if you deal with hyperlinks.  Let's say you are currently on a view named '/contacts' and you have a hyperlink that points to '/contacts'.  The first thought is that clicking on this hyperlink would reload the view.  Instead nothing happens.  A little neat trick would be to add a forward slash to the URL like this '/contacts/'.  Doing this will force Angular to look at its route configuration and load the view.

Deploying a Yeoman-generated app dist folder using Git Subtree

Yeoman generated apps have a dist folder which contain the necessary files to run your web application.  When deploying to a server from Git, you do not need to pull an entire branch to it.  You just need to deploy the dist folder using the Git subtree command.  Here's how:

1.  Remove the dist folder from .gitignore.

2.  Add the dist directory to your repository.

git add dist && commit -m "Initial dist commit"

3.  Deploy the subtree to a different branch.  Specify a relative path to your dist folder with the --prefix

git subtree push --prefix dist origin distbranch

4. Develop normally, committing your entire repository to your default branch.

5. To deploy the dist folder, run the subtree push command from the root.

git subtree push --prefix dist origin distbranch

That's it!

Installing new version of Node.js on Ubuntu

Recently i added a new Ubuntu server on AWS with an old version of node.  To add the newer Node.js version, do the following:

sudo apt-get update
sudo apt-get install software-properties-common python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Editing the hosts file on a Mac

Sometime you need to test your application with URLs other than localhost.  In my case i needed to test  a Twitter oauth authentication callback and wanted to debug it on my localhost.  On Twitter i set my callback URL to http://test.mydomain.com.

On my mac, i had to change my hosts file to let my mac pretend it was test.mydomain.com.

Type this on the terminal:

sudo nano /private/etc/hosts

Add this line:

127.0.0.1   test.mydomain.com

That's it!

Git Pull from a different branch on Git

When you create a repository on Github, you check code in and out of the Master branch by default.  Usually, when deploying to production server, the application is built from the master branch and you don't wan't anyone to mess with production code.  So creating a separate branch on the same repository would be the way to go if you want to check in code without affecting the master branch.

To create a new branch on Github do the following steps:

1.  On the branch drop down, type a name for the new branch to create.  Try the name "dev".

2.  On the terminal, type 'sudo git pull'.  This will inform you that a new branch "dev" is available.

3.  Type 'sudo git checkout dev'

4.  Now you can do a 'sudo git pull' to get get code from the dev branch.

It's that easy!

angular-fullstack generator not renaming images from vendor css

Here's how to deal with angular-fullstack generator image files from vendors such as Bootstrap, datatables, etc.

First of all, Grunt doesn't move images from bower_components/datatables/media/images/* to your dist/public/images folder automatically.  So I had to manually copy image files from their folder to my /public/images folder.  This is where Grunt will pick image files up to copy to the dist/public/images folder.

The next issue was that my datatable images were not showing up on the page after doing a grunt serve:dist.  While troubleshooting, i noticed that the datatable css didn't have renamed image files.  They were pointing to the original names such as '../images/back.png' and not '../images/fc3423.back.png'.

The problem lies with default Grunt usemin configuration not including relative image paths such as '../images/back.png'.  Usemin would only update css to revved images in this path '/images/back.png' which it couldn't find.

    usemin: {
      html: ['<%= yeoman.dist %>/views/{,*/}*.html',
             '<%= yeoman.dist %>/views/{,*/}*.jade'],
      css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>/public']
      }
    },

Thanks to this link below, I was able to fix the issue after googling so many possible solutions:
http://stackoverflow.com/questions/21791727/grunt-usemin-failing-to-insert-revd-image-paths-into-jade-partials


Just change the assetDirs to this new value and everything works like a charm:

        usemin: {
            html: ['<%= yeoman.dist %>/views/{,*/}*.html',
                '<%= yeoman.dist %>/views/{,*/}*.jade'],
            css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
            options: {
                assetsDirs: ['<%= yeoman.dist %>/public/**/']
            }
        },