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. 李洪强漫谈iOS开发[C语言-015]-变量的使用

  2. Android自定义属性时format选项可以取用的值

    1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name="名称"> <attr format=" ...

  3. Java JSON序列化杂谈

    在C#中序列化是比较容易的,如果不用第三方的类库,那么C#提供的两个对象也够我们使用,一般的操作是定义一个不含有方法的类,这个类里面定义了要序列化的对象的属性,因为我C#用的比较多,这里直接给出泛型, ...

  4. ActionBar官方教程(10)ActionBar的下拉列表模式

    Adding Drop-down Navigation As another mode of navigation (or filtering) for your activity, the acti ...

  5. JAVA web选型

    Web服务器是运行及发布Web应用的容器,只有将开发的Web项目放置到该容器中,才能使网络中的所有用户通过浏览器进行访问.开发Java Web应用所采用的服务器主要是与JSP/Servlet兼容的We ...

  6. win7系统自带截图工具快捷键是什么？怎么设置快捷键

    win7自带的截图工具很好,很强大,比从网上下载的截图工具好用多了,很少会出现问题.但是它能不能像QQ截图工具一样可以使用快捷键呢?今天小编和大家分享下心得,希望能够给你的工作带来快捷. 工具/原料 ...

  7. 面试准备--struts2.x

    对象解析: 1.HttpServletRequest对象是tomcat对用户请求信息的封装,该对象提供了多个方法可以获取用户的请求信息. 2.ActionContextCleanUP是一个可选过滤器, ...

  8. 【原】spark-submit提交应用程序的内部流程

    我们经常通过spark-submit来提交spark应用程序,那么让我们一起看一下这里面到底发生了什么吧. 知识点: 1.CLI命令行界面启动Spark应用程序 Unix有两种方式:1)spark-s ...

  9. Asp.net MVC中的ViewData与ViewBag

    Asp.net MVC中的ViewData与ViewBag 在Asp.net MVC 3 web应用程序中,我们会用到ViewData与ViewBag,对比一下: ViewData ViewBag 它 ...

  10. [转载]DOS循环：bat/批处理for命令详解 (史上虽详尽的总结和说明~~)

    --本文来源于TTT BLOG: http://www.yoyotao.net/ttt/, 原文地址:http://www.yoyotao.net/ttt/post/139.html 前言: 虽然以前 ...