• [AngularJS] Best Practise


    ControllerAs

    Use thecontrollerAs syntax always as it aids in nested scoping and controller instance reference.

    Bad:

    <div ng-controller="MainCtrl">
      {{ someObject }}
    </div>

    Good:

    <div ng-controller="MainCtrl as main">
      {{ main.someObject }}
    </div>

    Use the router to couple the controller declarations with the relevant views by telling each route what controller to instantiate.

    Best:

    <!-- main.html -->
    <div>
      {{ main.someObject }}
    </div>
    <!-- main.html -->
    
    <script>
    // ...
    function config ($routeProvider) {
      $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      });
    }
    angular
      .module('app')
      .config(config);
    //...
    </script>

    This avoids using $parent to access any parent controllers from a child controller, simple hit the mainreference and you've got it. This could avoid things such as $parent.$parent calls.

    ControllerAs as this keyword:

    The controllerAs syntax uses the this keyword inside controllers instead of $scope. When usingcontrollerAs, the controller is infact bound to $scope, there is a degree of separation.

    Bad:

    function MainCtrl ($scope) {
      $scope.someObject = {};
      $scope.doSomething = function () {
      
      };
    }
    angular
      .module('app')
      .controller('MainCtrl', MainCtrl);

    Because in router, already defined controllerAs:

      $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      });

    Threrefore, no need to use $scope. 

    Good:

    function MainCtrl () {
      this.someObject = {};
      this.doSomething = function () {
      
      };
    }
    angular
      .module('app')
      .controller('MainCtrl', MainCtrl);

    Also:

    function MinCtrl(){
        var vm = this;
        vm.someObject = {};
        vm.doSomething = function(){};
    }
    
    angular
        .module('app')
        .controller('MainCtrl', MainCtrl);

    These just show examples of Objects/functions inside Controllers, however we don't want to put logic in controllers...

    Avoid Controller Logic:

    Avoid writing logic in Controllers, delegate to Factories/Services.

    Bad:

    function MinCtrl(){
        var vm = this;
        vm.someObject = {};
        vm.doSomething = function(){};
    }
    
    angular
        .module('app')
        .controller('MainCtrl', MainCtrl);

    Good:

    function MainCtrl (SomeService) {
      var vm = this;
      vm.doSomething = SomeService.doSomething;
    }
    angular
      .module('app')
      .controller('MainCtrl', MainCtrl);

    This maximises reusability, encapsulated functionality and makes testing far easier and persistent.

  • 相关阅读:
    elasticsearch restful api 关于PUT与POST
    elasticsearch关于 PUT /index/type/id
    Windows性能计数器相关基础(一)
    打了断点但VS2010断点无效
    使程序以管理员权限运行(C++)
    CListCtrl控件使用方法总结 --很详细(一)
    AdjustTokenPrivileges(进程权限)
    四种方法实现VC枚举系统当前进程
    MFC个人笔记--创建属性表,并通过文件操作,保存属性表中用户的选择 的步骤
    学习笔记--MFC在滚动条窗口如何使所图的图形不产生偏移
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4121355.html
Copyright © 2020-2023  润新知