bower+gulp+angular+使用第三方插件

1、目录结构

wepapp

|--bower_components

|--angular

|--...各种js文件

|--dist

|--src

|--layout

|--frame.html

|--main.html

|--topbar-controller.js

|--topbar.html

|--stock

|--stock.html

|--stockController.js

|--style

|--app.module.js

|--app.router.js

|--index.html

2、index.html

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

3、gulpfile.js

100

101

102

103

104

105

106

107

108

109

110

111

112

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();

var open = require('open');

var ngAnnotate = require('gulp-ng-annotate'); //gulp-ng-annotate 解决angular中注入参数被压缩后出现问题

var rev = require('gulp-rev'); //- 对文件名加MD5后缀

var revCollector = require('gulp-rev-collector'); //- 路径替换

var app = { //预设编译目录

srcPath:'src/',

devPath:'build/',

prdPath:'dist/'

};

//需要编译的文件

gulp.task('lib',function(){

gulp.src('bower_components/**/*.js')

.pipe(gulp.dest(app.devPath + 'vendor'))

.pipe(gulp.dest(app.prdPath + 'vendor'))

.pipe($.connect.reload());

gulp.src('bower_components/**/**.css')

.pipe(gulp.dest(app.devPath + 'vendor'))

.pipe(gulp.dest(app.prdPath + 'vendor'))

.pipe($.connect.reload());

gulp.src('bower_components/bootstrap/less/bootstrap.less')

.pipe($.plumber())

.pipe($.less())

.pipe(gulp.dest(app.devPath + 'vendor/bootstrap'))

.pipe($.cssmin())

.pipe(gulp.dest(app.prdPath + 'vendor/bootstrap'))

.pipe($.cssmin())

.pipe($.connect.reload());

})

gulp.task('html',function(){

gulp.src(app.srcPath + '**/*.html')

.pipe(gulp.dest(app.devPath))

.pipe(gulp.dest(app.prdPath))

.pipe($.connect.reload());

})

gulp.task('json',function(){

gulp.src(app.srcPath + 'data/**/*.json')

.pipe(gulp.dest(app.devPath + 'data'))

.pipe(gulp.dest(app.prdPath + 'data'))

.pipe($.connect.reload());

})

gulp.task('css',function(){

gulp.src(app.srcPath + 'style/*.css')

.pipe($.plumber())

.pipe(gulp.dest(app.devPath + 'css'))

.pipe($.cssmin())

.pipe(gulp.dest(app.prdPath + 'css'))

.pipe($.connect.reload());

gulp.src(app.srcPath + 'style/iconfont/**/*')

.pipe(gulp.dest(app.devPath + 'css/iconfont'))

.pipe(gulp.dest(app.prdPath + 'css/iconfont'))

.pipe($.connect.reload());

})

gulp.task('js',function(){

gulp.src(['src/**/*.js','!src/style/**'])

.pipe($.plumber())

.pipe($.concat('app.js'))

.pipe(gulp.dest(app.devPath + 'js'))

.pipe(ngAnnotate())

.pipe($.uglify())

.pipe(gulp.dest(app.prdPath + 'js'))

.pipe($.connect.reload());

})

gulp.task('images',function(){

gulp.src(app.srcPath + 'images/**/*')

.pipe(gulp.dest(app.devPath + 'images'))

.pipe($.imagemin())

.pipe(gulp.dest(app.prdPath + 'images'))

.pipe($.connect.reload());

})

//清除所有已编译的文件

gulp.task('clean',function(){

gulp.src([app.devPath,app.prdPath])

.pipe($.clean())

})

gulp.task('build',['lib','html','json','js','images','css']);

//构建环境&&监听文件

gulp.task('server',["build"],function(){

$.connect.server({

root:[app.devPath],

livereload:true,

port:9999

});

open("http://localhost:9999");

gulp.watch(app.srcPath + "**/*.js",['js']);

gulp.watch(app.srcPath + "bower_components/**/*.js",['lib']);

gulp.watch(app.srcPath + "style/**/*.css",['css']);

gulp.watch(app.srcPath + "data/**/*.json",['json']);

gulp.watch(app.srcPath + "**/*.html",['html']);

gulp.watch(app.srcPath + "images/**/*",['images']);

})

