在AngulaJs上创建搜索:Uncaught Error: [$injector:modulerr]
Creating a Search on AngulaJs: Uncaught Error: [$injector:modulerr]
我正在尝试创建一个基于我在codependency上找到的代码片段的AngularJs搜索,这是URL http://codepen.io/netsi1964/pen/AmGcg
这是我尝试的一个片段
<div ng-app="myApp" ng-controller="Example">
<div class="container controls">
<div class="row">
<div class="col-md-12">
<form action="" method="POST" role="form">
<legend>Find a movie from <a href="http://yousee.tv/film">YouBio</a></legend>
<div class="input-group">
<input type="search" id="search" class="form-control" ng-model="search">
<div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div>
<div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div>
<div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div>
</div>
</form>
</div>
</div>
</div>
这是JS文件:
angular.module("myApp",["ngSanitize"])
.filter('replace', function () {
var pat = / /gi;
return function (text) {
var clean = text.replace(pat, "-");
var temp = clean.split("---");
if (temp.length>1) {
clean = temp[0];
}
return clean;
};
})
.controller("Example", function($scope, $interval) {
$scope.search = "orig";
$scope.movies = youMovie;
$scope.reverse = false;
$scope.list = false;
});
,我得到以下的错误未捕获的错误:[$injector:modulerr]在我的Chrome控制台
这是我做的一个弹子http://plnkr.co/edit/00ghGQtBKkvEKkzlD52c?p=preview
我做了一些修改,代码现在可以工作了。
html标记,顺便说一下有很多错误。
<html>
<head>
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css" rel="stylesheet">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/js/ionic.bundle.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-sanitize.min.js"></script>
<script src="app.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-md-12">AngularJS <code>ng-repeat</code> with search</h1>
<blockquote>AngularJS lets you easily do a <em>instant search</em> if you say save your data as <code>JSON</code>. The elegant way that it is coded and the performance I find great. The <code>JSON</code> data I use, I have collected from Danish streaming TV service <a href="http://yousee.tv/film">YouBio</a>. I use <code>bootstrap 3</code> to control the markup/layout. <br />
<code>2014/11/14</code> Added link to watch the movie on YouSee Play (not free).</blockquote>
</div>
</div>
<div ng-app="myApp" ng-controller="Example">
<div class="container controls">
<div class="row">
<div class="col-md-12">
<form action="" method="POST" role="form">
<legend>Find a movie from <a href="http://yousee.tv/film">YouBio</a></legend>
<div class="input-group">
<input type="search" id="search" class="form-control" ng-model="search">
<div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div>
<div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div>
<div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div>
</div>
</form>
</div>
</div>
</div>
<div class="container result">
<div ng-class="list ? 'col-md-6' : 'col-md-4'" class="movie" ng-repeat="movie in movies | filter:search | orderBy:'title':reverse"> <a href="https://film.youseeplay.dk/search/{{movie.title}}" target="_blank">
<img ng-class="list ? 'col-md-2' : 'col-md-12'" ng-src="{{movie.src}}" alt="Click to play {{movie.title}} on YouSee Play (not free)" title="Click to play {{movie.title}} on YouSee Play (not free)" class="img-thumbnail" /></a>
<h4 ng-class="list ? 'col-md-10' : 'col-md-12'">{{movie.title}}</h4>
</div>
</div>
</div>
<body>
</html>
控制器,你也没有和数据显示在视图中,所以我添加了一些虚拟数据:
angular.module("myApp",["ngSanitize"])
.filter('replace', function () {
var pat = / /gi;
return function (text) {
var clean = text.replace(pat, "-");
var temp = clean.split("---");
if (temp.length>1) {
clean = temp[0];
}
return clean;
};
})
.controller('Example', ['$scope',
function($scope) {
$scope.$watch('search', function(newVal, oldVal) {
$scope.search = newVal;
$scope.movies = [{title: 'Movie 1'}, {title: 'Movie 2'}, {title: 'Movie 3'}, {title: 'Moive 4'}, {title: 'Movie 5'}];
$scope.reverse = false;
$scope.list = false;
});
}
]);
//document.querySelector('#search').focus();
您正在注入一个未加载到页面上的模块。ngSantize模块是独立于angular.min.js源代码的。您需要在页面上加载angular-sanitize.min.js
您没有加载sanize文件:
index . html
<html>
<head>
<title></title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
//** This file add***
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-sanitize.js"></script>
<script src="app.js"></script>
<link href="style.css" rel="stylesheet">
<body>
相关文章:
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- 错误:$injector:modulerr加载图像时模块处于角度
- ng路由injectore:modulerr中出错[$injector:modulerr]http://errors.a
- 未捕获的错误: [$injector:modulerr] http ..(使用纯 HTML)
- 未捕获的错误:使用 ng-repeat 时出现 [$injector:modulerr]
- 未捕获的错误: [$injector:modulerr] - 角度 ng-include
- Error $injector:modulerr AngularJs
- Angularjs未捕获错误:迁移到V1.3时出现[$injector:modulerr]
- $injector:modulerr将自定义模块注入Angular应用程序
- 未捕获错误:[$injector:modulerr](新手)
- AngularJS错误:$injector:modulerr我的浏览器窗口中出现模块错误
- 获取未捕获错误:anuglar.js中的[$injector:modulerr]
- Angular应用程序无法安装,原因是出现错误:[$injector:modulerr]
- AngularJS - $injector:modulerr 模块错误在 angular.js:36.
- 未捕获的错误: [$injector:modulerr] 无法实例化模块 toastr
- Angularjs Error: [$injector:modulerr] 'ngRoute'
- 角度 JavaScript 缩小导致错误:$injector:modulerr 模块错误
- Injector:modulerr in the config (newbie)
- Angular js 未捕获错误:[$injector:modulerr] 匿名函数
- AngularJS : 未捕获错误: [$injector:modulerr] 使用 angularJS 的更新版本时