[AngularJS + Webpack] require directives
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的更多相关文章
- [AngularJS + Webpack] Uglifying your JavaScript
Angular requires some careful consideration when uglifying your code because of how angular's depend ...
- [AngularJS + Webpack] Production Setup
Using Angular with webpack makes the production build a breeze. Simply alter your webpack configurat ...
- AngularJS: Dynamically loading directives
http://www.codelord.net/2015/05/19/angularjs-dynamically-loading-directives/ ----------------------- ...
- [AngularJS + Webpack] Using Webpack for angularjs
1. Install webpack & angular: npm install webpack angular 2. Create webpack.config.js file: modu ...
- [AngularJS + Webpack] Requiring CSS & Preprocessors
Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...
- [AngularJS + Webpack] Requiring Templates
With Angular, most of the time you're specifying a templateUrl for your directives and states/routes ...
- AngularJs中的directives（指令part1）
一.指令的职责 指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
- webpack ------require,ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
随机推荐
- [dp]HDOJ4960 Another OCD Patient
题意: 给一个n, 第二行给n堆的价值v[i], 第三行给a[i]. a[i]表示把i堆合在一起需要的花费. 求把n堆变成类似回文的 需要的最小花费. 思路: ①记忆化搜索 比较好理解... dp[ ...
- easyui源码翻译1.32--Calendar(日历)
前言 前几天加班比较忙 未能及时更新翻译的 今天多发布几篇..下载该插件翻译源码 日历控件显示一个月的日历,允许用户选择日期和移动到下一个或上一个月.默认情况下,一周的第一天是周日.它可以通过设置'f ...
- Fast UI Draw （Intel出品）
Fast UI Draw in a library that provides a higher performance Canvas interface. It is designed so tha ...
- 释放SQL Server占用的内存
由于Sql Server对于系统内存的管理策略是有多少占多少,除非系统内存不够用了(大约到剩余内存为4M左右),Sql Server才会释放一点点内存.所以很多时候,我们会发现运行Sql Server ...
- yii 验证器和验证码
http://www.yiiframework.com/doc/api/1.1/CCaptcha http://www.cnblogs.com/analyzer/articles/1673015.ht ...
- MySQL事务之数据结构
事务是关系型数据库的核心,贯穿整个源代码,先来瞅瞅相关的数据结构,揭开面纱: server层和innodb引擎层分别对应了不同的数据结构,但相互关联: server层需要引擎注册事务,以便server ...
- NOI2010航空管制
2008: [Noi2010]航空管制 Time Limit: 10 Sec Memory Limit: 552 MBSubmit: 31 Solved: 0[Submit][Status] De ...
- WeiXinMPSDK-微信C# SDK
微信C# SDK 微信公众号:Senparc.Weixin.MP.dll 微信企业号:Senparc.Weixin.QY.dl 微信开放平台:Senparc.Weixin.Open.dll 本库为.N ...
- nginx错误汇总
一.Nginx出现413 Request Entity Too Large错误解决方法 Nginx出现的413 Request Entity Too Large错误,这个错误一般在上传文件的时候出现, ...
- PHP获取上个月、下个月、本月的日期
获取本月日期: 代码如下: function getMonth($date){ $firstday = date("Y-m-01",strtotime($date)); $la ...