Hello! My name is Anton and I`m JavaScript Architect at Codemotion. My professional record as a software developer is more than 5 years. During this time I was the technical lead in fintech, logistics and IoT projects. My latest project is related to app for limiting internet connection, access to content for different devices in your network together with graphical reports.

Also, I`m a mentor for Junior developers in Codemotion and I like to improve the professional skills of my colleagues. In my free time, I like football, traveling and reading. I`m looking forward to delivering outstanding results to your project!

The post Anton Smirnov – JavaScript Architect, Codemotion appeared first on Codemotion.

Hi there! My name is Vitaliy and I`m JavaScript Architect from Codemotion. I have strong JavaScript expertise, so framework really doesn’t matter – I can lead any technical project, that requires high-level architect solutions.

I can help to launch your MVP in the shortest term, considering business logic and save your app development from fail.

As to my personal interests, I`m a big fan of cars and I drive BMW, but my latest project was web-shop with ERP system for Mercedes goods. Thanks for watching my video! Let`s work!

The post Vitaliy Kushnir – JavaScript Architect, Codemotion appeared first on Codemotion.

Hi guys! My name is Dennis and I`m Backend Developer in Codemotion. I know every lifehack and pitfall in Backend, and also I have Business Analyst experience, so I can develop your app considering all business needs, not just coding.

I`m very open person, I like wakeboarding, roller blading and travelling. If you want to develop a great app – just let me know! Thanks for watching my video! Bye!

The post Dennis Yarmosh – JavaScript Lead, Codemotion appeared first on Codemotion.

1. Why do I need Angular.js and why he
2. Modern tools and framework Angular.js frontend applications
3. Familiarity with controllers and directives Angular.js
4. Writing Services in Angular.js
5. Routing in Angular.js
6. How to connect to the API backend Angular.js

In a previous article, we have recovered a list of transactions and added the ability to add new transaction. However, as we have seen it is not related to transactions in the sidebar of our application, the total amount of money. In fact, it’s just text, registered in the html code.

In this article we will look at service facilities available in Angular.js. We will use the services as a single place for access to our transactions, which will allow us to get the data in different controllers. As we look at Dependency Injection in Angular.js.

In Angular.js available whole zoo of different types of service facilities. The most popular of these are the factory and service. Each service is a singleton, that is, there is only one instance of a particular service. It fits perfectly in our terms and conditions: a single point of access to transactions, available from any of the controllers.

Today we are going to use factory, and soon you will understand why.

Let’s start by adding a new file: src/components/transactions_store.service.js with the following content:

// src/components/transactions_store.service.js
angular.module('ngmkdev').factory('TransactionsStore', function() {
  return {
    transactions: []
  }
});

Unlike the controllers, with the services we have more freedom in choosing the name. In this case, TransactionsStore makes sense, because the service will store all of the current transaction.

Now we need to combine this service with TransactionsCtrl. In Angular.js pattern used Dependency Injection. The framework itself is able to resolve the required dependencies, the developer only needs to specify the name of the component that is needed other component applications. It looks to specify dependencies as follows:

// src/app/main/transactions.controller.js
angular.module('ngmkdev').controller('TransactionsCtrl', function($scope, TransactionsStore) {
  // ...
});

Now we have access to our service from the controller for the transaction. Since we used the factory, when you call TransactionsStore function is called from the definition of this service, so we can easily get all the transactions and write their controller attributes as follows:

// src/app/main/transactions.controller.js
angular.module('ngmkdev').controller('TransactionsCtrl', function($scope, TransactionsStore) {
  this.transactions = TransactionsStore.transactions;
  // ...
});

Note that the rest of the code remains the same – Angular.js takes care of the communication controller attribute transactions and service upgrade.

Now we verify functionality in our service. We perform a number of operations are already familiar:

Add a new controller src/app/main/navigation.controller.js, in charge of the side menu in your application:

// src/app/main/navigation.controller.js
angular.module('ngmkdev').controller('NavigationCtrl', function(TransactionsStore) {
  this.transactions = TransactionsStore.transactions;
});

We define it on the sidebar and derive the number of transactions in the parentheses after the item Transactions:

<!-- src/index.html -->

<!-- ... -->
<div class="col-xs-2" ng-controller="NavigationCtrl as navigation_ctrl">
  <h2>Money</h2>
  <h3 class="money-ok">
    500.0
  </h3>
  <ul class="nav nav-pills nav-stacked">
    <li>
      <a href="#">
        <i class="glyphicon glyphicon-th-list"></i>
        Transactions <span class="badge">{{navigation_ctrl.transactions.length}}</span>
      </a>
    </li>
    <li>
      <a href="#"><i class="glyphicon glyphicon-tasks"></i> Settings</a>
    </li>
  </ul>
</div>
<!-- ... -->

Reload the page in the browser (if gulp still has not done so) and try to add a transaction. In addition to updating the table with the transaction is automatically updated and the counter transactions in the sidebar.

