angular规范

最新推荐文章于 2024-06-13 08:00:00 发布
最新推荐文章于 2024-06-13 08:00:00 发布
阅读量809 收藏
点赞数
分类专栏： angualr 文章标签： angular

2016/1/17 20:09
规范1：

将每个模块定义在一个单独的独立的文件中

//不推荐
angular
    .module('app', ['ngRoute'])
    .controller('SomeController', SomeController)
    .factory('someFactory', someFactory);

function SomeController() { }

function someFactory() { }
                    **推荐1**

// app.module.js
angular
    .module('app', ['ngRoute']);
// some.controller.js
angular
    .module('app')
    .controller('SomeController', SomeController);

function SomeController() { }
// someFactory.js
angular
    .module('app')
    .factory('someFactory', someFactory);

function someFactory() { }

在推荐1中有一个问题，那就是function暴露在window下，像这样

/* 不推荐*/
// logger.js
angular
    .module('app')
    .factory('logger', logger);

// logger function is added as a global variable
function logger() { }

// storage.js
angular
    .module('app')
    .factory('storage', storage);

// storage function is added as a global variable
function storage() { }

所以为了解决这个弊端，就应该将文件定义在一个立即执行的函数中

/**
* 推荐
*
* 将不会存在全局变量
*/

// logger.js
(function() {
    'use strict';

    angular
        .module('app')
        .factory('logger', logger);

    function logger() { }
})();

// storage.js
(function() {
    'use strict';

    angular
        .module('app')
        .factory('storage', storage);

    function storage() { }
})();

规范2

不使用变量进行模块的定义

/* 不推荐 */
var app = angular.module('app', [
    'ngAnimate',
    'ngRoute',
    'app.shared',
    'app.dashboard'
]);
/* 推荐（使用简单的语法）*/
angular
    .module('app', [
        'ngAnimate',
        'ngRoute',
        'app.shared',
        'app.dashboard'
    ]);

规则：3

使用命名函数代替回调函数

//避免
angular
    .module('app')
    .controller('DashboardController', function() { })
    .factory('logger', function() { });
//推荐
// dashboard.js
angular
    .module('app')
    .controller('DashboardController', DashboardController);

function DashboardController() { }
// logger.js
angular
    .module('app')
    .factory('logger', logger);

function logger() { }

规范4
使用 controllerAs 语法、

<!-- 避免 -->
<div ng-controller="CustomerController">
    {{ name }}
</div>
<!-- 推荐-->
<div ng-controller="CustomerController as customer">
    {{ customer.name }}
</div>

当使用controllerAs的时候定义一个变量代替视图模型$scope

/* avoid */
    function courseController (){
    this.name = 'course';
    this.customers = [
        {name: 'Haley'}, {name: 'Ella'}, {name: 'Landon'}, {name: 'John'}
        ];
    }

    angular.module('app')
    .controller('courseController', courseController)
/* 推荐*/
function courseController (){
    var vm = this;
    vm.name = 'course';
    vm.customers = [
        {name: 'Haley'}, {name: 'Ella'}, {name: 'Landon'}, {name: 'John'}
        ];
    }

angular.module('app')
    .controller('courseController', courseController)
/* 避免*/
function SessionsController() {
    var vm = this;

    vm.gotoSession = function() {
      /* ... */
    };
    vm.refresh = function() {
      /* ... */
    };
    vm.search = function() {
      /* ... */
    };
    vm.sessions = [];
    vm.title = 'Sessions';
}
/* 推荐*/
function SessionsController() {
    var vm = this;

    vm.gotoSession = gotoSession;
    vm.refresh = refresh;
    vm.search = search;
    vm.sessions = [];
    vm.title = 'Sessions';

    

    function gotoSession() {
      /* */
    }

    function refresh() {
      /* */
    }

    function search() {
      /* */
    }
}

规范5

声明函数隐藏实现细节

/**
* avoid
* Using function expressions.
*/
function AvengersController(avengersService, logger) {
    var vm = this;
    vm.avengers = [];
    vm.title = 'Avengers';

    var activate = function() {
        return getAvengers().then(function() {
            logger.info('Activated Avengers View');
        });
    }

    var getAvengers = function() {
        return avengersService.getAvengers().then(function(data) {
            vm.avengers = data;
            return vm.avengers;
        });
    }

    vm.getAvengers = getAvengers;

    activate();
}
/*
* recommend
* Using function declarations
* and bindable members up top.
*/
function AvengersController(avengersService, logger) {
    var vm = this;
    vm.avengers = [];
    vm.getAvengers = getAvengers;
    vm.title = 'Avengers';

    activate();

    function activate() {
        return getAvengers().then(function() {
            logger.info('Activated Avengers View');
        });
    }

    function getAvengers() {
        return avengersService.getAvengers().then(function(data) {
            vm.avengers = data;
            return vm.avengers;
        });
    }
}

