你能为Angular应用程序建议一个基本结构吗?

时间:2015-06-23 12:01:46

标签: angularjs

我越深入Angular,我越不明白为什么如果你用控制器和link创建指令,将控制器绑定到特定的路由。

app.js

(function(){

angular.module('app', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
 $routeProvider
   .when('/', { 
         templateUrl : 'home.template.html', 
         controller : 'HomeController' 
        })
   .when('/about', { 
         templateUrl : 'about.template.html', 
         controller : 'AboutController' 
        });

}]);

})();

home.controller.js

(function(){

angular.module('app')

.controller('HomeController', ['$scope', function($scope){

}])

.directive('container', function(){
//Handle container element
  return {
   restrict : 'E',
   controller : ['$scope', function($scope){
     this.name = "My Name";
     this.setName= function(name){
       this.name = name;
     }
  }; 
   }],
   link : function(scope, element, attrs){
     //Do some linking...
   }
})
.directive('element1', function(){
//Handle element1 
   return {
    restrict : 'E',
    require : '^container',
    link : funciton(scope, element, attrs, ngContainerCtrl){
       scope.setName = ngContainerCtrl.setName();

    }



   };

})
.directive('element2', function(){
//Handle element2
);

})();

似乎链接到视图的控制器不再有兴趣 除了全局方法,变量,......仍然可以在全局容器指令中。加上全局指令中的一个,你可以在子指令中访问他的控制器。

问题是

我应该如何构建呢? 只有当用户在一个根上时,我才会失去下载控制器的能力 对于所有指令,我必须在index.html文件中将它们全部链接起来,即使不需要,所有内容都会加载。

1 个答案:

答案 0 :(得分:2)

指令和控制器之间存在重大差异。视图的控制器处理该视图的业务逻辑。您可能需要从服务器获取一些数据并在特定对象/数组中对其进行格式化。所有这些东西都在控制器中。你不要在控制器中进行任何dom操作。这被认为是不好的做法。

指令主要用于DOM操作,但也很少有其他用途。指令的示例可以是您的自定义Tabs指令或您的可滚动列表或您的拖放控件或您可用于输入框的花哨用户名。这些都是您创建可重用且复杂的dom对象或调整现有dom对象以增强其功能的示例。