Commit all changes, as always, in a project repository on the GitHub: 6d661c0

Homework ( tips ):

Replace static amount of transactions in the sidebar to the present.
Hide the table if you do not have any transactions

The post Writing Services in Angular.js appeared first on Codemotion.

1. Why do I need Angular.js and why he
2. Modern tools and framework Angular.js frontend applications
3. Familiarity with controllers and directives Angular.js
4. Writing Services in Angular.js
5. Routing in Angular.js
6. How to connect to the API backend Angular.js

We are approaching the end of our guidance for Angular.js. There are only two articles: and this is another. In this we consider the Angular.js UI Router – a library to organize navigation between different parts of our application. At the same time, we can rewrite our code so that it uses the templates, instead of storing the entire html to a single file.

Templates in our application are stored in src/app/app_part/. Under app_part I mean a separate part of the application. Now we only main, but in the future may be in the same sub-folder settings, categories and everything else. Fast forward the entire central portion containing the form to add transactions and table with transactions in src/app/main/transactions.html and replace it with:

<div class="col-xs-6" ui-view></div>

It is also necessary to remove the ui-view from above of the container level. Thus, in src/index.html inside the body tag in addition to the script tags we still have the following layout:

<div class="container">
  <div class="col-xs-2" ng-controller="NavigationCtrl as navigation_ctrl">
    <h2>Money</h2>
    <h3 class="money-ok">
      {{navigation_ctrl.transactions_store.sum()}}
    </h3>
    <ul class="nav nav-pills nav-stacked">
      <li>
        <a>
          <i class="glyphicon glyphicon-th-list"></i>
          Transactions <span class="badge">{{navigation_ctrl.transctions_store.transactions.length}}</span>
        </a>
      </li>
      <li>
        <a>
          <i class="glyphicon glyphicon-tasks"></i> Settings
        </a>
      </li>
    </ul>
  </div>
  <div class="col-xs-6" ui-view></div>
</div>

Now we have nothing works, because we did not specify what kind of UI Router’u template output in ui-view at the root link. That’s what this library and deals with: inserts ui-view template corresponding to the application settings.

So, we update src/app/index.js :

'use strict';
angular.module('ngmkdev', ['restangular', 'ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('transactions', {
      url: "/",
      templateUrl: "app/main/transactions.html"
    });
    $urlRouterProvider.otherwise('/');
  });

We use the function of config() to configure the various service providers (one of the types of services), before they begin to be used in other parts of the application.

Here, through a chain of calls to the function state() on the service $stateProvider we specify which template to display inside the ui-view for each page. The last line, $urlRouterProvider.otherwise('/'); said Angular’u what address to redirect the user if the requested route does not exist. Our app now again should work as before.

Few analogies for those familiar with Ruby on Rails: ui-view can be compared with the yield in rail templates and call chain state() – a file routes.rb.

Let’s try to add a real navigation: to link transactions led to the table with the transactions, and settings for future user settings page.

We update our list of routes:

'use strict';
angular.module('ngmkdev', ['restangular', 'ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('transactions', {
      url: "/transactions",
      templateUrl: "app/main/transactions.html"
    })
    .state('settings', {
      url: "/settings",
      templateUrl: "app/settings/settings.html"
    })

    $urlRouterProvider.otherwise('/transactions');
  });

And add the file app/settings/settings.html with such content:

<h2>Settings</h2>

Now, any nonexistent path will be redirected to the page with the transaction. Try to open the following path: http://localhost:3000/, http://localhost:3000/#/transactions, http://localhost:3000/#/settings, http://localhost:3000/#/crap.

Sense from the manual driving bit addresses, so revive links in the sidebar. To this end, there is UI Router directive ui-sref, stating the name of the State (the first argument to the function state ()), which is due to open by clicking on the following link:

<li>
  <a ui-sref="transactions">
    <i class="glyphicon glyphicon-th-list"></i>
    Transactions <span class="badge">{{navigation_ctrl.transctions_store.transactions.length}}</span>
  </a>
</li>
<li>
  <a ui-sref="settings">
    <i class="glyphicon glyphicon-tasks"></i> Settings
  </a>
</li>

That’s enough to our menu earned – by clicking on the links the central part of the application changes. Commit to the changes done in the article: 448daee.

Homework:

• Refer to the documentation UI Router way to highlight the current menu item

The post Routing in Angular.js appeared first on Codemotion.

1. Why do I need Angular.js and why he
2. Modern tools and framework Angular.js frontend applications
3. Familiarity with controllers and directives Angular.js
4. Writing Services in Angular.js
5. Routing in Angular.js
6. How to connect to the API backend Angular.js

In this article we will write a simple controller Angular.js and make it display the data in this table using the built-in Angular directives. Moreover, we revive this form so that it really adds a new row to the table transactions.

Controllers Angular.js are the link between the html-marking and a “model”. The Angular model responsible for just 4 different kinds of objects, which we will discuss later. Omit is that the model and will store all of the data directly in the controller.

