Angular and Sinatra, templates loaded over ajax are not interpolated

So, I'm trying to set up my first angular app and the problem is that the templates retrieved over ajax are not interpolated by the Angular.I am using Ruby Sinatra framework for the simple HTTP, and here are the main parts of the code: index.html

<div ng-view></div>

main.js

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    })
})

app.controller('HomeController', function($scope) {

});

home.html

{{ 1 + 1 }}

Sinatra app.rb

#!/usr/bin/env ruby

require 'sinatra'

class HelloWorldApp < Sinatra::Base
  get '/' do
    send_file 'index.html'
  end

  get '/js/:name' do
    send_file "js/#{params[:name]}"  
  end

  get '/templates/:name' do 
    send_file "templates/#{params[:name]}"
  end
end

Now, When I load http://localhost:9292/ I get that {{ 1 + 1 }} instead of 2.What is the problem ?

Answers


angular.element(document).ready(function(){
  angular.bootstrap(document, ['myApp']);
});

Need Your Help

how to implement multi layer Div in css?

html tags division

I want to implement the picture with 4 Division

Excel - If condition with three values

excel excel-formula formulas

I would like to check three cells, and if the first two are "Yes" then put text in a specific cell, and if all three are "Yes" then different text in that specific cell.