Failed to load template: template/typeahead/typeahead.html in Ruby on rails app

Question

I have a running Angular-app in my ruby on rails project and now I want to implement some typeahead search using angular.js and can not find the solution how to make typeahead directive running.

Question: How to install angular typeahead directive into my project ?

With present solution described bellow I am getting this console :

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/template/typeahead/typeahead.html

• ng-app is working and related js and css files linked into html as well.

I am following this source: bootstrap-ui-angularjs

What I did already :

1. downloaded angular-ui-bootstrap.js into public\assets\javascripts directory

2. manifested asset pipeline as usually:

   //= require jquery //= require jquery_ujs //= require jquery.tokeninput //= require bootstrap //= require angular //= require angular-ui-bootstrap //= require_tree .

3.checked if js are on the page:(just scripts in question)

<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/angular.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-ui-bootstrap.js?body=1" type="text/javascript"></script>

---

my ng-app:

    <div ng-app='plunker'>

      <div class='container-fluid' ng-controller="TypeaheadCtrl">
        <pre>Model: {{result | json}}</pre>
        <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
      </div>

    </div>

<script>

    angular.module('plunker', ['ui.bootstrap']);
    function TypeaheadCtrl($scope, $http, limitToFilter) {

        //http://www.geobytes.com/free-ajax-cities-jsonp-api.htm

        $scope.cities = function(cityName) {
            return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q="+cityName).then(function(response){
                return limitToFilter(response.data, 15);
            });
        };

    }

</script>

Is there something what I am missing in connection to installing existing angular directives? e.g. from this link

Answer 1

Instead of using ui-bootstrap.js, you can use ui-bootstrap-tpls.js. This js file comes with the templates.

To use ui-bootstrap-tpls.js you have to add js file to your html:

<script src="/scripts/angular-ui/ui-bootstrap-tpls.js"></script>

AND in your module you have to add these dependencies:

angular.module('myModule', ['ui.bootstrap', 'ui.bootstrap.typeahead']);

If you do these 2 steps you won't get this message anymore:

Failed to load resource: the server responded with a status of 404 (Not Found) _http://localhost:3000/template/typeahead/typeahead.html

What happens often is that people only add the js file and forget to add the dependency to the module.