The task of the controller, as well as in other MVC frameworks, is to obtain data from the model and display it to the user, or in the other direction, to obtain data from the view and sending them to the model.

First of all, remove src/app/main.controller.js, src/app/main.controller.spec.js, src/app/main.html and src/components/navbar/, which generated the Yeoman for us.

Writing the first controller

Our first controller will be called TransactionsCtrl. According to the naming conventions in Angular.js, controller name is constructed as a “name + Ctrl”.

Create a file src/app/main/transactions.controller.js. In this file, define the controller itself:

//src/app/main/transactions.controller.js
 angular. module ( "ngmkdev") . controller ( 'TransactionsCtrl', function ($ scope) {

 });

Note that we do not need to connect the newly created file manually using the tag <script>. When we run gulp serve, Gulp will begin to monitor changes to files and folders and update the temporary index.html inside the folder .tmp/ (he, by the way, and is loaded when you open the browser localhost:4567). And when it comes time to collect the final version of the application, the command gulp build will do the same and return to us the necessary index.html with pressed down or attached files, necessary libraries and applications.

At this stage, we will not break layout application into multiple files and directly edit src/index.html (and so we removed the folder components/navbar/ and main.html ).

The index.html file replace <div ui-view></div> on the following simple layout:

<!-- src/index.html -->
<div ui-view class="container">
  <div class="col-xs-2">
    <h2>Money</h2>
    <h3 class="money-ok">
      500.0
    </h3>
    <ul class="nav nav-pills nav-stacked">
      <li>
        <a href="#"><i class="glyphicon glyphicon-th-list"></i> Transations</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-tasks"></i> Settings</a>
      </li>
    </ul>
  </div>
  <div class="col-xs-6">
    <h2>Transations</h2>

    <br>
  </div>
</div>

Note: we have not spent a single second on the manual connection Boostrap, but soon moved to its use. Many developing routine processes are automated: we only need to impose himself layout. On connecting the files will take care Gulp, and of a beautiful appearance – Bootstrap.

Now you need to determine the controller on some the html-element in our application to have access to the controller inside and we could use the data from the controller inside the html.

It is best suited for this central unit with the transaction. Define the controller on the parent unit using directives ng-controller:

<!-- src/index.html -->
<div class="col-xs-6" ng-controller="TransactionsCtrl as transactions_ctrl">
   <h2>Transations</h2>
   <br>
</div>

Directive Angular.js responsible for adding new functionality html-markup. This directive goes through the connection of your js-code interface. ng-controller – one of the simplest and most important directives. She attributes part of html code to a particular controller, makes available $scope of this controller inside the html element.

What is the $scope?

$scope – is an object, through which we can get in the html code of access to the data from the model and controller. In Angular.js implemented a complex system upgrade and inheritance Scope. The most important is the $rootScope, which is defined on the entire application and accessible from any part of the code. Controllers provide a $scope, which is available in html-element on which this controller is defined.

Starting with version 1.2, in Angular.js a new syntax for accessing the controller from html: specifying as transactions_ctrl to $scope of this element defines a new object corresponding to the controller. All that we define in TransactionsCtrl controller through this will be available through transactions_ctrl. Thus solving the problem of nested $scope – we always know exactly how to Scope we work.

Let’s see this behavior as an example. Define attribute transactions for the controller as follows:

//src/app/main/transactions.controller.js
angular.module('ngmkdev').controller('TransactionsCtrl', function($scope) {
  this.transactions = [
    { amount: 500.00, date: "08/08/2014", description: "Subscribe to the magazine" },
    { amount: 150.00, date: "07/08/2015", description: "Cocaine" }
  ]
});

And I will bring the transaction using another directive – ng-repeat, responsible for the removal of the collections. Its syntax is self-explanatory.

<!-- src/index.html -->
<div class="col-xs-6" ng-controller="TransactionsCtrl as transactions_ctrl">
  <h2>Transactions</h2>
  <br>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Sum</th>
        <th>Date</th>
        <th>Descriptions</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="transaction in transactions_ctrl.transactions">
        <td>{{transaction.amount}}</td>
        <td>{{transaction.date}}</td>
        <td>{{transaction.description}}</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

To print something from the controller to the screen the user uses braces. Angular.js uses existing template engines like Handlebars or Mustache. Instead, the framework is built right into your template.

But of course we need – we need a way to add new transactions. To do this, we mark up a simple form, paste it immediately after the header <h2>Transactions</h2>:

<!-- src/index.html -->
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input class="form-control" type="text" placeholder="Amount">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only"></label>
    <input type="text" class="form-control" placeholder="Description">
  </div>
  <button type="submit" class="btn btn-default">Add</button>
</form>

Add a template for a new transaction to the controller:

// src/app/main/transactions.controller.js

// ...
  this.resetTransaction = function() {
    this.newTransaction = {
      amount: 0.0,
      date: "01/02/1993",
      description: null
    }
  }
  this.resetTransaction();
