AngularJS advanced trick and techniques

These days AngularJS is highly recommended framework for front-end developer. Angular is really awesome framework to work with. Below are few techniques those I feel really cool features and may be these are simple and easy for you but as a fresher in angular I think these features are really good.

1. How to add multiple classes in ng-class?

Everyone knows how to add class using ng-class, its very easy. We can use ng-class to have more than one class as well

 
// single class



// multiple class

 some content

Similarly we can add many classes separated by comma (,)

2. Can we have multiple conditions in ng-hide and ng-show?

Yes, we can have multiple conditions in ng-hide and ng-show.

// ng-show with multiple conditions

Some content

3. How to share methods or data between controllers?

Yes we can share data and methods between controllers using Factory or Service. Angular has service as constructor method which instantiate once on startup and we can use this service/factory in any controller within the module by injecting on controller method.

How to use factory or service in AngularJS

As a beginner in AngularJS it is very important to understand Service/Factory. AngularJS provides many services itself and we can use those services whenever we required, just by injecting in controller/module.

when we need to share some functions or some data we can create our own service/factory and have all the methods/data in that. To use these service's method or data we just need to inject that service and use.

For example if we want to share one data object in 2 different controller, say controller1 and controller2. We Create one service dataService

 var app = angular.module("app",[]);
 app.factory('dataService',['$http', function($http){
  var dataService = {};
  dataService.method1 = function(){
    console.log("method1 executing");
  };
  dataService.method2 = function(){
    console.log("method2 executing");
  };
  return dataService;
 }]);
 

Now we can use this service in any controller by injecting

app.controller('controller1',['dataService','$scope' function(dataService,$scope){
 dataService.method1();  // it will print 'method1 executing'
 dataService.method2();  // it will print 'method2 executing'
}]);
app.controller('controller2',['dataService','$scope' function(dataService,$scope){
 dataService.method1();  // it will print 'method1 executing'
 dataService.method2();  // it will print 'method2 executing'
}]);

In same way we can create service also instead of factory, the only difference between factory and service is that, service is constructor function while in factory we need to return the object. For same objective we can create service as follows:

 app.service('dataService',['$http', function($http){
  this.method1 = function(){
    console.log("method1 executing");
  };
  this.method2 = function(){
    console.log("method2 executing");
  };
 }]);

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