How to add AngularJS in rails application, error: rails:undefined method `register_engine' for nil:NilClass (NoMethodError)

Adding AngularJS in rails application is very easy. Just add angular-rails-templates in gem file as shown below:

  gem 'bower-rails'
  gem 'angular-rails-templates'

But some times it gives error and does not run as expected. This issue is might be because of sprocket version. We have to mention sprocket version in gem file

  gem 'sprockets', '2.12.3'

After adding sprocket in the gem file, update bundle

  $ bundle update
  $ rails g bower_rails:initialize json

Now open bower.json file and add angular in the library dependencies

{
  "lib": {
    "name": "bower-rails generated lib assets",
    "dependencies": {
      "angular": "latest",
      "angular-route": "latest"
    }
  },
  "vendor": {
    "name": "bower-rails generated vendor assets",
    "dependencies": {
    }
  }
}

One more important thing REMOVE turbolinks from gem file and from application.js file, and add angular in application.js file

//= require angular
//= require angular-route
//= require angular-rails-templates

For the reference below is my gem file

source 'https://rubygems.org'

gem 'sprockets', '2.12.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

gem 'angular-rails-templates'

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'

  gem 'bower-rails'

end


group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

how to align elements in a row with equal space around

Hello friend,
For any front-end developer aligning elements in a row with equal space is very common problem. This problem can be solved very easily if site is non responsive. But it will little difficult if your site is responsive. One method to solve this problem is use some calculation with margin/padding to properly align elements with spaces in between. Or one solution can be write huge media query for spaces in all different window widths. For example to create menu bar and keep it align horizontally for all small devices as well.

CSS3 provides one very good feature to solve such problems easily, that is- display: flex

Consider below code to display divs with text class as headers link

 

    
Item1
    

    
Item2
    

    
Item3
    

    
Item4
    

    
Item5

Apply this CSS code to display headers properly in all window widths

#container{
    display:flex;
    justify-content: space-around;
}
.delimeter{
    border-left:1px solid red;
}

Result of this code will be as:

You can check this link to see the example: https://jsfiddle.net/JitendraPal/6fdLpLxd/

To work properly in all browsers use prefixed appropriately as shown below:

          display: flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -webkit-flex;
          justify-content: space-around;
          -ms-justify-content: space-around;
          -webkit-justify-content: space-around;
          -moz-justify-content: space-around;

JavaScript amazing facts

JavaScript is the most used language of this time on the planet earth.

1. Everything is object in JavaScript, even function is also a first class object.
   • You can pass function object as an argument to a function
   • Function object can be returned from a function
   • Function may assigned to a variable
   • Function May be stored in an object or array
2. JavaScript programs use Unicode character set (UTF-16) which is super-set of ASCII and Latin-1 and supports virtually every written language currently used on the planet
3. NULL is an object in JavaScript
4. NaN is a number, if we say typeof NaN, then it would be number
5. typeof Infinity is a number
6. Function can execute themselves. We call them self executing function. This is very important concept/feature which is used at many places
7. using typeof we can not get if any variable is of type array. So how we can determine if a variable is of type array?

   var ar = [1,2,3];
   ar instanceof Array // this will return true because ar is of type array
   

   There is one more way to get the type of any variable:

   var ar = [1,2,3];
   Object.prototype.toString.call(ar); // "[object Array]"