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. int指令理解

    以下是王爽老师的<汇编语言>中第十五章中的一段程序代码,其功能是增加9号中断的功能,当按下Esc键时屏幕中显示的字母改变颜色 assume cs:codesg,ss:stack,ds:da ...

  2. web storm使用和配置

    官网:http://www.jetbrains.com/webstorm/ webStorm,File=>setting=>JavaScript-Libraries How WebStor ...

  3. Android进阶篇-内存管理

    很多时候我们需要考虑Android平台上的内存管理问题,Dalvik VM给每个进程都分配了一定量的可用堆内存,当我们处理一些耗费资源的操作时可能会产生OOM错误(OutOfMemoryError)这 ...

  4. hdu4597Play Game(记忆化）

    链接 通化邀请赛的题 貌似不怎么难 记忆化DP 状态方程类似于2维的 只是变成了4维  每次有四种方向去搜 取最棒的 判断好边界条件 #include <iostream> #includ ...

  5. Java通过socket实现smtp协议发送邮件

    import java.io.BufferedReader;import java.io.DataOutputStream;import java.io.IOException;import java ...

  6. 根据价格范围筛选汽车(路由以及JS与Jquery)

    通过输入价格范围,来筛选汽车,主要方法是通过点击“查询”按钮,触发chaxun()方法,利用Jquery和JS获取输入的值,然后为相应的div加载相应的动作,通过更改路由的路径,以此来实现筛选车辆,然 ...

  7. Oracle rman 命令详解

    一.list常用命令总结备忘 list命令列出控制文件.RMAN恢复目录中备份信息, 是我们对所有可见的数据库备份文件的一个最直观的了解的方法 list incarnation;    list ba ...

  8. iPhone丢失后通过iccid找回流程

    切记,丢失IPHONE第一时间要去补卡,免得小偷刷机用你的卡激活,这样你查到的号码只会是你自己的号码找iphone有2个方法:ICCID和维修换机.两者之间没任何直接联系,请不要混淆!下面是总体流程图 ...

  9. 一行代码搞定Adapter

    15年Google I/O大会发不了三个重要支持库 >Material design (Android Support Design) >百分比布局:Percent support lib ...

  10. ZOJ3261 Connections in Galaxy War 并查集

    分析:对于这种删边操作,我们通常可以先读进来,然后转化离线进行倒着加边 #include <stdio.h> #include <string.h> #include < ...