output.filename: './dist/main.js' на:output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}publicPath: '/dist/' на:contentBase: path.resolve(__dirname, 'dist')new ExtractTextPlugin('[name].css'), output.path уже указывает, что надо выгружать все в dist this.props.setVar.bind(this, this.state.someVar)}export default class App extends Component {
constructor(props) {
super(props);
this.state = {
someVar: 0
}
this.setVar = this.setVar.bind(this);
}
setVar(some) {
this.setState({someVar: some});
}
render() {
return (<Child someVar={this.state.someVar} setVar={this.setVar} />);
}
}
export default class Child extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.getNext = this.getNext.bind(this);
}
getNext() {
return this.props.someVar + 1;
}
handleClick() {
this.props.setVar( this.getNext() )
}
render() {
let btn = (<button type="button" onClick={this.handleClick}>Go</button>
return (<div><btn /> {this.props.someVar}</div>);
}
}// пример роутов, использую ui-router
$stateProvider.state('admin', {
template: '...', // содержит <div ui-view></div> для вывода потомков, например роута home
})
$stateProvider.state('home', {
parent: 'admin',
template: '...',
controller: '...'
})// Пример как выглядит angular тема INSPINIA
export default angular.module('inspinia', [ ])
.directive('...', ...)
...
.name;flexbox, grid layout- это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
gulp, webpack и пр.- это инструменты, которые созданы для облегчения рутинных задач.
препроцессоры- представьте, что вам чего-либо не хватает в html и css.
пакетные менеджеры- это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
plugins: ['transform-runtime', 'transform-decorators-legacy'],
presets: ['es2015', 'react', 'stage-0']
}
}export default class StorageService {
constructor($rootScope) {
'ngInject';
this.$rootScope = $rootScope;
this._model = {};
}
getModel() {
return this._model;
}
setModel(newModel) {
this._model = newModel;
// вызываем событие Сервис изменился, при каждом изменении модели
this.$rootScope.$broadcast('storageServiceChange');
}
loadFromFile(fileName) {
fs.readFile(fileName, 'utf-8', (err, data) => {
let newModel = JSON.parse(data);
this.setModel(newModel);
});
}
}class AppController {
constructor($rootScope, $scope, storageService) {
'ngInject';
this.storage = storageService;
this.$rootScope = $rootScope;
this.$scope = $scope;
this.model = {};
}
$onInit() {
this.storage.loadFromFile('storage.txt');
// подписываемся на событие Сервис изменился, и обновляем модель
this.$rootScope.$on('storageServiceChange', () => {
this.model = this.storage.getModel();
})
}
}mailApp.directive('mailList', function(){
return {
restrict: 'E',
templateUrl: 'mailListDirective.html',
controller: 'mailListCtrl',
// replace: true,
controllerAs: 'mailListCtrl'
};
});By default every local <img src="image.png"> is required (require('./image.png')). You may need to specify loaders for images in your configuration (recommended file-loader or url-loader).resolve: {
root: path.resolve(__dirname, 'source')
}{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader:'file',
query: {
name: 'img/[name].[ext]'
}
}var NumericInput = require('react-numeric-input');
var Calculator = React.createClass({
getInitialState: function() {
return {
price: 0,
offer: 0,
result: 0
};
},
caclResult: function() {
this.setState({result: this.state.price - this.state.offer});
},
render: function() {
return (
<div className='calculator'>
<NumericInput min={0} max={100} value={this.state.price} onChange={this.caclResult} />
<NumericInput min={0} max={100} value={this.state.offer} onChange={this.caclResult} />
<span>Итого: {this.state.result}</span>
</div>
)
}
});responseError: function(rejection) {
...
if (tokenError) {
return Session.refreshToken().then(function() {
return $http(rejection.config); // Повторяем запрос, когда получили новый токен
});
}
return $q.reject(rejection);
}