//启动服务

gulp.task("default",['server'])

4、app.module.js

'use strict';

var app = angular.module('webApp', [

'ui.router',

'ui.bootstrap'

]);

5、app.router.js

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

//路由配置

$stateProvider

.state('console', { // 主体框架结构

url: '/console',

views: {

'': {

templateUrl: "layout/frame.html"

'topbar@console': {

templateUrl: "layout/topbar.html"

'main@console': {

templateUrl: "layout/main.html"

}

controller:'consoleCtrl'

})

.state('console.dashboard', { //平台主页

url: '/dashboard',

templateUrl: 'dashboard/dashboard.html'

})

.state('console.stock', { //库存管理

url: '/stock',

templateUrl: 'stock/stock.html',

controller:'stockCtrl'

})

}])

6、layout/frame.html

1 2	<div ui-view="topbar"></div> <div ui-view="main"></div>

layout/main.html

</a>

</li>

</a>

</li>

</a>

</li>

<p class="text">供应商管理</p>

</a>

</li>

</a>

</li>

</ul>

</div>

</a>

</li>

<a>

</a>

</li>

<a>

</a>

</li>

<a>

</a>

</li>

<a>

</a>

</li>

</ul>

</div>

</div>

</div>

layout/topbar.html

<a class="navbar-brand" ui-sref="console">农投品管理云平台</a>

</a>

</ul>

</li>

</ul>

</div>

layout/topbar-controller.js

//平台顶部controller

app.controller('topbarCtrl', topbarCtrl);

