如何实现AngularJS MVC
我是一个初学者，热衷于学习AngularJS。问题是我已经浏览了几个youtube教程和在线内容，但在哪里我都找不到在angular中正确实现MVC架构的地方。因为控制员在偷看我的头。
我正在努力建立我作为前端开发人员的个人资料，以获得更好的机会，并通过在线资源自学任何我能做的事情。
我们将非常感谢您的帮助和指导。
回答 1
Stack Overflow用户
发布于 2019-06-09 02:21:31
既然你在你的帖子中说你对控制器部分感到困惑，我将解释它是什么。AngularJS中的控制器位于视图的下面，控制视图正在做什么。下面是取自docs:的一个小示例
<html ng-app="phonecatApp">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="PhoneListController">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>这就是视图。让我们把它分解一下！
- ，你会看到
ng-controller="PhoneListController。这将声明此视图的控制器。 - 下一步你会看到
ng-repeat="phone in phones"。可以将其看作是一个for循环。循环变量名为phone，它在名为phones的数组上迭代，该数组在控制器中声明，可在此处定义：
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
$scope.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
});这就是控制器！这是控件视图的内容。让我们也来分析一下这一点！
var phonecatApp = angular.module('phonecatApp', []);实质上是将phonecatApp模块的一个实例拉到您的文件中。把模块想象成一个容器。您可以向容器中添加控制器、服务和各种依赖项等内容。phonecatApp.controller('PhoneListController', function PhoneListController($scope)这一行向名为PhoneListController的模块添加了一个新的控制器，还记得我们在视图中使用ng-controller="PhoneListController指令的时候吗？$scope参数允许我们访问视图上的变量，就像我们讨论的phones变量一样。$scope.phones这里是我们声明我们打算在视图中使用的变量的方式。当我们在变量前面添加$scope.时，我们现在就可以在视图中访问它了。您将注意到，$scope.phones是一个对象数组。
当使用ng-repeat时，它需要一个对象数组，因为当我们使用我们所讨论的循环变量时，我们可以访问视图上的对象属性！这可以在这里看到！
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>这就是访问phones数组中的每个对象，并将该对象赋给一个名为phone的变量，然后我们就可以使用点符号输出phone对象的属性了！
总而言之，这个ng-repeat将为phones数组中的每个对象创建一个新的$scope元素，该数组是使用$scope表示法声明的！现在，这可能是非常强大的！你可以做这样的事情！
$scope.name = "Marcus"然后在视图中，我可以：
<p>{{name}}</p>然后，视图将显示控制器中的name变量！
https://stackoverflow.com/questions/56494996
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号