Question

刚开始学习angular-js。所以尝试了一些旧例子。

有一个后端api给了我一个json列表。我正在尝试消费并展示一些东西。

获得版本1.0.8中的示例，它运行正常。但是当我尝试使用版本1.6.5时，它根本不起作用。改变了什么？我怎样才能做到这一点？

文件

＆＃13;

function Books($scope, $http) {
	$http.get('http://localhost:8080/book-manager/bookslist.json').success(function(data) {
		$scope.books = data;
	});
}

＆＃13;

<!DOCTYPE html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Angular</title>
<!-- 1.0.8 Working -->
<script src="angularjs/1.0.8/angular.min.js"></script>
<!-- 1.6.5 Not Working, Why? -->
<!-- <script src="angularjs/1.6.5/angular.min.js"></script> -->
<script src="count.js"></script>
</head>
<body>
	<div ng-controller="Books">
		I have {{books.length}} books!
		<ul class="books-container">
			<li ng-repeat="book in books">{{book.name}}</li>
		</ul>
	</div>
</body>
</html>

＆＃13;

Answer 1

成功已被弃用。你应该改用它。

function Books($scope, $http) {
    $http.get('http://localhost:8080/book-manager/bookslist.json').then(function(data) {
        $scope.books = data;
    });
}

你也可能在1.6.5中得到一个完整的响应对象，所以，如果上述内容仍然失败，请尝试这个：

function Books($scope, $http) {
    $http.get('http://localhost:8080/book-manager/bookslist.json').then(function(response) {
        $scope.books = response.data;
    });
}

Answer 2

介于1.0和1.6之间的版本是一个非常大的差距并且有大量的变化，你需要首先定位的遗留版本是1.2x然后你需要迁移到1.3然后1.4到1.5，你真的需要在这里查看更改日志：

https://github.com/angular/angular.js/blob/master/CHANGELOG.md

因此，至少可以看到突破性的变化。

在1.5及更高版本中，它使用promises，因此你必须使用类似的东西：

$http.get(URL).then(function(data) {
        //handle success 
    }, function (error) {
        //handle error
    });

无论如何，它不会停止这个问题，你真的需要检查所有的变化。

如果你有一个小项目值得学习新东西，我更喜欢研究Angular（而不是AngularJS）。

修改：如果你真的对AngularJs很新，我会说它不值得学习它，它会活到短期/中期，去Angular（版本4+）。

Answer 3

一个很大的变化就是你如何在角度应用中声明一个控制器。您需要拥有主ng-app模块，并为其添加一个控制器（您仍然可以使用您拥有的图书功能）。

<强> count.js

angular.module('mainAppExample', []).controller('Books', Books);
function Books(){}

请记住还要添加ng-app指令，它是您的根模块（可以添加多个控制器，过滤器和其他指令）。这通常会放在根元素标记中，例如<html>或<body>：

<强> books.html

<body ng-app="mainAppExample">
    <div ng-controller="Books">
        I have {{books.length}} books!
        <ul class="books-container">
            <li ng-repeat="book in books">{{book.name}}</li>
        </ul>
    </div>
</body>

Angular 1.0.8代码在1.6.5中不起作用？

3 个答案: