Posts

Image
Introduction To Angular Modules  Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules. Every Angular app has at least one NgModule class, the root module, which is conventionally named AppModule and resides in a file named app.module.ts. You launch your app by bootstrapping the root NgModule. While a small application might have only one NgModule, most apps have many more feature modules. The root NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth. NgModule metadata ...
Post a Comment
Read more
ReactJS - State State is the place where the data comes from. We should always try to make our state as simple as possible and minimize the number of stateful components. If we have, for example, ten components that need data from the state, we should create one container component that will keep the state for all of them. Using State The following sample code shows how to create a stateful component using EcmaScript2016 syntax. App.jsx import React from 'react' ; class App extends React . Component { constructor ( props ) { super ( props ); this . state = { header : "Header from state..." , content : "Content from state..." } } render () { return ( <div> <h1> { this . state . header }</ h1 > <h2> { this . state . content }</ h2 > </ div > ); } } export default App ; ...
Post a Comment
Read more
Image
ReactJS - Props Overview The main difference between state and props is that props are immutable. This is why the container component should define the state that can be updated and changed, while the child components should only pass data from the state using props. Using Props When we need immutable data in our component, we can just add props to reactDOM.render() function in main.js and use it inside our component. App.jsx import React from 'react' ; class App extends React . Component { render () { return ( <div> <h1> { this . props . headerProp }</ h1 > <h2> { this . props . contentProp }</ h2 > </ div > ); } } export default App ; main.js import React from 'react' ; import ReactDOM from 'react-dom' ; import App from './App.jsx' ; ReactDOM . render (< App headerProp = "Header from props..." ...
Post a Comment
Read more
Image
ReactJS - Component API In this chapter, we will explain React component API. We will discuss three methods: setState(), forceUpdate and ReactDOM.findDOMNode() . In new ES6 classes, we have to manually bind this. We will use this.method.bind(this) in the examples. Set State setState() method is used to update the state of the component. This method will not replace the state, but only add changes to the original state. import React from 'react' ; class App extends React . Component { constructor () { super (); this . state = { data : [] } this . setStateHandler = this . setStateHandler . bind ( this ); }; setStateHandler () { var item = "setState..." var myArray = this . state . data . slice (); myArray . push ( item ); this . setState ({ data : myArray }) }; render () { return ( <div> < button onClick = { t...
Post a Comment
Read more
Image
How to Use Celery and RabbitMQ with Django Celery is an asynchronous task queue based on distributed message passing. Task queues are used as a strategy to distribute the workload between threads/machines. In this tutorial I will explain how to install and setup Celery + RabbitMQ to execute asynchronous in a Django application. To work with Celery, we also need to install RabbitMQ because Celery requires an external solution to send and receive messages. Those solutions are called message brokers . Currently, Celery supports RabbitMQ, Redis, and Amazon SQS as message broker solutions. Table of Contents Why Should I Use Celery? Installation Installing RabbitMQ on Ubuntu 16.04 Installing RabbitMQ on Mac Installing RabbitMQ on Windows and Other OSs Celery Basic Setup Creating Our First Celery Task Starting The Worker Process Managing The Worker Process in Production with Supervisord Further Reading ...
Post a Comment
Read more
Image
10 Python Tricks Beginners Should Know Trick #1 Reversing a string in Python >>> a = "code" >>> print "Reverse is" ,a[:: -1 ] Reverse is edoc    Trick #2 Transposing a Matrix >>> mat = [[ 1 , 2 , 3 ], [ 4 , 5 , 6 ]] >>> zip(*mat) [( 1 , 4 ), ( 2 , 5 ), ( 3 , 6 )] Trick #3 a = [1,2,3] Store all three values of the list in 3 new variables >>> a = [ 1 , 2 , 3 ] >>> x, y, z = a >>> x 1 >>> y 2 >>> z 3     Trick #4 a = ["Code", "Python", "Developer"] Create a single string from all the elements in list above. >>> print " " .join(a) Code Python Developer    Trick #5 List 1 = ['a', 'b', 'c', 'd'] List 2 = ['p', 'q', 'r', 's'] Write a Python code to print ap bq cr ds >>> for x, y in zip(list1,list2): ... ...
Post a Comment
Read more
10 Angular and Typescript tricks and tips that will improve your application    Angular 1. Define form parameters before Component definition status : ' status ' , classification : ' classification ' , note : ' note ' }; @ Component ({ selector : ' app-preview ' , templateUrl : ' ./preview.component.html ' , styleUrls : [ ' ./preview.component.scss ' ] }) this . form = this . formBuilder . group ({ [ FORM_PARAMS . status ] : [ false ], [ FORM_PARAMS . classification ] : [ null ], [ FORM_PARAMS . note ] : [ null , Validators . required ] }); this . form . patch...
Post a Comment
Read more