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. [dp]POJ2559 && HDOJ1506 Largest Rectangle in a Histogram

    题意 给n个条形的高度, 问能放的最大矩形面积 分析: 从左到右 从右到左 各搞一遍 分别记录      L[i]记录列(从前往后)标 第几列开始 可以往后放高度为a[i]的矩形  R[i]记录列(从 ...

  2. 板级支持包（BSP）

    板级支持包(BSP)是介于主板硬件和操作系统中驱动层程序之间的一层,一般认为它属于操作系统一部分,主要是实现对操作系统的支持,为上层的驱动程序提供访问硬件设备寄存器的函数包,使之能够更好的运行于硬件主 ...

  3. 几篇很有用的USB开发资料

    1,USB描述符详解:http://blog.csdn.net/alien75/article/details/4622319 2,一种嵌入式USBMiniHost系统设计与实现:http://www ...

  4. 浅析Android的窗口

    一.窗口的概念 在开发过程中,我们经常会遇到,各种跟窗口相关的类,或者方法.但是,在 Android 的框架设计中,到底什么是窗口?窗口跟 Android Framework 中的 Window 类又 ...

  5. cmd for 用法

    1:for命令及变量 基本格式: FOR /参数 %variable IN (set) DO command [command_parameters] %variable:指定一个单一字母可替换的参数 ...

  6. 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

  7. iphone4s丢失如何找回

    iphone4s丢失如何找回 iphone4s手机丢了怎么办,其实苹果手机自带找回功能,但是前提你得打开了icloud这款软件. 方法/步骤 1 在手机的设置里找到icloud设置,如图. 2 点击进 ...

  8. linux cross toolsChain 交叉编译 ARM（转）

    转载请注明出处:http://blog.csdn.net/mybelief321/article/details/9076583 安装环境 Linux版本:Ubuntu 12.04    内核版本:L ...

  9. 删除一个目录和其各级子目录下的.svn文件

    两种方法[1]用find命令和其action来实现[2]用rm直接实现$ cd /tmp/xxx$ rm -rf  `find . -name .svn`就可以实现了. 删除SVN目录及从服务器端删除 ...

  10. [转]ASP.NET MVC 入门6、TempData

    ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个控制器Action间传递临时的数据或者给View传递一些临时的数据,相信大家都看过“在ASP.NET页面间传值的方法有哪几种” ...