zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    Visual Studio 2010 SP1 中文升级补丁ISO完整版下载 (含多国语言)
    通过修改Host实现chrome同步
    附加数据库出现 无法打开物理文件 操作系统错误 5:拒绝访问 SQL
    配置Oracle遇到问题<一>
    GDI+中发生一般性错误的解决办法(转载)
    当VS和Flash builder同时运行时
    抛弃jQuery 深入原生的JavaScript
    Android SDK下载和更新慢或失败的解决办法
    Android 学习笔记 文本文件的读写操作
    Android Camera相机功能实现 拍照并保存图片
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4121355.html
Copyright © 2011-2022 走看看