// …

The current transaction will be equal to the workpiece from the function immediately after initialization controller resetTransaction().

Now you need to associate the shape of the object newTransaction . To do this, we will use the directive ng-model, which links form element with any controller attribute. Altered INPUT take the form:

<!-- src/index.html -->
<!-- ... -->
<input class="form-control"
       type="text"
       placeholder="Amount"
       ng-model="transactions_ctrl.newTransaction.amount">
<!-- ... -->
<input type="text"
       class="form-control"
       placeholder="Description"
       ng-model="transactions_ctrl.newTransaction.description">
<!-- ... -->

It remains now add form submission process. Fortunately, this has a built-in Angular.js directive ng-submit. Form takes the form:

<!-- src/index.html -->
<form class="form-inline" ng-submit="transactions_ctrl.addTransaction()">
<!-- ... -->
</form>

Add a method addTransaction() in TransactionsCtrl :

// src/app/main/transactions.controller.js
// ...
this.addTransaction = function() {
  this.transactions.push(this.newTransaction);
  this.resetTransaction();
}
// ...

All is ready! Open the browser, fill in the form below, or Hit Enter-button on the form and our table is automatically updated: a new transaction appears at the bottom of the table. Note: we have not written the code that updates a table. Angular.js he understands that when the array of transactions need to be updated corresponding to the array of the html-code. This is one of the coolest features Angular.js – automatic updates and two-way communication between the html-code and application code.

Now, dear reader is invited to move from reading the tutorial to a particular practice. Here are some tasks that you can solve on their own within this sample application:

1. Get rid of these transactions directly in the code.
2. Sort Descending transaction Transaction date – the most recent on top than below the old one.

Forknite repository with an application and implement these tasks. All the code in this article is to commit 12aacf6 In the next article we will learn how to use the service objects and learn about dependency injection in Angular.js.

The post Familiarity with controllers and directives Angular.js appeared first on Codemotion.

1. Why do I need Angular.js and why he
2. Modern tools and framework Angular.js frontend applications
3. Familiarity with controllers and directives Angular.js
4. Writing Services in Angular.js
5. Routing in Angular.js
6. How to connect to the API backend Angular.js

In this article, we will configure the operating environment necessary for productive work with Angular.js. But before moving on to the review of the tools we need, let’s look at a naive solution to the problem of files and folders in the frontend application.

In the picture we can see the structure of the application in which all javascript files are stored in the same folder, without any division into logical components. In index.html – connecting these files bunch of tags <script>. Not get away with this approach: the files will be more and support such an application would be many times more difficult. Other developers in the project will be confused, they have each time to understand that where and how.

This is a problem faced by many front-end developers, and as a result wrote various insturmenty to facilitate the development process.

Tools for frontend development

The first of them – Yeoman. This is a program to generate code similar to the generators of the Ruby on Rails. Generators allow using simple commands in the console to create a new application with a specific directory structure, eliminating the need to do it manually and make it easier to follow the standards in the organization of the code. For Yeoman written many generators, including Angular.js applications ember.js applications simple applications using jQuery, etc.

The second tool – Gulp.js. It can be compared with Rake from Ruby world: Gulpen allows to describe the various tasks that must be performed during development: for example, the compilation of the final css and js files or automatically update the browser page after changes to these files, which saves time developer.

In Angular.js already built modules support, so we do not need to use tools such as Browserify or require.js to manage dependencies between modules.

To install the Yeoman and Gulp.js we need npm. npm – is a package manager for node.js, which, in turn, is the engine for writing server-side javascript applications. We will use npm to install all of our dependencies in the design.

More we need Bower , another package manager on Twitter. Bower is designed for installation dependencies needed in the front. For example, various jQuery plugins or Angular.js library. The advantage of using Bower for these dependencies is that Bower does not download attachments based, so each library will be installed only once. It is very important for the end user – no one wants to download five versions of jQuery.

Generation Angular.js applications

Let’s start with installing node.js and npm. If you have a Mac, you can do this by running brew install node. If you Ubuntu, you can install the package by using apt-get install node. For all installation methods, check the official website of node.js – http://nodejs.org/.

With node.js established and npm, which means we can go directly to the installation Yeoman, Gulp and Bower. This is done in the command npm install yo bower gulp -g. Option -g installs as a global package. This allows the use of command utilities for any directory on your system. Otherwise, the relationship will be downloaded in the current folder in a subfolder node_modules. If an error appears that Gulp is not found in the project folder, try the npm link gulp.

Now we need to install the generator to Yeoman. Instead, the official Angular.js generator we use a copy of it, which is used Gulp. An alternative could be Gulp Grunt.js. Grunt.js similar to Gulp, but slower because of the fact that it does not use node.js. flows It is also more difficult to use.

Perform npm install -g generator-gulp-angular, and thus ends the installation of the first set of a package we want.

