direictives/index.js:

module.exports = function(ngModule) {

    //register all the directives here

    require('./hello')(ngModule);

};

directives/hello.js

module.exports = function(ngModule) {

  ngModule.directive('webHello', function() {

      return {

          restrict: 'E',

          scope: {},

          templateUrl: 'directives/hello.html',

          controller: function() {

              var vm = this;

              vm.greeting = "Hello Webpack!";

          },

          controllerAs: 'vm'

      }

  })

};

directives/hello.html:

<h1>

    {{vm.greeting}}

</h1>

app/index.js:

var angular = require('angular');

var ngModule = angular.module('app', []);


//require directives folder, then it will find index.js file

require('./directives')(ngModule);

console.log(ngModule);

app/index.html:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Webpack + AngularJS</title>

</head>

<body ng-app="app">

    <web-hello></web-hello>

</body>

<script src="../build/bundle.js"></script>

</html>

[AngularJS + Webpack] require directives的更多相关文章

  1. [AngularJS + Webpack] Uglifying your JavaScript

    Angular requires some careful consideration when uglifying your code because of how angular's depend ...

  2. [AngularJS + Webpack] Production Setup

    Using Angular with webpack makes the production build a breeze. Simply alter your webpack configurat ...

  3. AngularJS: Dynamically loading directives

    http://www.codelord.net/2015/05/19/angularjs-dynamically-loading-directives/ ----------------------- ...

  4. [AngularJS + Webpack] Using Webpack for angularjs

    1. Install webpack & angular: npm install webpack angular 2. Create webpack.config.js file: modu ...

  5. [AngularJS + Webpack] Requiring CSS & Preprocessors

    Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...

  6. [AngularJS + Webpack] Requiring Templates

    With Angular, most of the time you're specifying a templateUrl for your directives and states/routes ...

  7. AngularJs中的directives（指令part1）

    一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...

  8. webpack ------require,ensure

    require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...

  9. vue项目优化之按需加载组件-使用webpack require.ensure

    require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...

随机推荐

  1. 汇编中，BP,SP有何区别？分别怎么使用？

    bp寄存器,跟其它什么BX,AX一样的用法, SP是用在栈上的,配合SS使用,像SS:SP SS上放段地址,SP上放偏移地址. 寻址时,像[bp],相当于SS:[bp] 就是说它默认使用SS 像BX默 ...

  2. Delphi中一些DLL的运用（要传递Application和Screen，似乎还忘了传递提示控件）

    dll 调用部分: {****************************************************************} { } { Project: DllDebug ...

  3. 常见 jar包详解

        常见 jar包详解 jar包 用途 axis.jar SOAP引擎包 commons-discovery-0.2.jar 用来发现.查找和实现可插入式接口,提供一些一般类实例化.单件的生命周期 ...

  4. hdu4714Tree2cycle

    链接 树上的一些操作还是不是太好想 直接dfs下去 不是最优的 一个节点最多保留两个度 如果它有两个以上的子节点 那么就与父节点断开 与k-2个子节点断开 再重新连 #pragma comment(l ...

  5. URAL1029. Ministry（DP+路径）

    链接 路径麻烦啊 很多细节 倒回去搜一遍 卡了一节数据库.. #include <iostream> #include<cstdio> #include<cstring& ...

  6. bzoj1143 2718

    最小可相交路径覆盖 先预处理可到达的点然后转化为最小不相交路径覆盖 type node=record        point,next:longint;      end; ..] of node; ...

  7. C# word开发

    c# 操作Word总结 在医疗管理系统中为保存患者的体检和治疗记录,方便以后的医生或其他人查看.当把数据保存到数据库中,需要新建很多的字段,而且操作很繁琐,于是想到网页的信息创建到一个word文本中, ...

  8. uboot环境变量（设置bootargs向linux内核传递正确的参数）

    这是我uboot的环境变量设置,在该设置下可以运行initram内核(从内存下载到nandflash再运行),但是运行nfs根文件系统的时候一直出错,各种错误.查看了很多资料后猜想应该是uboot传递 ...

  9. CVirtualGridCtrl控件内的数据如何获取

    CVirtualGridCtrl控件是同花顺自己写的控件和网上的不同,难处理,可以通过 模拟输入ctrl+c,然后从clipboard提取内容.

  10. 对apache和memcache进行压力测试

    工作中经常使用的软件之二:apache和memcache 以前经常听说memcache的TPS能达到几万,但一直也不知道apache的性能到底如何,所以在闲暇之余,就自己做了一下压力测试. 环境:两台 ...