github angularJS引导教程给出错误
以上是我为angularJS引导组合元素找到的最佳教程和代码的链接 html和angularJS的代码是为：日期选择器，时间选择器，字体，手风琴，更多…最好的网站参考 现在我唯一的问题是，当我从那个页面直接复制粘贴angularJS和html代码的地方尝试accordion时，它似乎不起作用。我试过打字机和手风琴 我是否需要在本地下载、保存和链接某个文件？ 我好像不明白！任何尝试过以上方法的人都可以告诉我吗 typehead.html：github angularJS引导教程给出错误,angularjs,Angularjs,以上是我为angularJS引导组合元素找到的最佳教程和代码的链接 html和angularJS的代码是为：日期选择器，时间选择器，字体，手风琴，更多…最好的网站参考 现在我唯一的问题是，当我从那个页面直接复制粘贴angularJS和html代码的地方尝试accordion时，它似乎不起作用。我试过打字机和手风琴 我是否需要在本地下载、保存和链接某个文件？ 我好像不明白！任何尝试过以上方法的人都可以告诉我吗 typehead.html： <head>
<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>
应该是这样的：
你可以这样做 在HTML文件中添加如下内容：
您将遇到喷油器错误。。所以，首先检查你的文件是否在你的目录中，第二检查你的链接，即使你遇到了同样的错误，也要检查你的拼写错误（有时这些错误只是因为一些愚蠢的错误而发生的）
确保您的目录中有“ui-bootstrap-tpls-1.2.1.js”（或缩小文件）文件。只需将
'ui.bootstrap.demo''ui.bootstrap''ui.bootstrap.demo''ui.bootstrap' 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 SyntaxError: Unexpected token < (index):1
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)
var demo = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
demo.controller('TypeaheadCtrl', function($scope, $http) {
//your code
});
<html lang="en" ng-app="myApp"></html>
OR
<body ng-app="myApp"></body>
var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
myApp.controller('TypeaheadCtrl', function($scope, $http) {
//your code
});