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

Make sure to include the correct .js file which contains the templates.

I replaced "ui-bootstrap.min.js" with "ui-bootstrap-tpls.min.js"

This fixed it for me. Also see What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

Answer 2

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.

Answer 3

The GitHub code also contains a folder called template, inside which there is a template folder for typeahead. Have you downloaded that and added to your project at the correct location.

The error seems to be coming due to this typeahead template html file missing. In case it has been added check if location is correct.

Answer 4

You can add the templates to your web page if the ui-bootstrap-tpls.js file doesn't work or if you want to use the ui-bootstrap.js file:

<script type="text/ng-template" id="template/typeahead/typeahead-popup.html">
<ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}">
        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
</ul>
</script>

<script type="text/ng-template" id="template/typeahead/typeahead-match.html">
    <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
</script>