function topbarCtrl($scope, authenticationSvc) {

$scope.userName = authenticationSvc.getUserInfo().userName;

$scope.logout = function() {

authenticationSvc.logout();

}

7、stock/stock.html

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

<button class="btn btn-primary" ng-click="open_table()">查看库存</button>打开一个表格

</div>

<button class="btn btn-primary" ng-click="open_modal1()">打开一个输入框，获取输入的内容</button>

你输入的内容是：{{bbb}}

</div>

<button class="btn btn-primary" ng-click="open_modal2()">打开一个列表，获取选择的内容</button>

你选择的内容请看控制台是：{{selected.item}}

</div>

<p>测试自定义服务</p>

<button class="btn btn-primary" ng-click="alert()">alert</button>

<button class="btn btn-primary" ng-click="shadow()">shadow</button>

<p>测试layer</p>

<button class="btn btn-primary" ng-click="testLayer()">测试layer</button>

<button class="btn btn-primary" ng-click="prompt()">输入内容获取</button>输入的内容是：{{layerString}}

<button class="btn btn-primary" ng-click="openPage()">打开页面内容</button>

</div>

<h3 class="modal-title">{{title}}</h3>

</div>

</div>

</div>

</script>

<h>I'm a modal!</h>

</div>

<ul>

</li>

</ul>

Selected: <b>{{ selected.item }}</b>

</div>

<button class="btn btn-warning" ng-click="cancel2()">Cancel</button>

</div>

</script>

<thead>

<tr>

<th>Header</th>

</tr>

</thead>

<tbody>

<tr>

<td>Lorem</td>

<td>ipsum</td>

<td>dolor</td>

</tr>

<tr>

<td>consectetur</td>

<td>adipiscing</td>

</tr>

<tr>

<td>Integer</td>

<td>Praesent</td>

</tr>

<tr>

<td>libero</td>

<td>cursus</td>

</tr>

<tr>

<td>dapibus</td>

</tr>

<tr>

<td>Nulla</td>

</tr>

<tr>

<td>elementum</td>

<td>imperdiet</td>

</tr>

<tr>

<td>sagittis</td>

<td>ipsum</td>

<td>Praesent</td>

<td>mauris</td>

</tr>

<tr>

<td>Fusce</td>

<td>tellus</td>

</tr>

<tr>

<td>augue</td>

<td>semper</td>

<td>porta</td>

<td>Mauris</td>

</tr>

<tr>

<td>massa</td>

<td>Vestibulum</td>

<td>lacinia</td>

</tr>

<tr>

<td>nulla</td>

<td>Class</td>

<td>aptent</td>

</tr>

<tr>

<td>taciti</td>

<td>sociosqu</td>

<td>litora</td>

</tr>

<tr>

<td>torquent</td>

<td>conubia</td>

<td>nostra</td>

</tr>

<tr>

<td>inceptos</td>

<td>himenaeos</td>

<td>Curabitur</td>

</tr>

<tr>

<td>sodales</td>

<td>ligula</td>

<td>libero</td>

</tr>

</tbody>

</table>

</div>

</script>

<thead>

<tr>

<th>Header</th>

</tr>

</thead>

<tbody>

<tr>

<td>Lorem</td>

<td>ipsum</td>

<td>dolor</td>

</tr>

<tr>

<td>consectetur</td>

<td>adipiscing</td>

</tr>

<tr>

<td>Integer</td>

<td>Praesent</td>

</tr>

<tr>

<td>libero</td>

<td>cursus</td>

</tr>

<tr>

<td>dapibus</td>

</tr>

<tr>

<td>Nulla</td>

</tr>

<tr>

<td>elementum</td>

<td>imperdiet</td>

</tr>

<tr>

<td>sagittis</td>

<td>ipsum</td>

<td>Praesent</td>

<td>mauris</td>

</tr>

<tr>

<td>Fusce</td>

<td>tellus</td>

</tr>

<tr>

<td>augue</td>

<td>semper</td>

<td>porta</td>

<td>Mauris</td>

</tr>

<tr>

<td>massa</td>

<td>Vestibulum</td>

<td>lacinia</td>

</tr>

<tr>

<td>nulla</td>

<td>Class</td>

<td>aptent</td>

</tr>

<tr>

<td>taciti</td>

<td>sociosqu</td>

<td>litora</td>

</tr>

<tr>

<td>torquent</td>

<td>conubia</td>

<td>nostra</td>

</tr>

<tr>

<td>inceptos</td>

<td>himenaeos</td>

<td>Curabitur</td>

</tr>

<tr>

<td>sodales</td>

<td>ligula</td>

<td>libero</td>

</tr>

</tbody>

</table>

</div>

</script>

stock/stockController.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

//定义弹框1的控制器

// 虽然下面的方法也可行，但是建议用这种方法

app.controller('modal_in_ctrl',["$scope",

"$uibModalInstance",

"fnitems",

"title",function($scope,$uibModalInstance,fnitems,title){

//$uibModalInstance用于接受弹出模板的回调

$scope.bbb=fnitems;

$scope.title=title;

$scope.ok_click=function(){

console.log($scope);//一个独立的$scope 没有$parent

//$scope.aaa = '我是写死的，与输入值无关';

$uibModalInstance.close($scope.aaa);//将自身的aaa传递给modalInstance

}

$scope.cancle=function(){

$uibModalInstance.dismiss('这是cancle');

}

}]);

//定义弹框2的控制器

//这里传入的items,来自$uibModal.open打开的对象的resolve

var ModalInstanceCtrl = function($scope,$uibModalInstance,items) {

//把items赋给自己独立的scope

$scope.items = items;

$scope.selected = {

item: $scope.items[0]

};

$scope.ok_click2 = function() {

$uibModalInstance.close($scope.selected);

};

$scope.cancel2 = function() {

$uibModalInstance.dismiss('cancel');

};

//可拖动，没用到的东西

app.directive('draggable', ['$document', function($document) {

return function(scope, element, attr) {

var startX = 0, startY = 0, x = 0, y = 0;

element= angular.element(document.getElementsByClassName("modal-dialog"));

element.css({

position: 'relative',

cursor: 'move'

});

element.on('mousedown', function(event) {

// Prevent default dragging of selected content

event.preventDefault();

startX = event.pageX - x;

startY = event.pageY - y;

$document.on('mousemove', mousemove);

$document.on('mouseup', mouseup);

});

function mousemove(event) {

y = event.pageY - startY;

x = event.pageX - startX;

element.css({

top: y + 'px',

left: x + 'px'

});

}

function mouseup() {

$document.off('mousemove', mousemove);

$document.off('mouseup', mouseup);

}

};

}]);

//自定义弹层

app.factory('testDialog',function(){

function DIALOG(){

this.name = "dialog";

};

DIALOG.prototype = {

constructor:DIALOG,

alert:function(){

alert('我是自定义的dialog');

msg:function(){},

input:function(){},

confirm:function(){},

content:function(){},

createShadow:function(){

var se = document.createElement('div');

se.style.position = 'absolute';

se.style.top = 0;

se.style.left = 0;

se.style.right = 0;

se.style.bottom = 0;

se.style.zIndex = 9999999;

se.style.background = 'rgba(0,0,0,.5)';

se.className = 'dialog-common-shadow';

document.body.appendChild(se);

se.onclick = function(){

document.body.removeChild(se);

}

close:function(){}

};

return function(){

return new DIALOG();

}

})

//库存controller

function stockCtrl($scope,$uibModal,testDialog) {

$scope.title = "库存信息";

/************************************1*************************************/

$scope.open_modal1 = function () {

var modalInstance = $uibModal.open({

animation: true,//是否开启动画

templateUrl: 'modal_test.html',//弹出框的模板html

controller: 'modal_in_ctrl',//弹出框的模板控制器

size:'sm',//弹出框的大小

resolve: {//resolve:可用于将页面的数据传输到模板控制器中，进而显示到弹出框模板

fnitems: function(){

return "通过resolve向弹出的模态框传值";

//记住。这里不能这样用

//title:"请输入你要保存的内容",必须要用function返回

title: function(){

return "请输入你要保存的内容";

}

});

modalInstance.result.then(function (data) {

//第一个回调函数的data来自s.ok_click,第二个回调函数的值来自s.cancel

console.log(data);

$scope.bbb = data;

}, function (data) {

console.log(data);

});

};

/*****************************************2********************************/

$scope.items = ['item1', 'item2', 'item3'];

$scope.open_modal2 = function() {

var modalInstance = $uibModal.open({

templateUrl: 'modal_test2.html',

controller: ModalInstanceCtrl,

resolve: {

items: function() {

return $scope.items;

}

});

modalInstance.opened.then(function() { //模态窗口打开之后执行的函数

console.log('modal is opened');

});

modalInstance.result.then(function(result) {

$scope.selected = result;

console.log(result);

},function(reason) {

console.log(reason); //点击空白区域，总会输出backdrop click，点击取消，则会暑促cancel

console.log('Modal dismissed at: ' + new Date());

});

};

/************************************3*************************************/

$scope.open_table = function () {

var modalInstance = $uibModal.open({

animation: true,//是否开启动画

templateUrl: 'modal_test3.html',//弹出框的模板html

size:'lg',//弹出框的大小

// resolve: {//resolve:可用于将页面的数据传输到模板控制器中，进而显示到弹出框模板

// fnitems: function(){

// return "通过resolve向弹出的模态框传值";

// },

// //记住。这里不能这样用

// //title:"请输入你要保存的内容",必须要用function返回

// title: function(){

// return "请输入你要保存的内容";

// }

});

// modalInstance.result.then(function(data){

// //第一个回调函数的data来自s.ok_click,第二个回调函数的值来自s.cancel

// console.log(data);

// $scope.bbb = data;

// }, function (data) {

// console.log(data);

// });

};

/************************************测试自己定义的服务*************************************/

var dialog = testDialog();

$scope.alert = function () {

dialog.alert();

};

$scope.shadow = function () {

dialog.createShadow();

};

$scope.layerString = "输入前的内容";

layui.use('layer', function(){

var layer = layui.layer;

$scope.testLayer = function () {

layer.msg('hello');

};

$scope.prompt = function () {

layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){

layer.close(index);

layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){

layer.close(index);

$scope.$apply($scope.layerString = pass +'和'+text);

layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);

});

};

$scope.openPage = function () {

layer.open({

type: 1,

skin: 'layui-layer-rim', //加上边框

area: ['720px', '540px'], //宽高

content: $("#layerContent").html()

});

$scope.layerString = "输入前的内容";

};

});

}

app.controller('stockCtrl', ["$scope","$uibModal","testDialog",stockCtrl]);

贵兴博客

bower+gulp+angular+使用第三方插件

相关文章

发表评论

发表评论