Probably more than one.
angular.extend(target, source);jquery.extend(target, source);_.extend(target, source);Object.assign(target, source);angular.element.toggleClass('is-on')jQuery('.my-element').toggleClass('is-on')[...document.querySelectorAll('.my-element')]
.map(el => el.classList.toggle('is-on'));qsa('.my-element').map(toggleClass('is-on'));
const qsa = (sel, from) => [...(from || document).querySelectorAll(sel)],
toggleClass = className => el => el.classList.toggle(className);Handlebars.compile('Hello {{ location}}')({ location: 'world'})angular.compile('Hello {{ location}}')({ location: 'world'})`Hello ${ location }`render({location: world})
function render(data) {
return `Hello ${ data.location }`;
}
Is this framework/library really making things easier for me or my users?
An Angular 2 application consists of nested components. So an Angular 2 application will always have a component tree.
- Victor Savkin: core Angular 2 developer
reusable === (repeatable && configurable &&
extensible && composable)
A component must not rely on the inferred existence of a particular state in the application. Any dependency should be provided to the component explicitly.
angular.factory('config', function () {
return function (options) {
const defaults = {
desert: 'gelato',
entree: 'chicken cordon bleu',
appetizer: 'cesar salad',
drink: 'mint limeade'
}
return angular.extend({}, defaults, options);
}
}angular.factory('config', function () {
return function (options) {
const defaults = {
desert: 'gelato',
entree: 'chicken cordon bleu',
appetizer: 'cesar salad',
drink: 'mint limeade'
}
return Object.assign({}, defaults, options);
}
}export default function () {
return function (options) {
const defaults = {
desert: 'gelato',
entree: 'chicken cordon bleu',
appetizer: 'cesar salad',
drink: 'mint limeade'
}
return Object.assign({}, defaults, options);
}
}//app.js
import config from './config';
angular.module('myApp', [])
.factory('config', config);//app.js
import config from './config';
const myConfig = config({ entree: 'ratatouille'});A component must not rely on the inferred existence of a particular state in the application. Any state should be provided to the component explicitly.
angular.module('MyApp', [])
.factory('dataSomewhere', function ($resource) {
return $resource('/data/somewhere/');
})
.controller('ctrl', function (dataSomewhere) {
dataSomewhere.get().$promise.then(data => this.data = data);
});//dataSomewhere.js
export default function ($resource) {
return $resource('/data/somewhere/', { id: '' });
});
//ctrl.js
export default function (dataSomewhere) {
dataSomewhere.get({ id: 123 })
.$promise.then(data => this.data = data);
}
//app.js
import dataSomewhere from 'dataSomewhere';
angular.module('MyApp', [])
.factory('dataSomewhere', dataSomeWhere)
.controller('ctrl', ctrl);//dataSomewhere.js
export default function (fetch) {
return { get(id) { return fetch(`/data/somewhere?id=${id}`); },
save(data) { return fetch(`/data/somewhere`, {
method: 'post',
body: JSON.stringify(data);
})}
};
});
//ctrl.js
export default function (dataSomewhere) {
dataSomewhere.get(123).then(data => this.data = data);
}
//app.js
import dataSomewhere from 'dataSomewhere';
import $resourceToFetch from 'resourceToFetch';
angular.module('MyApp', [])
.factory('fetch', $resourceToFetch)
.factory('dataSomewhere', dataSomeWhere)
.controller('ctrl', ctrl);Just kidding :)
for real this time.