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. POJ - 2711 Leapin' Lizards

    题目大意: 在一个网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平面距离不超过d的任何一 ...

  2. 8. Unity异常警告错误处理方法

    一. The AnimationClip 'cube1_anim' used by the Animation component 'Cube1' must be marked as Legacy. ...

  3. Android EditText的常用技巧

    1.       设定 EditText 的滚动条.对齐方式.行数.和提示 (hint) 及其颜色 在布局文件,比如 main.xml 中,增加 < EditText android:id =  ...

  4. Android MediaStore与Media.EXTERNAL_CONTENT_URI

    MediaStore这个类是Android系统提供的一个多媒体数据库,android中多媒体信息都可以从这里提取.这个MediaStore包括了多媒体数据库的所有信息,包括音频,视频和图像,andro ...

  5. CodeForces 1

     A- Theatre Square Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u ...

  6. 获得设备型号(含iPhone6 , iPhone 6+)

    //获得设备型号 + (NSString *)getCurrentDeviceModel:(UIViewController *)controller { int mib[2]; size_t len ...

  7. 【转】IOS 怎么获取外设的广播数据AdvData

    原文网址:http://www.deyisupport.com/question_answer/wireless_connectivity/bluetooth/f/103/t/73443.aspx N ...

  8. 使用console进行性能测试和计算代码运行时间

    对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用debugger会显得过于笨重,最常用的方法是会将值输出到控制台上方便调试.最常用的语句就是console.log(expre ...

  9. FZU2234 牧场物语 DP

    题意:先去再回,不能吃重复的,获取最大值 分析:等价于两个人同时去,不能吃重复的 定义dp[i][j][k]表示从起点走k步,第一个人的横坐标是i,第二个人的横坐标是j的最最大值 这个题和bc上一个回 ...

  10. ACM位运算技巧

    ACM位运算技巧 位运算应用口位运算应用口诀位运算应用口诀 清零取反要用与,某位置一可用或 若要取反和交换,轻轻松松用异或 移位运算 要点 1 它们都是双目运算符,两个运算分量都是整形,结果也是整形. ...