Modern tools and framework Angular.js frontend applications

Series “Developing applications on single-Angular.js”

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