Go to the application generation. Create a new folder ngmkdev and it will fulfill yo gulp-angular. Generator prompts us to specify the individual parameters of our application:

1. Select the latest version of Angular.js.
2. Of the additional modules Angular.js we do not need, so skip the selection of angular-animate, angular-cookies, angular-touch and angular-sanitize.
3. Choosing jQuery 2.x. In Angular.js already built a lightweight version of jQuery – jqLite. But we may need more advanced jQuery features, so connect a full library.
4. Since we plan to work with JSON API, then we need a library for easy handling. Of the two options is most popular in the community and has more features Restangular , why dwell on it.
5. For the same reasons we choose UI Router instead of the official of the router.
6. To write your own interface, we will use Twitter boostrap. This will speed up the time for typesetting and make our application a little more beautiful.
7. Once selected Bootstrap, the future will choose the next step Angular UI Bootstrap
8. We choose the good old css at the moment.
9. Just do without CoffeeScript (we love it, but then you do not know it yet?)
10. We will use standard HTML.

Note: we did not connect SASS and CoffeeScript exclusively to pereslozhnyat not material for newcomers to modern front-end development. If you are familiar with these tools, it is recommended that they also use within the project.

Analysis of the structure of the application Angular.js

On generation will leave for some time, after which we get a framework for our application. Let’s see what we have to generate.

package.json

File package.json contains various metadata about your project: project name, version, description.

dependencies – that is an empty list of project dependencies.

devDependencies – it’s dependencies required for application development. Not the fact that we will use all of the dependencies that it has generated Yeoman, but some of them are definitely useful and unnecessary can be removed afterwards.

engines – indicates node.js version, we (implicitly) will use.

{
   "Name": "ngmkdev",
   "Version": "0.0.0",
   "Dependencies": {},
   "DevDependencies": {
     "Gulp": "~ 3.8.10",
     "Gulp-autoprefixer": "~ 2.0.0",
     "Gulp-angular-templatecache": "~ 1.4.2",
     "Del": "~ 0.1.3",
     "Gulp-consolidate": "~ 0.1.2",
     "Gulp-csso": "~ 0.2.9",
     "Gulp-filter": "~ 1.0.2",
     "Gulp-flatten": "~ 0.0.4",
     "Gulp-jshint": "~ 1.9.0",
     "Gulp-load-plugins": "~ 0.7.1",
     "Gulp-size": "~ 1.1.0",
     "Gulp-uglify": "~ 1.0.1",
     "Gulp-useref": "~ 1.0.2",
     "Gulp-ng-annotate": "~ 0.3.6",
     "Gulp-replace": "~ 0.5.0",
     "Gulp-rename": "~ 1.2.0",
     "Gulp-rev": "~ 2.0.1",
     "Gulp-rev-replace": "~ 0.3.1",
     "Gulp-minify-html": "~ 0.1.7",
     "Gulp-inject": "~ 1.0.2",
     "Gulp-protractor": "~ 0.0.11",
     "Gulp-karma": "~ 0.0.4",
     "Gulp-angular-filesort": "~ 1.0.4",
     "Main-bower-files": "~ 2.4.0",
     "Jshint-stylish": "~ 1.0.0",
     "Wiredep": "~ 2.2.0",
     "Karma-jasmine": "~ 0.3.1",
     "Karma-phantomjs-launcher": "~ 0.1.4",
     "Require-dir": "~ 0.1.0",
     "Browser-sync": "~ 1.7.1",
     "Http-proxy": "~ 1.7.0",
     "Chalk": "~ 0.5.1",
     "Protractor": "~ 1.4.0",
     "Uglify-save-license": "~ 0.4.1"
   }
   "Engines": {
     "Node": "> = 0.10.0"
   }
 }

bower.json

In bower.json stored dependencies for the end user. As mentioned earlier, Bower does not download attachments, depending which makes it ideal for front-end dependencies of your application. Here we see, for example, as defined above jQuery, Twitter Boostrap, Restangular.

{
  "name": "ngmkdev",
  "version": "0.0.0",
  "dependencies": {
    "jquery": "~2.1.1",
    "restangular": "~1.4.0",
    "angular-ui-router": "~0.2.13",
    "bootstrap": "~3.3.1",
    "angular-bootstrap": "0.12.x",
    "angular": "~1.3.4"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.4"
  },
  "resolutions": {
    "jquery": "~2.1.1",
    "angular": "~1.3.4"
  }
}

gulpfile.js

gulpfile.js only connects all the files from the folder gulp/. This folder contains the various tasks performed Gulp.js. For example, gulp/build.js collects the final application ready for use in prodakshene. We will not delve into the gulp-syntax problems, we consider it as something other time.

node_modules and bower_components

In node_modules/ npm downloads all the dependencies of package.json. In bower_components/ downloaded all the dependencies of bower.json.

karma.conf.js

It contains the configuration of karma – test framework Angular.js. It we also look at some other time. As to the test environment includes a folder e2e/ (end-to-end) and protractor.conf.js.

