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. CAN

    CAN Introduction Features Network Topology(CANbus網路架構) MESSAGE TRANSFER(CAN通訊的資料格式) 1.DATA FRAME(資料通 ...

  2. Android List去掉重复数据

    今天用数据库获取数据发现有个字段的数据重复了,于是就写了下面这个方法去除重复的数据. public static List<String> removeDuplicate(List< ...

  3. Attribute的一个列子

    其实在博客中也写过这个东西,也介绍过它的原理,原理很简单,就是在运行的时候通过反射拦截获取一些信息,但是我在写程序的时候几乎没用过,可能是自己接触的还不够多,也许是因为自己接触的功能不算复杂往往几句代 ...

  4. DesignPatterns

    1.设计模式,说明工厂模式.  总共23种,分为三大类:创建型,结构型,行为型 创建型 1. Factory Method(工厂方法) 2. Abstract Factory(抽象工厂) 3. Bui ...

  5. poj2411Mondriaan's Dream（状压）

    http://poj.org/problem?id=2411 下次还是去学习下dfs的写法吧 自己乱写的好像有点乱 乱七八糟改了一通过了 以1 1 表示横着的 1 0 表示竖着的 枚举每一行的状态 再 ...

  6. 【转】VC中对文件的读写

    原文网址:http://www.cnblogs.com/LJWJL/archive/2012/10/06/2712466.html 注意: 1.由于C是缓冲写 所以要在关闭或刷新后才能看到文件内容 2 ...

  7. AndroidStudio旧模板使用方法

    ***AndroidStudio旧模板使用方法*** 解压后用BlankActivity文件夹替换AndroidStudio安装目录下plugins\android\lib\templates\act ...

  8. [转]ASP.NET MVC 入门11、使用AJAX

    在ASP.NET MVC beta发布之前,M$就宣布支持开源的JS框架jQuery,然后ASP.NET MVC beta发布后,你建立一个ASP.NET MVC beta的项目后,你可以在项目的sc ...

  9. Lua类和类继承实现

    Lua本身是不能像C++那样直接实现继承,但我们可以用万能的table表来实现. 以下我总结了三种方式的类以及继承的实现 第一.官方的做法,使用元表实现 原理参照<Programming in ...

  10. curl post请求

    libcurl发送post请求,包括httpheader参数 static size_t getCharCode(void *ptr, size_t size, size_t nmemb, void ...