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. [string]Codeforces158C Cd and pwd commands

    题目链接 题意很清楚 和linux的语句是一样的 pwd输出路径 cd进入 ..回上一层目录 此题完全是string的应用 String的用法 vector<string> s; int ...

  2. UIcollectionView的使用(首页的搭建3)

    2.4 数据统计cell 2.4.1 创建cell,继承自UICollectionViewcell 2.4.2导入详情头文件并且创建详情view 2.4.2.1创建详情view,继承自uiview,定 ...

  3. 安装gem invalid date format in specification错误的解决方法

    别的不说,报错信息直接贴图: 解决方法: 1.找到你环境目录下的spec,例如:D:\Ruby187\lib\ruby\gems\1.8\specifications. 2.找到引起错误文件的gems ...

  4. 【DataStructure In Python】Python模拟链表

    最近一直在学习Python和Perl这两门语言,两者共同点很多,也有不多.希望通过这样的模拟练习可以让自己更熟悉语言,虽然很多时候觉得这样用Python或者Perl并没有体现这两者的真正价值. #! ...

  5. 代码重构的技巧——合理使用@Deprecated

    最近由于工作环境不太理想,很长时间没心情写技术博文,今天在调试springMVC的DispatcherSevlet类的代码时,看到一处代码且联想到项目中程序员的一些做法,觉得有必要写一下. 我们在做项 ...

  6. [转] POJ 题目分类

    转载来自http://www.cnblogs.com/kuangbin/archive/2011/07/29/2120667.html 初期:一.基本算法:     (1)枚举. (poj1753,p ...

  7. C#实现调用Java类中方法

    基本思路: 用C#实现调用Java编写的类中的方法:重点是将Java编写的程序打包成Jar,然后使用开源工具IKVM将其转化成DLL控件,在.NET环境下调用. 分为以下步骤: 1.下载JDK6(注: ...

  8. （转载）php array_merge 和 两数组相加区别

    (转载)http://www.cnblogs.com/shistou/archive/2013/03/16/2963586.html PHP中两个数组合并可以使用+或者array_merge,但之间还 ...

  9. LightOJ 1138 Trailing Zeroes (III) 打表

    就是统计5,然后当时因为发现最多有8000w个5的倍数,然后8000w/100,是80w,打表,二分找 然后我看网上的都是直接二分找,真是厉害 #include <cstdio> #inc ...

  10. HW2.10

    import javax.swing.JOptionPane; public class Solution { public static void main(String[] args) { Str ...