For all other folders, which we shall consider in the following articles, contains the application itself, and tests it.

Now let’s run our application and see how it looks in a browser. To do this, we need to execute the command gulp serve (what makes this team can be found in the file gulp/server.js near 34th line). Upon execution, the application automatically opens in a browser. In development mode, it will spin at localhost:3000.

Note: this also launch live reload. If you add something to the index.html, then after saving Gulp file in the browser reloads the page for us.

So, we have generated a framework for our project, reviewed the main application files and folders, and run it. In the next article we will start to write the application. Full application code developed within this series, is available in the GitHub: https://github.com/mkdev-me/ng.mkdev. Each article is devoted to a separate commit to the repository.

Further reading

• Best Practice Recommendations for Angular App Structure
• github.com/Swiip/generator-gulp-angular

The post Modern tools and framework Angular.js frontend applications appeared first on Codemotion.

1. Why do I need Angular.js and why he
2. Modern tools and framework Angular.js frontend applications
3. Familiarity with controllers and directives Angular.js
4. Writing Services in Angular.js
5. Routing in Angular.js
6. How to connect to the API backend Angular.js

Why do I need Angular.js and why he

At some point, you decide to write a web application in which everything runs on AJAX call, the page never reloads, and the interface resembles a full-fledged desktop application rather than a traditional website. You try to do everything with a simple JavaScript and jQuery plugins couple of dozen, and quickly written code will be impossible to maintain, it is impossible to read and impossible to govern.

To avoid such a catastrophic situation, you need a tool that provides a rigid structure of the code and agreement on writing applications, as well as turnkey solutions for known issues (for example, for two-way communication variable in the code and text on the page that displays the value of this variable). This tool – JavaScript MVC (MVC or analogs) frameworks.

There is a high probability that you will not need to use the JS frameworks coming months and \ or years. The area of application is quite specific: the so-called one-page application (Single Page Applications, SPA). Typical examples: Google Drive, Gmail, Evernote. But even in those cases when the task is to write a one-page application that does not always make sense to use a full-fledged JavaScript framework: it all depends on how dynamic and complex UI you are trying to build.

Web version of Evernote – SPA typical application

Nevertheless, the popularity of such tools has never been greater, and at least be aware of their existence is. Tell all available varintah at a time is not possible, so in this series of articles we will look at a framework Angular.js. If you are interested in alternative solutions, you can watch them online http://todomvc.com/ – the authors of the draft implementing the same application on different frameworks, to make it easier for developers to choose the most suitable for them.

Why Angular.js?

From my point of view, Angular.js became a stunning combination of a low entry threshold and a rich set of functions. To start writing on it a small application, you will need about an hour of free time. In this case the fact to learn and to use all its features, will need months. While there was not a single front end problems I could not solve with the help of this framework. And I used it for cross-platform mobile applications with rich functionality, small widgets within applications and even video editor.

Angular.js at the moment is the most popular framework, whose development is supported by the guys from Google. In addition to the rich standard library, for “angulyara” written many custom extensions, with a part of which we will introduce within this series. There is even a special framework over Angular.js, which greatly facilitates writing cross-platform mobile applications: http://ionicframework.com

What about Angular.js 2.0?

The current version Angular.js, where this series of articles will be based – 1.3. The developers have stated that the version 2.0, which will be released when it is not known (but no earlier than year and a half), is incompatible with the current version of the framework, but it will retain most of the concepts embodied in it. Also, the developers promise to support the version 1.x for several years after the release of 2.0.

This means that at least another 2 years Angular.js 1.x will continue to dominate on it is still written thousands of applications and a variety of jobs (especially in Europe) indicate precisely the frameworks in the requirements. Of course, at some point you will have to spend a couple of hours trying to deal with the new version 2.0 and, most likely, a couple of days to switch from 1.x to 2.0. Nevertheless, Angular.js knowledge will not be thrown in the trash, because, as you already know, this issue is not a specific technology, and the ability to understand any of them, and apply for its task

The announcement of version 2.0 can be read here: http://angularjs.blogspot.se/2014/10/ng-europe-angular-13-and-beyond.html. More good article with more technical details: http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/

So what are we going to do?

In this series of articles we will write a small finance manager: start with the work environment configuration and structure of the project and will finish the work with the API. On the way to get acquainted with the basic concepts Angular.js, routing, some third-party libraries, and a few essential tools of modern front-end development. At the end of the series, you should be able to write a simple application to Angular.js and know where to look in order to learn how to develop more complicated things.

The post Why do I need Angular.js and why he appeared first on Codemotion.

1. Why do I need Angular.js and why he
2. Modern tools and framework Angular.js frontend applications
3. Familiarity with controllers and directives Angular.js
4. Writing Services in Angular.js
5. Routing in Angular.js
6. How to connect to the API backend Angular.js

