2.1 Front-End Application Setup

Hi. In this episode, we'll set up the angular front end application with the help of Yeoman. But first, let's talk about two ways to develop application. The first one is to make an angular application as the part of Rails asset pipeline. This way we can create hybrid application which makes the transition much easier. So for example, we can implement most of the application as the classic Rails application. And all the, the most interactive parts deliver as angular application. But in this course, we will see how to develop front end and back end as much independently as possible. So Rails application will serve as API. So let's get drawing. First, we need to have Yeomen installed. For that, we also need to have installed, Node js. So for that, you can go to nodejs.org website and install it from here or to install it via Homebrew with brew install nodejs. Now that we have Node js installed, let's install Yeoman with npm install globally yo. That will download a lot of packages and install Yeoman to our system. Okay. Nice. Now also we need angular generator, so let's install the data with npm installed globally generator-angular, like this. Okay, so now we're ready to bootstrap our application. So here let's create a folder for our project, and we call it sw-front, and let's cd into it. And right here let's generate your angular. It will ask us several questions. So first of all, do we want to anonymously report usage statistics. So now we won't be using Compass, but we will use Twitter Bootstrap. And also we will use all these resources as well. Okay, our project is ready so let's have a look, and let's create a git repository. We initialize it. We add everything to it, and we make our first initial commit, like this. Okay, so let's have a look at this project. So right here we have several hidden files, like gitignore and git and so on and travis. And the first file is Gruntfile. And this file is responsible for different tasks like running the server or running karma test, et cetera. We'll look into it, but even now we'll do one thing. So let's open it. And right here in watch section, here you can see that Grunt watches for different kind of files for changes. And when they are changed, it runs specific tasks. So this one right here, JavaScript hint is quite time consuming. So I prefer to get rid of it. I prefer to run it by myself separately, but not after every file save. So I'm gonna just comment this out and add tasks as an empty right here. And the same thing I will do for tests, and here you can see that it also runs karma. I personally again, prefer not to run karma and just to run karma as a separate process. Okay, and I'm gonna save this file. Also, we have this bower.json file. And here are listed all dependencies, like angular, json3, et cetera. So if we need something else, we simply add it here and run npm install to fetch it. So also we have the Karma configurations that we're gonna look a little bit later, and package.json file, where we have all development environment dependency like grunt packages. And as you guessed if we need something, we just add it here. We have several folders. First of all there's the app folder and task folder where the application resides and tasks reside. Node_modules has all these node modules which are listed in package.json. So let's have a look in application folder. Here we have bower_components, that's all the dependencies we have, like Angular, jQuery, et cetera. We have fonts, images styles, pretty standard stuff. So our application resides in scripts folder and in views. And of course the bootstrap is index.html file so let's have a look. Here we have the standard HTML5 file with different conditionals for our favorite Internet Explorer. We have some meta tags. Then we have here the bootstrap.css file included for us, and our main.css where we can style our application as well. And right here on the body tag, we have our AngularJS application initialized. And it is called swFrontApp. Okay, so next we have this div with class container, but what is more important is this ng-view. So here is where all views are rendered. So as you can see, Yeoman sets us up for developing with routes right away. So next we have some Google analytic code, and then we have the bower dependencies included right here. And then our own scripts like application and main js for controller. So let's have a look at them. So, let's go to app js. So here where we define our Angular application with angular.module. And we name it swFrontApp. And then we inject four angular modules. And after that right here, we have the config blog where we set routes. For now there is only one rule for route route and it will render templateUrl which resides in views/main.html and the controller. Also we have here the otherwise, so any other route will be redirected to route route. So pretty standard stuff, that just was generated to bootstrap it for us. So let's have a look at this main.html file. So here we have this simple static HTML page without anything much of an interest, okay? Then the next thing is main controller, so let's open it, main.js in controller's folder. So in here on the module, we define controller, main controller. And just define array variable on this scope with these three values. But if we go back to main.html, you'll see that and scroll through it, and see what it is, consists of. You'll see that this variable is not used here. So let's fix it and try to use it just to make sure that everything works together fine. So for that we will define unordered list, and here we will have a list item with ng-repeat. And here we define that this thing in awesomeThings. And we're just gonna type this thing out on the screen. Let's save it. Now let's go back to terminal and run server. So Grunt gives us server. And we can run it with grunt serve. [BLANK_AUDIO] And here we have our page. And here we have our list items. So they are rendered successfully. Other from that, this page has nothing at all here. So links doesn't work. But we have pretty face. That's good. So another cool thing that Grunt gives us is leave reload feature. So now if I just make it like this, and change something like Contact for Hello, and save this file. You will see that page is automatically reloaded, and you can see the change right here. How cool is that? Also you probably heard that Angular is in good relationships with testing, and that's no lie. So let's have a look. So here we have test folder and inside of it we have a spec folder, controllers and main.js created for us. So this is a basic controller test, and this is quite common what happens here. So first we get our replication, our module, then right here we inject independences. So we inject controller, and we instantiate this controller. And then we write in our examples. We'll see in a little bit more details about testing later in the course. But now let's just have a look how it works. Let's open karma.conf file. That's where the configuration for Karma are stored. And you can see here that we use the base part and frame with Jasmine. And then we require files like angular, angular-mocks, and all the resources, and all the application, actually. Then we have port, et cetera. But what I want here is I want to set this autoWatch to true. And that simply means that it will behave itself like leave reload. So every time I change some files for tests, the test will be rerun. And that's cool. And here we have the browser and the singleRun set to false. So now let's go to terminal and run karma start. And it will start Chrome at the background. And you can see that it fires tests, and they are green. So let's have a look how we can fail them. So I go back to the test, and let's change 3 to 4 and save it. And if you go to terminal, we'll see that tests have been run already, and we are failing. That's cool. So let's go back and fix it back. Green color is much nicer. Okay, nice, so we have everything wired up by Yeoman. We have leave reload server and Karma tests runner all set up and ready to go. In the next episode, will set up Rails application and connect these two apps via proxy. So thank you very much for your time and see you in the next episode.