• [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.

  • 相关阅读:
    jsp、js分页功能的简单总结
    jsp实现验证码
    JSP内置对象总结
    java集合类总结二
    工程一:记事本的实现
    学编程上这些网站就够了
    一位程序员和他的程序员老婆分手了,原因竟是…
    培训机构出来的程序员为何不受企业待见?
    在w3cschool学完html,css,javascript,jquery以后,还是不会做前端怎么办?
    我只是个写代码的(幽默一下)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4121355.html
Copyright © 2020-2023  润新知