[AngularJS] Best Practise - Module

Module definitions



Angular modules can be declared in various ways, either stored in a variable or using the getter syntax. Use the getter syntax at all times (angular recommended).

Bad:

var app = angular.module(‘app‘, []);
app.controller();
app.factory();

Good:

angular
  .module(‘app‘, [])
  .controller()
  .factory();

From these modules we can pass in function references.

Module method functions



Angular modules have a lot of methods, such as controllerfactorydirectiveservice and more. There are many syntaxes for these modules when it comes to dependency injection and formatting your code. Use a named function definition and pass it into the relevant module method, this aids in stack traces as functions aren‘t anonymous (this could be solved by naming the anonymous function but this method is far cleaner).

Bad:

var app = angular.module(‘app‘, []);
app.controller(‘MyCtrl‘, function () {

});

Good:

function MainCtrl () {

}
angular
  .module(‘app‘, [])
  .controller(‘MainCtrl‘, MainCtrl);

Define a module once using angular.module(‘app‘, []) setter, then use the angular.module(‘app‘)getter elsewhere (such as other files).

To avoid polluting the global namespace, wrap all your functions during compilation/concatenation inside an IIFE which will produce something like this:

Best:

(function () {
  angular.module(‘app‘, []);

  // MainCtrl.js
  function MainCtrl () {

  }

  angular
    .module(‘app‘)
    .controller(‘MainCtrl‘, MainCtrl);

  // AnotherCtrl.js
  function AnotherCtrl () {

  }

  angular
    .module(‘app‘)
    .controller(‘AnotherCtrl‘, AnotherCtrl);

  // and so on...

})();
时间: 2024-08-29 14:36:04

[AngularJS] Best Practise - Module的相关文章

淡淡理解下AngularJS中的module

在AngularJS中module是一个核心的存在,包括了很多方面,比如controller, config, service, factory, directive, constant, 等等. 在Javascript中如何实现类似module的功能呢? 或者说,我们定义一个函数,如何把函数内的函数向外界开放呢? 我想,可以把函数中的函数作为一个对象的键值,从而向外界开放. 这样说很笼统,其实是这样的: var myModule = function outerFuction(){ var m

AngularJS - 插件,module注入

Index.html <body> <div ng-app="myApp"> <div ng-controller="firstController"> {{name}} </div> <div ng-controller="secondController"> {{name}} </div> <div ng-controller="thirdControll

[AngularJS] Best Practise - Minification and annotation

Annotation Order: It's considered good practice to dependency inject Angular's providers in before our own custom ones. Bad: // randomly ordered dependencies function SomeCtrl (MyService, $scope, AnotherService, $rootScope) { } Good: // ordered Angul

AngularJS中的模块(module)

AngularJS中的module 大部分应用都有一个主方法(main)来实例化.组织.启动应用.AngularJS中没有主方法,而是使用模块来声明应用该如何启动.模块允许通过声明的方式来描述应用中的依赖关系,以及如何组装和启动. 一个模块可以引入另一个模块.在一个模块中定义多个服务,当引入这个模块时,就可以使用这个模块中的一个或者多个服务. AngularJS本身的一个默认模块叫ng,ng模块提供了$scope,$http等服务.服务只是模块提供的多种机制中的一种,其它的还有指令(direct

AngularJS Module类的方法

AngularJS Module类的方法 AngularJS中的Module类负责定义应用如何启动,它还可以通过声明的方式定义应用中的各个片段.我们来看看它是如何实现这些功能的. 一.Main方法在哪里 如果你是从Java或者Python编程语言转过来的,那么你可能很想知道AngularJS里面的main方法在哪里?这个把所有东西启动起来,并且第一个被执行的方法在哪里?JavaScript代码里面负责实例化并且把所有东西组合到一起,然后命令应用开始运行的那个方法在哪里? 事实上,AngularJ

AngularJs学习

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body ng-app="m

JQuery、AngularJs动态加载其他页面

1.JQuery的load函数 <script> $(function(){ $("#d1").load("page.html");//需要加载的页面 $.ajax({ type:"get", url:"http://localhost:3000/showAll", dataType:"jsonp", jsonpCallback:"cb", success:function(

AngularJs学习总结-基本特性

现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下.angularjs学习小白一枚,欢迎大神指正. AngularJs是什么? 简单来说,即javascript的一个框架,通过script标签添加到网页中.即我们使用an

[angularjs] angularjs系列笔记(一)简介

Angularjs通过新的属性和表达式扩展了html Andularjs 可以构建一个单一页面的应用程序(SPAS SinglePageApplications) Angularjs通过指令扩展了html,通过表达式绑定数据到html ng-app指令定义Angularjs的应用程序 ng-model指令绑定元素值到应用程序 ng-bind指令把应用程序数据绑定到html视图 <div ng-app=""> <input type="text" n