github上angularJS引导教程给错误

https://angular-ui.github.io/bootstrap/github上angularJS引导教程给错误

以上是链接，最好的教程和代码，我已经找到了angularJS引导相结合的元素。

为html和angularJS提供的代码为：datepicker，timepicker，typeheads，accordion，很多more ...最好的网站来引用。

现在我唯一的问题是，当我从那里直接复制粘贴angularJS和html代码的页面尝试手风琴，它似乎并没有工作。我尝试了打字机和手风琴。

我需要在本地下载，保存和链接某个文件吗？我似乎不明白！任何尝试过以上的人都可以告诉我？

typehead.html：

   <head> 

     <title>Angular Accordion</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="style.css" /> 
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script> 
     <script src="typehead.js"></script> 





    </head> 

    <body ng-app="ui.bootstrap.demo"> 
     <script type="text/ng-template" id="customTemplate.html"> 
     <a> 
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16"> 
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span> 
     </a> 
     </script> 

     <script type="text/ng-template" id="customPopupTemplate.html"> 
     <div class="custom-popup-wrapper" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" ng-show="isOpen() && !moveInProgress" aria-hidden="{{!isOpen()}}"> 
      <p class="message">select location from drop down.</p> 

      <ul class="dropdown-menu" role="listbox"> 
      <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 uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div> 
      </li> 
      </ul> 
     </div> 
     </script> 


     <div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl"> 

     <h4>Static arrays</h4> 
     <pre>Model: {{selected | json}}</pre> 
     <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control"> 

     <h4>Asynchronous results</h4> 
     <pre>Model: {{asyncSelected | json}}</pre> 
     <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control"> 
     <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i> 
     <div ng-show="noResults"> 
      <i class="glyphicon glyphicon-remove"></i> No Results Found 
     </div> 

     <h4>ngModelOptions support</h4> 
     <pre>Model: {{ngModelOptionsSelected | json}}</pre> 
     <input type="text" ng-model="ngModelOptionsSelected" ng-model-options="modelOptions" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control"> 

     <h4>Custom templates for results</h4> 
     <pre>Model: {{customSelected | json}}</pre> 
     <input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true" 
     typeahead-min-length="0"> 

     <h4>Custom popup templates for typeahead's dropdown</h4> 
     <pre>Model: {{customPopupSelected | json}}</pre> 
     <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control"> 
     </div> 
    </body>