延迟逻辑。保持控制器苗条

/* avoid */
function OrderController($http, $q, config, userInfo) {
    var vm = this;
    vm.checkCredit = checkCredit;
    vm.isCreditOk;
    vm.total = 0;

    function checkCredit() {
        var settings = {};
        // Get the credit service base URL from config
        // Set credit service required headers
        // Prepare URL query string or data object with request data
        // Add user-identifying info so service gets the right credit limit for this user.
        // Use JSONP for this browser if it doesn't support CORS
        return $http.get(settings)
            .then(function(data) {
             // Unpack JSON data in the response object
               // to find maxRemainingAmount
               vm.isCreditOk = vm.total <= maxRemainingAmount
            })
            .catch(function(error) {
               // Interpret error
               // Cope w/ timeout? retry? try alternate service?
               // Re-reject with appropriate error for a user to see
            });
    };
}

/* recommended */
function OrderController(creditService) {
    var vm = this;
    vm.checkCredit = checkCredit;
    vm.isCreditOk;
    vm.total = 0;

    function checkCredit() {
       return creditService.isOrderTotalOk(vm.total)
          .then(function(isOk) { vm.isCreditOk = isOk; })
          .catch(showError);
    };
}

规范6

**
确保一个控制器对应一个view ，相同逻辑应该放在服务service中，尽量确保控制器的简洁；
**

规范7 每个服务都是单例，说明每个注入到控制器，指令的服务相互不影响

服务返回一个对象
服务的定义语法糖

// service
angular
    .module('app')
    .service('logger', logger);

function logger() {
  this.logError = function(msg) {
    /* */
  };
}
// factory
angular
    .module('app')
    .factory('logger', logger);

function logger() {
    return {
        logError: function(msg) {
          /* */
        }
   };
}
angular.
module('myServiceModule', []).
 controller('MyController', ['$scope','notify', function ($scope, notify) {
   $scope.callNotify = function(msg) {
     notify(msg);
   };
 }]).
factory('notify', ['$window', function(win) {
   var msgs = [];
   return function(msg) {
     msgs.push(msg);
     if (msgs.length == 3) {
       win.alert(msgs.join("\n"));
       msgs = [];
     }
   };
 }]);

规范7 暴露服务返回的对象的成员属性在最上面；隐藏函数实现的细节

angualr.module('app').
    factory('dataService',dataService)
function dataService() {
    var someValue = '';
    var service = {
        save: save,
        someValue: someValue,
        validate: validate
    };
    return service;

    /隐藏函数实现的细节///

    function save() {
        /* */
    };

    function validate() {
        /* */
    };
}

**

指令

**

定义一个指令；

用指令的名字命名文件名字
将一个指令单独放在一个文件中
在指令中操作dom
定义指令的时候：最好定义一个清晰独一无二的名字像这样
acmeSalesCustomerInfo 在html中运用的时候需要这样写
acme-sales-customer-info

/* avoid */
/* directives.js */

angular
    .module('app.widgets')

    /* order directive that is specific to the order module */
    .directive('orderCalendarRange', orderCalendarRange)

    /* sales directive that can be used anywhere across the sales app */
    .directive('salesCustomerInfo', salesCustomerInfo)

    /* spinner directive that can be used anywhere across apps */
    .directive('sharedSpinner', sharedSpinner);

function orderCalendarRange() {
    /* implementation details */
}

function salesCustomerInfo() {
    /* implementation details */
}

function sharedSpinner() {
    /* implementation details */
}
/* recommended */
/* calendar-range.directive.js */

/**
* @desc order directive that is specific to the order module at a company named Acme
* @example <div acme-order-calendar-range></div>
*/
angular
    .module('sales.order')
    .directive('acmeOrderCalendarRange', orderCalendarRange);

function orderCalendarRange() {
    /* implementation details */
}
/* recommended */
/* customer-info.directive.js */

/**
* @desc sales directive that can be used anywhere across the sales app at a company named Acme
* @example <div acme-sales-customer-info></div>
*/
angular
    .module('sales.widgets')
    .directive('acmeSalesCustomerInfo', salesCustomerInfo);

function salesCustomerInfo() {
    /* implementation details */
}
/* recommended */
/* spinner.directive.js */

/**
* @desc spinner directive that can be used anywhere across apps at a company named Acme
* @example <div acme-shared-spinner></div>
*/
angular
    .module('shared.widgets')
    .directive('acmeSharedSpinner', sharedSpinner);

function sharedSpinner() {
    /* implementation details */
}

定义指令的时候，建议restrict: ‘EA’；因为这样会有语义化，而class就没有了；向下面这样

/* recommended */
angular
    .module('app.widgets')
    .directive('myCalendarRange', myCalendarRange);

