Gorgo.Live.ToString()

Mariusz, Gorzoch tech Blog

Posts Tagged ‘Javascript

Injection in Jasmine with anuglar-mock.js

leave a comment »

So, you’ve build your angular app service and now you would like to test it. Testing simple service without dependencies is not big deal, but when it goes to test services with have some dependencies then it is quite easy to get lost.

Let’s start with basic example, where our service is not depended on others:

http://jsfiddle.net/MariuszGorzoch/81o74pwq/2/

2014-10-06 11-41-00

above service didn’t have any dependencies, so let’s upgrade it:

http://jsfiddle.net/MariuszGorzoch/81o74pwq/5/

2014-10-06 11-40-23

as you can see above in order to inject dependency in our service we need to use $provide.value(‘{serviceWithAreTryingToMock}’, {MockImplementation}); Thanks to that we can mock whatever service we want.

Written by Mariusz Gorzoch

6 October 2014 at 11:49

Posted in Bez kategorii

Tagged with , ,

React.js

leave a comment »

React.js is a Facebook client-side engine to build custom components for your web site application. It is meant to be a declarative framework, so it focuses on transforming data into interface components.

React’s top features:

  • speed
  • declarative binding
  • composability.

Hello World
When working with new framework, then there is no better way to start then by trying simple hello world example. Before start please ensure that you reference react library inside your HTML page (you can download it from the project site or directly link that url: http://fb.me/react-0.11.1.js)

1: /** @jsx React.DOM */
2: var Hello = React.createClass({
3: render: function() {
4: return <div>Hello <b>{this.props.name}</b></div>;
5: }
6: });
7: React.renderComponent(<Hello name=”World” />, document.body);

line 1: this tells the browser that we will use jsx features
line 2: we declare our react component
line 3: minimum requirements for new react component is to implement “render” function
line 4: jsx statment. It get compiled before run time.
line 7: call react engine to render “Hello” component into DOM element pointed by second argument.

Rendering a component means linking it to a DOM element and populating that DOM element. Current content of the DOM element get replaced.

Components can inherit other components.
Below you can see our above example modified to explain that scenario:

1 : /** @jsx React.DOM */
2 : var Inner = React.createClass({
3 : render : function() {
4 : return <div>Message from inner commponent</div>
5 : }
6 : });
7 : var Hello = React.createClass({
8 : render: function() {
9 : return <div>Hello <b>{this.props.name}</b><br/><Inner/></div>;
10: }
11: });
12: React.renderComponent(<Hello name=”World” />, document.body);

Output:

Hello World
Message from inner commponent

Working with arrays.
Below you can find simple example how to use “map” function, with quite usefully when it comes to nesting components:

1 : /** @jsx React.DOM */
2 : var Post = React.createClass({
3 : render : function() {
4 : return <p><i>{this.props.post}</i></p>
5 : }
6 : });
7 : var Blog = React.createClass({
8 : render: function() {
9 : return <div>
10: Blog name = <b>{this.props.name}</b><br/>
11: {this.props.posts.map(function(p) {
12: return <Post post={p}/>
13: })}
14: </div>;
15: }
16: });
17: React.renderComponent(<Blog name=”Gorgo.Live.ToString()” posts={[‘post1-1’, ‘post1-2’, ‘post1-3’]} />, document.body);

In response we get:

Blog name = Gorgo.Live.ToString()
post1-1
post1-2
post1-3

State

Each component can have his own state. Once state of component change then it generated DOM is updated by regenerating it again.
Here is simple example of it usage:

1 : /** @jsx React.DOM */
2 : var Counter = React.createClass({
3 : getInitialState: function () {
4 : var state = {c : 1};
5 : setInterval(function() {
6 : this.setState({c : this.state.c +1});
7 : }.bind(this),1000);
8 : return state;
9 : },
10: render: function() {
11: return <div>Counter = {this.state.c}</div>;
12: }
13: });
14: React.renderComponent(<Counter/>, document.body);

That give us output as below:

Counter = 1

and that is updated every 1 second.

Above are the basics of React.js, but I believe it is good start or at least it can speed you up if you would like to try it quickly in your project.

More about React.js can be found on their offical web site: http://facebook.github.io/react . I’ve also recomend good course on Pluralsight : React-fundamentals

Written by Mariusz Gorzoch

28 July 2014 at 14:19

Posted in Bez kategorii

Tagged with