typehead.js：以上

    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 

    angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) { 

     var _selected; 


     $scope.selected = undefined; 
     $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; 
     // Any function returning a promise object can be used to load values asynchronously 
     $scope.getLocation = function(val) { 
     return $http.get('//maps.googleapis.com/maps/api/geocode/json', { 
      params: { 
      address: val, 
      sensor: false 
      } 
     }).then(function(response) { 
      return response.data.results.map(function(item) { 
      return item.formatted_address; 
      }); 
     }); 
     }; 

     $scope.ngModelOptionsSelected = function(value) { 
     if (arguments.length) { 
      _selected = value; 
     } else { 
      return _selected; 
     } 
     }; 

     $scope.modelOptions = { 
     debounce: { 
      default: 500, 
      blur: 250 
     }, 
     getterSetter: true 
     }; 

     $scope.statesWithFlags = [{ 
     'name': 'Alabama', 
     'flag': '5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png' 
     }, { 
     'name': 'Alaska', 
     'flag': 'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png' 
     }, { 
     'name': 'Arizona', 
     'flag': '9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png' 
     }, { 
     'name': 'Arkansas', 
     'flag': '9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png' 
     }, { 
     'name': 'California', 
     'flag': '0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png' 
     }, { 
     'name': 'Colorado', 
     'flag': '4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png' 
     }, { 
     'name': 'Connecticut', 
     'flag': '9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png' 
     }, { 
     'name': 'Delaware', 
     'flag': 'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png' 
     }, { 
     'name': 'Florida', 
     'flag': 'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png' 
     }, { 
     'name': 'Georgia', 
     'flag': '5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png' 
     }, { 
     'name': 'Hawaii', 
     'flag': 'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png' 
     }, { 
     'name': 'Idaho', 
     'flag': 'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png' 
     }, { 
     'name': 'Illinois', 
     'flag': '0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png' 
     }, { 
     'name': 'Indiana', 
     'flag': 'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png' 
     }, { 
     'name': 'Iowa', 
     'flag': 'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png' 
     }, { 
     'name': 'Kansas', 
     'flag': 'd/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png' 
     }, { 
     'name': 'Kentucky', 
     'flag': '8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png' 
     }, { 
     'name': 'Louisiana', 
     'flag': 'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png' 
     }, { 
     'name': 'Maine', 
     'flag': '3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png' 
     }, { 
     'name': 'Maryland', 
     'flag': 'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png' 
     }, { 
     'name': 'Massachusetts', 
     'flag': 'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png' 
     }, { 
     'name': 'Michigan', 
     'flag': 'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png' 
     }, { 
     'name': 'Minnesota', 
     'flag': 'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png' 
     }, { 
     'name': 'Mississippi', 
     'flag': '4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png' 
     }, { 
     'name': 'Missouri', 
     'flag': '5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png' 
     }, { 
     'name': 'Montana', 
     'flag': 'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png' 
     }, { 
     'name': 'Nebraska', 
     'flag': '4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png' 
     }, { 
     'name': 'Nevada', 
     'flag': 'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png' 
     }, { 
     'name': 'New Hampshire', 
     'flag': '2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png' 
     }, { 
     'name': 'New Jersey', 
     'flag': '9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png' 
     }, { 
     'name': 'New Mexico', 
     'flag': 'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png' 
     }, { 
     'name': 'New York', 
     'flag': '1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png' 
     }, { 
     'name': 'North Carolina', 
     'flag': 'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png' 
     }, { 
     'name': 'North Dakota', 
     'flag': 'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png' 
     }, { 
     'name': 'Ohio', 
     'flag': '4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png' 
     }, { 
     'name': 'Oklahoma', 
     'flag': '6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png' 
     }, { 
     'name': 'Oregon', 
     'flag': 'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png' 
     }, { 
     'name': 'Pennsylvania', 
     'flag': 'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png' 
     }, { 
     'name': 'Rhode Island', 
     'flag': 'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png' 
     }, { 
     'name': 'South Carolina', 
     'flag': '6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png' 
     }, { 
     'name': 'South Dakota', 
     'flag': '1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png' 
     }, { 
     'name': 'Tennessee', 
     'flag': '9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png' 
     }, { 
     'name': 'Texas', 
     'flag': 'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png' 
     }, { 
     'name': 'Utah', 
     'flag': 'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png' 
     }, { 
     'name': 'Vermont', 
     'flag': '4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png' 
     }, { 
     'name': 'Virginia', 
     'flag': '4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png' 
     }, { 
     'name': 'Washington', 
     'flag': '5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png' 
     }, { 
     'name': 'West Virginia', 
     'flag': '2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png' 
     }, { 
     'name': 'Wisconsin', 
     'flag': '2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png' 
     }, { 
     'name': 'Wyoming', 
     'flag': 'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png' 
     }]; 
    });

是确切的代码我复制从文档中粘贴，但未能取得结果！

其次是由控制台显示的错误：

 Uncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to: 
     Error: [$injector:nomod] Module 'ui.bootstrap.demo' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 
     http://errors.angularjs.org/1.5.0/$injector/nomod?p0=ui.bootstrap.demo 
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:68:12 
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:2015:17 
      at ensure (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:1939:38) 
      at module (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:2013:14) 
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:4503:22 
      at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:321:20) 
      at loadModules (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:4487:5) 
      at createInjector (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:4409:19) 
      at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:1691:20) 
      at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:1712:12) 
     http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=ui.bootstrap.demo&p….googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.js%3A1712%3A12)

来源

2016-03-01 Clyde Dias

你应该把所有这些代码在Plunker和。这是一个龙邮 – Prasad

检查您是否已经包括了所有必要的文件和它们都存在于指定位置 – Shri

刚把''ui.bootstrap.demo''改成''ui.bootstrap'' –

你可以这样做

在HTML文件中添加像这样：

<html lang="en" ng-app="myApp"></html> 

OR 

<body ng-app="myApp"></body>

但添加在HTML标签将被认为是最佳实践，而不是身体标记，除非你没有比模块更

在控制器文件中添加以下代码

var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 

myApp.controller('TypeaheadCtrl', function($scope, $http) { 
//your code 
});

来源

2016-03-01 04:53:29

不！还是行不通！我将从头开始！ –

它应该是这样的：

用户的响应 '桑卡Gurav' 添加正确的链接后

Uncaught SyntaxError: Unexpected token <   (index):1

控制台错误2

var demo = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 

demo.controller('TypeaheadCtrl', function($scope, $http) { 
//your code 
});

来源

2016-03-01 04:35:08 Rarepuppers

你正在注射器错误..所以首先检查你的文件是否在你的目录，第二检查你的链接，即使你得到相同的错误，然后检查你的拼写错误（有时这些错误只是因为一些愚蠢的错误发生）。

确保你的目录中有你的“ui-bootstrap-tpls-1.2.1.js”（或缩小文件）文件。

来源

2016-03-01 06:27:13

只是改变'ui.bootstrap.demo'到'ui.bootstrap'

来源

2016-03-21 04:39:44

github上angularJS引导教程给错误

回答

相关问题