function myCalendarRange() {
    var directive = {
        link: link,
        templateUrl: '/template/is/located/here.html',
        restrict: 'EA'
    };
    return directive;

    function link(scope, element, attrs) {
      /* */
    }
}

定义路由的最佳方式

/* better */

// route-config.js
angular
    .module('app')
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/avengers', {
            templateUrl: 'avengers.html',
            controller: 'AvengersController',
            controllerAs: 'vm',
            resolve: {
                moviesPrepService: function(movieService) {
                    return movieService.getMovies();
                }
            }
        });
}

// avengers.js
angular
    .module('app')
    .controller('AvengersController', AvengersController);

AvengersController.$inject = ['moviesPrepService'];
function AvengersController(moviesPrepService) {
    var vm = this;
    vm.movies = moviesPrepService.movies;
}

定义文件名字的规范

/**
 * recommended
 */

// controllers
avengers.controller.js
avengers.controller.spec.js

// services/factories
logger.service.js
logger.service.spec.js

// constants
constants.js

// module definition
avengers.module.js

// routes
avengers.routes.js
avengers.routes.spec.js

// configuration
avengers.config.js

// directives
avenger-profile.directive.js
avenger-profile.directive.spec.js

推荐的项目目录

用于展示一个功能的文件都放在一根文件夹目录

/**
 * recommended
 */

app/
    app.module.js
    app.config.js
    components/
        calendar.directive.js
        calendar.directive.html
        user-profile.directive.js
        user-profile.directive.html
    layout/
        shell.html
        shell.controller.js
        topnav.html
        topnav.controller.js
    people/
        attendees.html
        attendees.controller.js
        people.routes.js
        speakers.html
        speakers.controller.js
        speaker-detail.html
        speaker-detail.controller.js
    services/
        data.service.js
        localstorage.service.js
        logger.service.js
        spinner.service.js
    sessions/
        sessions.html
        sessions.controller.js
        sessions.routes.js
        session-detail.html
        session-detail.controller.js

模块依赖

这里写图片描述

$

