刚刚看一下角度团队推出的最后一个角度版本.Angular2已经出局,他们已经发布了他们的新网页http://angular.io.
在那里,他们有一个5分钟的快速入门项目,可以快速显示新语法以及您必须使用什么来执行新的角度应用程序.
我刚刚完成了所有步骤以使其正常工作,但加载时间为4.93秒.
我只是想知道,角2是慢吗？或者我可能会错过一些步骤.
这是我的代码
// app.es6
import {Component, Template, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'my-app'
})
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
constructor() {
this.name = 'Alex!';
}
}
bootstrap(MyAppComponent);
和index.html
<!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="dist/es6-shim.js"></script>
</head>
<body>
<!-- The app component created in app.js -->
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*':'angular2/*.js', // Angular …由于这个错误,我无法实例化控制器,它说:
应该做什么模块是angular.mock的别名,但我的问题是:
它是否可以从webpack重写模块而不是模块？(module.exports)
这是我的karma.config.js档案:
/*global __dirname*/
// Karma configuration
var path = require('path');
var webpackConfig = require('./webpack.config');
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: __dirname,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'src/Bundle/Resources/assets/base/base.js',
'src/**/*.spec.js'
],
// list of files to exclude
exclude: [],
// preprocess matching files before …我目前正在构建一个模式库，其中已Button使用React和构建了一个组件styled-components。基于该Button组件，我希望所有Links组件看起来完全相同，并接收完全相同的道具。为此，我使用as来自中的prop styled-components，它使我可以将已构建的元素用作另一个标签或组件。
按钮组件
import * as React from 'react'
import { ButtonBorderAnimation } from './ButtonAnimation'
import { ButtonProps, ButtonVariant } from './Button.types'
import { ButtonBase, LeftIcon, RightIcon } from './Button.styled'
function Button({
variant = ButtonVariant.Filled,
children,
leftIcon = null,
rightIcon = null,
...props
}: ButtonProps): JSX.Element {
return (
<ButtonBase variant={variant} {...props}>
{variant !== ButtonVariant.Ghost ? (
<ButtonBorderAnimation {...props} />
) : null}
{leftIcon ? <LeftIcon>{leftIcon}</LeftIcon> : …javascript typescript reactjs styled-components react-router-dom
我的测试有问题，运行它们时出现此错误：
09 09 2015 14:55:27.174:INFO [Chrome 45.0.2454 (Mac OS X 10.10.1)]: Connected on socket 9aXAoBK8a1zKw9IVAAAA with id 22794373
Chrome 45.0.2454 (Mac OS X 10.10.1) ERROR
Uncaught ReferenceError: jasmineRequire is not defined
at /Users/agarcia/Projects/affiliate-suite/node_modules/karma/jasmine/lib/boot.js:15
这是我的karma.conf.js文件：
/*global __dirname*/
// Karma configuration
var path = require('path');
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: __dirname,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns …我们正在开发一个用 dotnet 编写的带有 Razor 视图（纯后端堆栈）的项目。我们计划将每个视图移至React用于react-router-dom处理客户端和服务器中的路由。
我们的想法是一页一页地移动，而不是大爆炸，因为该项目已经在生产中。
客户端路由器
import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'
const history: History = createBrowserHistory({ basename: baseUrl })
<Router history={history}>
<Switch>
<Route path="/example" component={Example} />
...
</Switch>
</Router>
服务器路由器
import { StaticRouter } from 'react-router-dom'
<StaticRouter
basename={basename}
context={routerContext}
location={params.location.path}
>
<Switch>
<Route path="/example" component={Example} />
...
</Switch>
</StaticRouter>
问题
/当我从（在 React 路由器中）导航到/example（在 .net 路由器中）然后尝试返回到 时/example，看起来没有转换到 React 路由器，并且浏览器历史记录保持在/。
我在一个使用以下项目的项目中工作：
该应用程序呈现服务器端和客户端。
我正在使用@loadable/component这种方式动态代码拆分。
路由器.tsx
import * as React from 'react'
import loadable from '@loadable/component'
import { Route, Switch } from 'react-router-dom'
const NotFound = loadable(() =>
import('../components/NotFound/NotFound' /* webpackChunkName: "notfound" */)
)
const routes = (
<Switch>
<Route component={NotFound} />
</Switch>
)
export default routes
加载页面时，此错误出现在控制台上，页面似乎闪烁了一秒钟。
react-dom.development.js:546 Warning: Did not expect server HTML to contain a <div> in <main>.
当我检查双方（服务器/客户端）的输出时，它们是相同的。
当我@loadable/component像下面那样删除时，它可以工作并且错误消失了。
路由器无负载.tsx
import * as React …javascript reactjs server-side-rendering react-router-dom loadable-component
在我的 hasura.io 数据库中，我有一个booking表，我在其中存储具有以下属性的预订：
现在，从 UI 中，当用户进行预订时，我想检查之前是否有任何涉及这些日期范围的预订。
例如。用户想要在以下日期进行预订：
{
"from": "2020-03-31T14:00:00+00:00",
"to": "2020-03-31T17:00:00+00:00"
}
但在同一天有一个预订：
{
"from": "2020-03-31T15:00:00+00:00",
"to": "2020-04-01T17:00:00+00:00"
}
请注意，此预订不是在用户尝试预订的日期范围内进行的。因此，以下查询将不返回任何内容。
query CheckBooking($from: timestamptz!, $to: timestamptz!) {
booking(where: {_and: [{from: {_lte: $from}}, {to: {_gte: $to}}]}) {
id
from
to
}
}
以上是我尝试过但没有成功的方法。任何人都可以帮助找出检查范围内或用户新预订内是否有任何预订的正确查询是什么？
javascript ×5
reactjs ×3
angularjs ×2
angular ×1
gql ×1
graphql ×1
hasura ×1
jasmine ×1
react-apollo ×1
react-router ×1
typescript ×1
webpack ×1