我正在关注Youtube中的一个教程...我相信我做的一切都是正确的,但它拒绝工作......在视频@ youtube上它的作用就像一个魅力,但我不能让它在本地工作。任何线索?屏幕上没有错误甚至结果。这只是一个空白页面。
在我的controller.js ...
var demoApp = angular.module('demoApp',[]);
//Routes
demoApp.config(function ($routeProvider){
$routeProvider
.when('/view1',
{
controller : 'SimpleController',
templateUrl : 'view1.html'
})
.otherWise('/',
{
redirectTo : '/view1'
});
});
//Controllers
demoApp.controller('SimpleController' , function ($scope) {
$scope.familyArray = [
{ name : 'Me ', city : 'London'},
{name : 'Wife', city : 'St. Matheus'},
{name : 'Son', city : 'Ipswich'}
];
});
在我的index.html中。我已经...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="demoApp">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>My Title</title>
</head>
<body>
<div>
<div data-ng-view="">
</div>
</div>
<script src="./css_and_js/angular.min.js"></script>
<script src="./css_and_js/controller.js"></script>
</body>
..最后,这是我的view1.html ...
<div class="container">
Name:<br>
<input type="text" data-ng-model=filter."nameInput"><br><br>
Hello, {{name}}
<ul>
<li data-ng-repeat="data in familyArray | filter : filter.nameInput | orderBy: 'city'">{{data.name}} - {{data.city | lowercase}}</li>
</ul>
Add Name : <br>
<input type="text" data-ng-model="new.name">
<br>
</ul>
Add City : <br>
<input type="text" data-ng-model="new.city">
<br>
<a href="#/view2">View 2</a>
另外,我不知道如何调试它...在我的Chrome控制台上,它只显示:未捕获的对象 在angular.min.js:6
更新 ...收到一些改变我的代码的建议后...实际上我面临的是空白页面结果,控制台上没有错误消息。让我更新代码:
controller.js:
var demoApp = angular.module('demoApp',['ngRoute']);
//Routes
demoApp.config(function ($routeProvider){
$routeProvider
.when('/view1',
{
controller : 'SimpleController',
templateUrl : 'view1.html'
})
.otherwise('/',
{
redirectTo : '/view1'
});
});
//Controllers
demoApp.controller('SimpleController' , function ($scope) {
$scope.familyArray = [
{ name : 'Marco Jr', city : 'London'},
{name : 'Rosana Valkovics', city : 'São Matheus'},
{name : 'Fernando Valkovics', city : 'Ipswich'}
];
});
我的view1.html:
`<div class="container">
Name:<br>
<input type="text" data-ng-model="filter.nameInput"><br><br>
Hello, {{name}}
<ul>
<li data-ng-repeat="data in familyArray | filter : filter.nameInput | orderBy: 'city'">{{data.name}} - {{data.city | lowercase}}</li>
</ul>
Add Name : <br>
<input type="text" data-ng-model="new.name">
<br>
</ul>
Add City : <br>
<input type="text" data-ng-model="new.city">
<br>
<a href="#/view2">View 2</a>
</div>`
我的index.html:没有变化。
实际上没有例外,但我仍然面对空白页:(
答案 0 :(得分:1)
Angular适用于HTML5。你有错误的doctype。你需要:
<!doctype html>
另外,从您的html标记中取出xmlns="http://www.w3.org/1999/xhtml"
。
关于调试,你绝不应该使用缩小版本的任何东西进行调试。
答案 1 :(得分:0)
我认为问题出在你的view1.html第3行。引号在data-ng-model上的位置错误,因为它们应该包含所有&#34; filter.nameInput&#34;。< / p>
答案 2 :(得分:0)
如果您的视频已旧,并且您使用的是新版本的Angular.js,则可能没有$routeProvider
。在某些时候,角度团队将$routeProvider
从核心angular.js
文件中删除,并将其放入一个名为ngRoute
的单独模块中。
您需要更改模块定义,如下所示:
var demoApp = angular.module('demoApp',[ngRoute]);
您需要包含angular-route.js
脚本代码。
<script src="./css_and_js/angular-route.js">
以下是ngRoute
的其他信息答案 3 :(得分:0)
您的代码有几个错误和错误的假设。
新版本的angular要求将ngRoute声明为依赖项。
依赖关系:
您必须将其添加到index.html 例如:
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.js"></script>
并在模块中声明依赖项:
var demoApp = angular.module('demoApp',['ngRoute']);
由于语法错误
,它仍然无效.otherWise('/',
应该是
.otherwise('/',
{
redirectTo : '/view1'
});
你可以看到它here