In this article we will learn how to connect our application with a simple API using Restangular library. Restangular – a popular alternative to the built-in self Angular.js library for working with REST API. On its advantages over the standard library are well described on the project’s page at github: https://github.com/mgonto/restangular. For example, it supports all the HTTP methods and devoid of various nasty bugs embedded in Angular.js library.

As an API, we will use a small web application, written in the framework, of Sinatra, which is written in Ruby. You do not need to write ruby code. To run the API on your machine, perform the following steps:

1. Install Ruby if you do not yet have. Online set of guidelines on this subject, including the official website https://www.ruby-lang.org/en/
2. Download the app git clone https://github.com/mkdev-me/sinatra-api-example
3. Go to the folder with the application and run bundle install
4. Then run rake db:create db:migrate
5. Finally, run the application command ruby app.rb

Done! Your little backend ready to go at localhost:4567. Now we can update Angular.js application to work with the API.

We have already connected Restangular step setup of our application: you can see it in the list of dependencies in a file bower.json. Moreover, the library is already loaded as a module, pay attention to the line in src/app/index.js :

angular.module('ngmkdev', ['restangular', 'ui.router', 'ui.bootstrap'])

Therefore, we can go directly to the code. First of all, we need to set the base URL, using which Restangular will build more links. To do this, the library has RestangularProvider provider that we can use in the config block in src/app/index.js :

// src/app/index.js
angular.module('ngmkdev', ['restangular', 'ui.router'])
  .config(function ($stateProvider, $urlRouterProvider, RestangularProvider) {

    RestangularProvider.setBaseUrl("http://localhost:4567");
    < … >
});

The main reference for the default will be a link to the server with our API. Now update TransactionsStore so that it uses data from the server. Add two new methods: loadTransactions load all the data from the server, and addTransaction add a new transaction.

// src/components/transations_store.serve.js
angular.module('ngmkdev').factory('TransactionsStore', function(Restangular) {
  return {
    transactions: [],
    loadTransactions: function() {
      this.transactions = Restangular.all('transactions').getList().$object;
    },
    addTransaction: function(transaction) {
      var that = this;
      return Restangular.all('transactions').post({transaction: transaction}).then(function() {
        that.transactions.push(transaction);
      })
    },
    sum: function() {
      var sum = 0;
      this.transactions.forEach(function(el) {
        sum += parseFloat(el.amount);
      })
      return sum;
    }
  }
});

Note the function then(). It is performed only when the completed request to add transaction. This mechanism is called the promises, which is an alternative for the usual jQuery callback mechanism. promise The difference is that we do not need to keep in mind when a callback is executed. Angular.js thus provides a guarantee that if the function A has finished its execution, the function B is executed (and only if the function A really well done).

In this case, we ensure that the array is updated only after the transaction is successfully saved a new transaction to the server. To reduce the number of server requests we will keep in memory all the transactions and update the array manually, instead of each time getting all transaction server.

Most Restangular functions return a promise-objects. For example, getList(), which we use for all transactions. To get yourself a transaction, we can either use then(), a method of $object, which immediately returns us all transactions.

Using the method of all(), we specify with some resource work. Restangular he guesses which links to send and receive data, provided that your application complies with REST API standards. Thus, post() will create a new record, get() will get a record, etc.

Controller code has not undergone major changes:

// src/app/main/transactions.controller.js
angular.module('ngmkdev').controller('TransactionsCtrl', function($scope, TransactionsStore) {

  TransactionsStore.loadTransactions();

  this.addTransaction = function() {
    TransactionsStore.addTransaction(this.newTransaction);
    this.resetTransaction();
  }

  this.resetTransaction = function() {
    this.newTransaction = {
      amount: 0.0,
      date: "1993-02-01",
      description: null
    }
  }
  this.transactions = TransactionsStore.transactions;
  this.resetTransaction();
});

Now all new transactions will be stored in the database and then reload the page, they will not be lost.

You probably created numerous test transactions to see how everything works. Now you have to be on them as something to get rid of. Commit to the changes: a0629f.

Homework:

• Add and implement the delete button transaction.

This is the last article on Angular.js course. For 6 issues, we met with all the basic tools of modern frontend development and, following the best practices, a full written application running with the backend via the API. The knowledge gained will serve as an excellent foundation for writing more complex applications Angular.js. Write in the comments what you think about this series and how is your study and application Angular.js.

The post How to connect to the API backend Angular.js appeared first on Codemotion.

Node.js (or simply Node) – is a server platform for working with JavaScript through a V8 engine. JavaScript performs an action on the client side, and the Node – on the server. With Node can write full applications. Node can work with external libraries, call the command of JavaScript code and run the Web Server role.

What is the advantage Node?

C Node is easier to scale. If you connect to thousands of users Server Node operates asynchronously, that is, sets priorities and allocates resources more competently. Java is, for example, allocates for each connection a separate thread.

Location Node generally come from?

