我是angularJS的初学者,我正在使用node/bower/grunt为angularJS中的单页应用程序开发ui,我已经安装了angular-ui-bootstrap和来自angular-ui-utils的路由和事件工具.
我已经ng-class={active:$uiRoute}在菜单项上使用了但是当选择了一个菜单项时,没有应用活动类...是否$uiRoute处理了这个或者我是否需要单独编写它?
问一个愚蠢的问题道歉...
这是代码:
`<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ui-route="/" ng-class="{active:$uiRoute}"><a href="#/">Home</a></li>
<li ui-route="/about" ng-class="{active:$uiRoute}"><a href="#/about">About</a></li>
<li ui-route="/other" ng-class="{active:$uiRoute}"><a href="#/other">Other</a></li>
</ul>
</div>
...
<script src="bower_components/angular-ui-utils/modules/route/route.js"></script>
<script src="bower_components/angular-ui-utils/modules/event/event.js"></script>`
Run Code Online (Sandbox Code Playgroud)
和
angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/other', {
templateUrl: 'views/other.html',
controller: 'OtherCtrl'
})
.otherwise({
redirectTo: '/'
});
})
Run Code Online (Sandbox Code Playgroud) 我有一些Gulp工作做典型clean,build,release一个网站的行动.在我看来,没有什么特别不寻常的.(实际上它与Aurelia TypeScript骨架非常相似.)
大多数团队使用GulpPowerShell /命令提示符进行前端开发,并使用VS Code/Sublime进行编辑.一些团队使用Visual Studio 2015做同样的事情.
build从命令提示符运行任务工作正常,但如果我们从Visual Studio的Task Runner Explorer运行它,它会给我们一个错误.
但是,运行其他任务(例如clean)可以在命令提示符和VS Task Runner Explorer中正常工作.
有趣的是,Task Runner explorer甚至会输出它调用以运行任务的进程的副本.如果我复制确切的命令(见下文),并运行在命令提示符下,它并没有给出错误.它仅在从Task Runner Explorer运行时发生,并且仅在该任务中运行.
这是Task Runner Explorer的任务命令行和相关错误输出:
cmd.exe /c gulp -b "D:\Development\xxxx\WebSite" --color --gulpfile "D:\Development\xxxx\WebSite\Gulpfile.js" build
[20:40:42] Using gulpfile D:\Development\xxxx\WebSite\Gulpfile.js
[20:40:42] Starting 'build'...
[20:40:42] Starting 'clean'...
[20:40:42] Finished 'clean' after 5.74 ms
[20:40:42] Starting 'build-system'...
[20:40:42] Starting 'build-html'...
[20:40:42] Starting 'build-css'...
[20:40:42] Finished 'build-css' after 31 ms
[20:40:43] …Run Code Online (Sandbox Code Playgroud) javascript node.js gulp visual-studio-2015 task-runner-explorer
我遇到了涉及固定标头表的问题.我正在使用AngularJS和Bootstrap来构建Web应用程序.我无法使用,ng-grid因为它不支持IE7.所以,我正在填充表格行ng-repeat.该应用程序是响应.所以,我不能给单元格/标题赋予固定的宽度.是否有任何简单的方法来固定表头?
我用AngularJS在固定标头表上放了一个Plunker
提前致谢.
我正在尝试$watch在指令中使用元素的宽度:
appDrct.directive('setWidth', function($interval) {
return {
require: '?ngModel',
link: function($scope, $elm, attr, ngModel) {
$scope.$watch($elm.parent().width(), function() {
console.log('Width changed');
});
}
}
})
Run Code Online (Sandbox Code Playgroud)
但它不起作用......我知道我的宽度发生了变化(我尝试$interval显示宽度并改变)
我正在使用gulp minifyCss来缩小我的CSS以减少文件大小.我的gulp任务看起来像这样:
gulp.task('minify-css', function() {
return gulp.src('styles/*.css')
.pipe(concatCss("all.css").on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('dist'));
});
Run Code Online (Sandbox Code Playgroud)
它工作正常,并按预期输出.但是,它不会删除特殊注释/*! comment */
如何让minifyCss删除特殊注释?
世界上如何在react-router中使用嵌套路由,特别是版本4.x?以下版本在以下版本中运行良好...
<Route path='/stuff' component={Stuff}>
<Route path='/stuff/a' component={StuffA} />
</Route>
Run Code Online (Sandbox Code Playgroud)
升级到4.x会发出以下警告......
警告:您不应在同一路径中使用<Route>组件和<Route children>; <Route children>将被忽略
到底发生了什么事?我已经搜索了几个小时的文档,无法成功地使嵌套路由工作.如何使用<Route>组件在react-router v4中嵌套其路由?我的简单示例如何转换为嵌套路由的v4.x API合规性?
我正在使用angular给出我的第一步,我需要定义一个实用程序帮助程序库,其中包含一些函数方法,类似于
dataHelper.parse,dataHelper.sanitize等
以角度组织它的推荐方法是什么?
我正在使用browserify构建一个小角度应用程序ui-router.由于我不想使用服务器,我想使用angular $templateCache这样存储我的所有模板:
exports.templateCache = ["$templateCache", function($templateCache) {
'use strict';
$templateCache.put('partials/someState.html',
"myHtmlCode"
);
}];
Run Code Online (Sandbox Code Playgroud)
要填充缓存,我使用grunt查看我的partials文件夹,获取所有html并将其加载到缓存中grunt-angular-templates:
ngtemplates: {
myApp: {
cwd: 'dist/',
src: 'partials/**.html',
dest: 'src/js/templates/templates.js',
options: {
bootstrap: function(module, script) {
return 'exports.templateCache = ["$templateCache", function($templateCache) {\n' +
script +
'}];'
}
}
}
},
Run Code Online (Sandbox Code Playgroud)
然后我使用browersify将我所有的js组合在一起:
browserify: {
dist: {
files: {
'dist/js/app.js': [
'src/js/templates/**',
'src/app.js'
],
}
}
},
Run Code Online (Sandbox Code Playgroud)
这个工作到目前为止,但这个工作流对我来说看起来很笨重:我有一个中间步骤,我templates.js在我的src目录中创建文件,我在我的grunt文件中有硬编码的代码.
有没有办法更优雅地做到这一点?browserify是否附带内置解决方案来解决这个问题?
使用ui-grid我想使用过滤器获取所有过滤数据行的列表.
在下面的plunker中,我将500个项目的原始数据过滤到61.现在如何获得这61个实体的列表?
如果我使用以下代码,我只获得在屏幕上呈现的行
var _renderedRows = $scope.gridApi.grid.renderContainers.body.renderedRows;
Run Code Online (Sandbox Code Playgroud)
单击该plunker底部的按钮显示过滤行的数量,仅为14而不是61.如果我的过滤器中有14个或更少,则可以完美地工作,因为我可以从上面访问实体对象.但我看不到网格中暴露过滤行的任何属性.
那么如何才能获得61的列表,以便我可以将它们传递给另一个函数来对它们执行操作?
使用@vue/cli3.x和我vue.config.js稍微修改了我的.我希望有单独的CSS文件,例如app.css和vendor.css(从Sass转换而来) - 类似于它如何配置来处理JavaScript.我不确定如何设置正确的配置来实现这一目标.我错误地加载了我的文件吗?完全错过了标记?
// vue.config.js
module.exports = {
// [...]
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
shared: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
enforce: true,
chunks: 'all',
}
}
}
}
}
};
Run Code Online (Sandbox Code Playgroud)
我的构建结果在哪...
dist
??? css
| ??? app.css
??? js
| ??? app.js
| ??? vendor.js
Run Code Online (Sandbox Code Playgroud)
app.css包括我通过我进口的所有东西node_modules.我的主要App.vue组件中的样式导入如下...
<style lang="scss">
@import '../node_modules/minireset.css/minireset.sass';
</style>
// [...]
Run Code Online (Sandbox Code Playgroud)
我想要的结果是以下结构,其中"供应商"CSS/Sass被提取出来......
dist
??? css
| ??? app.css
| ??? …Run Code Online (Sandbox Code Playgroud) javascript ×8
angularjs ×6
gulp ×2
node.js ×2
angular-ui ×1
browserify ×1
caching ×1
css ×1
gruntjs ×1
jquery ×1
module ×1
organization ×1
react-router ×1
reactjs ×1
vue.js ×1
webpack ×1