AngularJs With Yeoman + Rails API

With the article, I want to show you guy about angular with yeoman generator project and rails api. In the basic, if you are a beginer with angular maybe the first thing you often ask your self how can I generate the code application that allow me to write angularjs with smoothly and easy to understand. For my experience, it is just a little bit but not very much. I found out the good one is Yeoman gernerate. Yes it is google for you to create generate project and write code with angularjs.

What is the Yeoman ?

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts. Through our official Generators, we promote the "Yeoman workflow". This workflow is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.

With a modular architecture that can scale out of the box, we leverage the success and lessons learned from several open-source communities to ensure the stack developers use is as intelligent as possible.

As firm believers in good documentation and well thought out build processes, Yeoman includes support for linting, testing, minification and much more, so developers can focus on solutions rather than worrying about the little things.

Started the demo project

In this project demo, I use the my requirements as below

• Node.js
  • 6.10.0
• npm
  • 3.10.10
• Ruby
  • 2.2.0 or later
• Bundler
  • 1.7.10 or later
• Install the yo on your pc

$ sudo npm install -g grunt-cli bower yo generator-karma generator-angular

Generate angularjs project with yeoman

With yeoman, you can generate the good structure for your angularjs project. so now let's start to do it.

$ mkdir demo-yeoman-porject && cd $_

Run yo angular, , optionally passing an app name:

$ yo angular demo-yeoman-project

When you see the note application that ask you

---
Would you like to use Gulp (experimental) instead of Grunt? (y/N) 

Please type N because we need to use grunt for this our demo project.

Would you like to use Sass (with Compass)? (Y/n) 

Please type Y because we need use Sass in our demo project.

? Which modules would you like to include? (Press <space> to select, <a> to toggle all, <i> to inverse selection)
❯◉ angular-animate.js
 ◯ angular-aria.js
 ◉ angular-cookies.js
 ◉ angular-resource.js
 ◯ angular-messages.js
 ◉ angular-route.js
 ◉ angular-sanitize.js
 ◉ angular-touch.js

Please choose a to toggle all, however you can unselect anything that you think it is not neccessary for your project. And don't worry you miss select them, you can add them back after generate code. After you generate the project you will see the structure as below: Ok!!! Let's start run grunt to build project and grunt serve to run project, you see as this image, http://localhost:9000 is the project url on development This view html in this project get from file app/index.html. You can see this image our url project is http://localhost:9000/#!/ is not http://localhost:9000, Now need to change it to http://localhost:9000/.

How can we change it ?

Ok!! We will use the simple, it is called:

• Angularjs UI Router: sets up route for angularjs application.
• HTML Base Tag: specifies the base url.

Open file app/index.html. And fill the code base as below

    <meta charset="utf-8">
    <base href="/">
    <title></title>
    ---

After that we need to add ui-router library, with yeoman you can add more library angularjs or plugin by using npm or bower. In this case we use bower

$ bower install angular-ui-router --save

code above it will auto add angular-ui-router into your file bower.json, we run again grunt and grunt serve . Open file app/scripts/app.js

'use strict';

/**
 * @ngdoc overview
 * @name demoYeomanProjectApp
 * @description
 * # demoYeomanProjectApp
 *
 * Main module of the application.
 */
angular
  .module('demoYeomanProjectApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.router'
  ])
  .config(['$urlRouterProvider', '$locationProvider',
    function ($urlRouterProvider, $locationProvider) {
      $locationProvider.html5Mode(true);
      $urlRouterProvider.otherwise('/');
    }
]);

You can check on your application is missing the middle contents, because in your middle content is the view of MainCtrl, so if you want to call it, you need to $stateProvider of angular-ui-router. In file app/scripts/app.js

'use strict';

/**
 * @ngdoc overview
 * @name demoYeomanProjectApp
 * @description
 * # demoYeomanProjectApp
 *
 * Main module of the application.
 */
angular
  .module('demoYeomanProjectApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.router'
  ])
  .config(['$urlRouterProvider', '$locationProvider', '$stateProvider',
    function ($urlRouterProvider, $locationProvider, $stateProvider) {
      $locationProvider.html5Mode(true);
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('main', {
          url: '/',
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
        });
    }
]);

and on file app/index.html we need to insteal <div ng-view=""></div> with <ui-view></ui-view>

Components

What is components ? Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. Now we create a simple component, first we create the path mkdir app/scripts/components. We will create hello world component by following the structure: folder [name component], [name-component.js] and [name-component.html], as you can see this image: let's add this code <script src="scripts/components/hello-world/hello-world.js"></script> into app/index.html. now we fill code into app/script/components/hello-world/hello-world.js

'use strict';

/**
 * @ngdoc component
 * @name demoYeomanProjectApp.component:helloWorld
 * @description
 * # helloWorld
 */
angular.module('demoYeomanProjectApp')
  .component('helloWorld', {
    templateUrl: 'scripts/components/hello-world/hello-world.html',
    controller: 'helloWorldCtrl'
  })
  .controller('helloWorldCtrl', [
    function() {
      var $ctrl = this;
      $ctrl.title = 'Hello World';
    }
  ]);

and in app/scripts/components/hello-world/hello-world.html

<h1 ng-bind="$ctrl.title"></h1>

Let's us it in app/views/main.html

<div class="jumbotron">
  <hello-world></hello-world>
</div>

Conclusion

With this article is simple way for you to learn angularjs and generate faster. However it is just for the beginner to learn. if you need more information about that please comments and contact to me about this.

Documentation

• Generator Angular
• Angularjs Components
• Source Code