Use $document and $window instead of document and window.
Use $timeout and $interval instead of setTimeout and setInterval .
没有名字o_o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 el-checkbox label 换行_前端代码美化的艺术
weixin_39780255的博客
12-06 734
作者：叙帝利 链接：https://dwz.cn/PAtqEpf7前言原本只是想简单的聊一下代码格式化的问题，无奈本文拖沓了很久，在此期间，我又思考了很多，我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字，可能叫“代码美化”更贴切一点，但是本文的深度远没有标题那么宏大。在我看来，代码质量不仅体现在逻辑上，也要体现在形式上。尤其前端代码，在日渐复杂的单页面开发中，代码格式化不仅是为了美观，也是...
Angular规范
weixin_30929011的博客
11-14 172
只记录一些自己未曾用过，但觉得对以后的项目有帮助的规范 一 Javascript闭包 把Angular组件包装到一个立即调用函数表达式中（IIFE）。 为什么？：把变量从全局作用域中删除了，这有助于防止变量和函数声明比预期在全局作用域中有更长的生命周期，也有助于避免变量冲突。 为什么？：当你的代码为了发布而压缩了并且被合并到同一个文件中时，可能会有很多变量发生冲突，使用了IIFE（给每个...
angular编程规范
最新发布
Orzak的博客
06-13 925
直接导入并使用此模块会立即加载它，而原本的设计意图是按需加载它。使用生命周期钩子来介入到 Angular 暴露的重要事件里。这种目录让标识和隔离这些特性内容变得更轻松。
泛型方法以及泛型方法、泛型类的使用场景
岁月平添了我的愁
01-08 964
1. 泛型方法 在方法中出现了泛型的结构，泛型参数与类的泛型参数没有任何关系，换句话说，泛型方法所属的类是不是泛型类都没关系 泛型方法在调用时指明泛型参数的类型，并非在实例化类时确定， arr给E指挥的类型是integer，并且可以加static public <E> List<E> copy(E[] arr){ ArrayList<E> list=new ArrayList<>(); for (E e : arr) { l
angular代码规范_angular代码规范
weixin_29065015的博客
12-23 214
概览目录结构由于一个大型的AngularJS应用有较多组成部分，所以最好通过分层的目录结构来组织。有两个主流的组织方式：按照类型优先，业务功能其次的组织方式这种方式的目录结构看起来如下：.├──app│├──app.js│├──controllers││├──home│││├──FirstCtrl.js│││└──Secon...
Go git commit 规范指南（Angular 规范）
xmcy001122的专栏
03-09 1554
文章目录Go git commit 规范指南（Angular 规范）前言Angular规范简介有什么好处？快速知道某次 commit 的目的方便过滤可以直接从commit生成Change log其他优点Angular规范规范构成HeadertypescopesubjectBodyFooter不兼容变动关闭 IssueRevert实用工具Commitizen安装validate-commit-msg生成 Change log参考 Go git commit 规范指南（Angular 规范） 根据原文：git
Angular代码规范
weixin_34310369的博客
09-14 78
为什么80%的码农都做不了架构师？>>> ...
Angular - 语义化版本控制规范（SEMVER）- 没有 Angular 3 ，Angular 4 计划2017年3月发布
张同光 (Tongguang Zhang)：Hello everyone !
12-30 1006
Angular - 语义化版本控制规范（SEMVER）- 没有 Angular 3 ，Angular 4 计划2017年3月发布
angular代码规范.pdf
10-08
angular代码规范.pdf
Angular1.x规范
meloseven的专栏
05-07 4044
单一职责： 1) 一个原则： 每个文件只定义一个组件，且代码建议少于400行 原因： 每个文件只定义一个组件有利于单元测试； 有利于更方便的阅读，维护以及避免组内协作在源码控制上冲突 2)
angular代码规范_Angular 工具篇之规范化Git版本管理
weixin_35565522的博客
01-13 806
Angular 工具篇系列教程目录：目前很多的项目都已经使用 Git 作为版本控制工具，使用 Git 意味着我们每天都要与 Git Commit Message 打交道。Git Commit Message 看似简单，但实际却很重要。通过 Git Commit Message 我们可以快速地了解本次提交的信息，比如解决了哪个 Bug、优化了什么问题或新增了什么功能等。俗话说得好，无规矩不成方圆。因...
angular代码规范_前端知识点：git commit规范
weixin_39783360的博客
01-01 300
在日常的开发工作中，通常使用git来管理项目代码，当对代码进行修改后，可以通过git commit命令来提交代码。git 规定提交时必须要写提交信息，作为改动说明，保存在 commit 历史中，方便回溯。规范的 log 不仅有助于他人 review, 还可以有效的输出 CHANGELOG，甚至对于项目的研发质量都有很大的提升。但是在日常工作中，大多数同学对于 log 信息都是简单写写，没有很好的重...
Angular2 开发规范
huangyezi的专栏
07-23 5106
目录 把所有应用程序的源代码都放到名叫 app 的目录里。所有内容都遵循每个文件单个特性的原则。每个组件、服务和管道都在自己的文件里。所有第三方程序包都被保存到其它目录里而不在 app 目录里，我们不会修改它们，所以不希望它们弄乱我们的应用程序。使用本指南介绍的文件命名约定。 尽可能保持平面化的目录结构 当有 7 个或更多文件时才新建目录； 为每个组件新建一个目录，保存它的
eslint git提交不上_如何配置 git 提交规范
weixin_39714164的博客
11-21 717
更多内容请看 fe-tutorialgit 是现在最流行的版本控制工具，规范 commit message 能大大提高代码维护的效率。但是在日常开发中由于缺少对于 commit message 的约束，导致填写内容随意、质量参差不齐，可读性低亦难以维护。那就考虑在项目中引入 commit message 规范吧。一、选择什么规范现在比较流行的方案是约定式提交规范（Conventional Comm...
git的一些常用命令及规范(一）
学习不止境的博客
04-19 524
一、前言 本文主要是对公司技术培训中提及的一些git培训和git命令做一些记录，并不会进行全范围的笔记记录。 二、angular代码规范 我们公司提交代码遵循该规范，那么下面就来对该规范进行一定的了解： Commit message 是开发的日常操作，它可以提供更多的历史信息，方便向团队清晰准确地说明代码变更、进行代码评审，也便于后期快速定位原始需求或缺陷，还可以有效的生成 Change log，对项目的管理实际至关重要，但是实际工作中却常常被大家忽略： Commit Message 格式 目前，社区有多种
后端必备 Git 分支开发：规范指南
公众号：Java后端
10-09 1490
点击上方Java后端，选择设为星标优质文章，及时送达https://www.cnblogs.com/heroljy/p/9294127.htmlGit 是目前最流行的源代码管理工具。...
别乱提交代码了，看下大厂 Git 提交规范是怎么做的
程序员闪充宝
06-06 511
作者：Java的小本家链接：http://suo.im/5wDtL2在项目中引入commit message规范已是迫在眉睫。用什么规范？现在市面上比较流行的方案是约定式提交规范（Con...
AngularJS实际项目应用——命名规范概览
Challenge Next Challenge
01-22 3744
有一条好的软件设计原则叫CoC（Convention over Configuration），即惯例优于配置原则，详见：wiki 项目需要一个好的命名规范，这样可以大大降低学习成本以及查找成本，通过对文件名以适当的形式命名，可以非常快速的知道这个文件的类型，作用以及用来实现的功能。在本项目开发的过程中，主要参考了两个命名规范：一个是github上关于angularjs的规范，一个是google自
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值