AngularJS视图和控制器之间的耦合



我有一个AngularJS应用程序,在这个应用程序中,我开始使用使用ng-controller指令定义控制器的视图文件。

myview.html

<div ng-controller="MyController">
   <ul>
     <li class="thumb" ng-repeat="item in items">
         <span profile ng-click="getItem(item.id)"></span>
     </li>      
   </ul> 
</div>

然而,我现在使用路由,我的控制器被定义为我的routeProvider配置的一部分。

myview.html

<div>
   <ul>
     <li class="thumb" ng-repeat="item in items">
         <span profile ng-click="getItem(item.id)"></span>
     </li>      
   </ul> 
</div>

router.js

.when('/homepage', {
   templateUrl: 'templates/myview.html',
   controller: 'MyController'
})

这是有效的,但是虽然起初看起来这是帮助我从我的控制器视图解耦,有些东西感觉off,因为我仍然有引用范围成员变量在我的视图和这些绑定到我的控制器。

我错过了什么吗?我从在routeProvider中指定MyController而不是在模板中获得了什么?

在实际操作中,除了遵循了AngularJS中定义路由、视图和控制器的标准方式之外,我认为你没有得到任何好处。

如果我们考虑编程原则和MVC,你的视图现在不知道任何关于控制器,它只依赖于模型(在angular中是$scope),这在MVC架构中是很好的和完全正常的。

通过在路由中定义控制器,你可以在多个控制器中使用相同的视图(模板)(并传递不同作用域的数据)

例如:

.when('/homepage', {
   templateUrl: 'templates/myview.html',
   controller: 'MyController'
})
.when('/list', {
   templateUrl: 'templates/myview.html',
   controller: 'MyListController'
})

最新更新