Node appeared in 2009 thanks to Ryan Dalu. Prior to that, the servers reigned approach “one thread per connection”, but Dahl came up to use the system, which focuses on events. That is reacting to an act or omission, and allocates a resource. The main purpose of Node – to build scalable network servers.

Some of the major companies using Node?

Of course, this is an incomplete list:

Source: strongloop.com

eBay is gradually moving to the Node, as well as a web version of PayPal. In LinkedIn more in 2012 moved to the Ruby On Rails on the Node and immediately felt the benefits of this platform: 27 servers showed a 20-fold increase in speed.

What can I write to Node?

A full program for the Web, Linux, OS X and Windows.

And if more?

No problem. Node is useful for creating API – there are already comfortable library like Loopback.

In this language, you can write cross-platform applications – in conjunction mobile + desktop Node helps to achieve synchronicity. For example, when you write a message with the phone, it immediately appears on the laptop and on the Web.

And something fashionable Node knows?

Of course. Node – is the home of all “Internet of things» (Internet of Things, IoT). Thermostats, fitness trackers – all this can be programmed via the Node.

Node accidentally losing popularity?

Quite the contrary. Here is a chart of interest to the Node since 2009 in Google search:

Interest in the Node is growing rapidly and already passes on this indicator, Ruby and Objective-C.

NodeJS, otherwise known as Node. JS development environment, is a runtime environment, based on the V8 interpreter, which converts JavaScript into a full-fledged general-purpose language. Event-driven programming methods are used in Node.JS web development. Node has its own API for interactions with input-output devices. That is mainly used for high-performance web servers and distributed web applications development, although Node.JS developers may also use it for desktop window applications.

Now after a brief terminological definition of Node by an experienced Node.JS developer, we’d like to provide some basic info on web development with node and express.
So let’s take a glance under the bonnet of Node.JS, see it main elements and sort out pros and cons.

JavaScript in Node. JS development

JavaScript is an easy-to-learn scenario programming language featuring automatic memory management. Development of JavaScript was focused on the similarity of the syntax with the Java language, the simplicity of working with it for people without specialized education and lowest possible entry threshold. To date, JavaScript is widely used as a basic scenario language for interactive web pages. JavaScript is an implementation of the ECMAScript scenario language (ECMA-262 standard).

Scripting or glue languages operate with ready software components describing scenarios of their interactions. Most of them (including JS) are interpreted.

Being an interpreted language brings two major advantages to JS. First – due to step-by-step execution it allows some in-flight adjustments, second one is cross-platform nature of scenarios, they could be launched wherever there is an interpreter.

JavaScript also features automatic memory management that carries memory allocation and releasing for program objects based on their use. It strips this additional responsibility off the developers, which is quite useful for novice and amateur coders.
Gradation of learning is generally a great trait of JavaScript. One can study the basics and that would be enough for most use cases, while interested users can go deeper, up to serious professional levels.
JavaScript’s usability and ease of learning led to its widest spread, making it the standard scripting language for HTML. All modern browsers for major operating systems have built-in JavaScript interpreters.

However, JS also has some shortcomings:

• Lack of dependency control means and namespaces isolation;
• Lack of modularity and the components management system;
• Lack of standard general purpose functions libraries, file system interaction and input-output devices control functions;
• Software developed with the use of interpreted languages is considerably slower than with the use of traditional system languages.

Node.JS development was started specifically for leveling these disadvantages

Node. JS application

Ryan Dahl proposed Node development in 2009 as a means of creating effective scalable web-servers. Initially, platform ideology was focused on event-driven programming, as opposed to the traditional system of multi-threaded programming. The advantages of an event-oriented model are considerable simplicity and Node. JS performance. Node.JS has brought event-driven, highly scalable, callback operated goodness to web-servers, ditching their high concurrency problems, thus boosting up performance. And since JavaScript was so popular Node’s target audience – the enormous web-development community – immediately got their hands on a comprehensible and easy to use, yet powerful tool.

Dependencies, package management, etc.

First two named JS shortcomings are effectively dealt with Node’s Unified API, allowing combining Node with browsers and Document Databases, and the “npm” – default Node’s packet manager.

Libraries

Node’s audience is huge. Seriously huge. Immense community support brings tons of open-source libraries, some providing such supermodern functionality, we’re just looking forward to use. Industry is very favourable to Node.JS, there’s even a NodeConf held each Summer. Community has developed several frameworks assisting all the input-output issues and providing support for accelerating software development.

V8 in Node.JS development environment

V8 interpreter is an open source JavaScript (JS) engine developed by Google. Its task is the analysis of scripts written in JS and their execution. It differs favorably from competing engines by the speed, scalability, and efficient memory manager, which is why it was chosen as the basis for the Node. V8 usage is a great deal of overcoming speed issues of interpreted languages.

So as you see, Node.JS is a modern and powerful instrument, highly supported in industry and providing great possibilities for web-server development. Highly skilled team of Node.JS pros is very effective and able to show record breaking development terms.

The post Introduction to Node.JS development appeared first on Codemotion.