Angular的初学者。怎么了?

时间:2014-06-27 16:22:13

标签: javascript angularjs

我正在关注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:没有变化。

实际上没有例外,但我仍然面对空白页:(

4 个答案:

答案 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