Create Your First Web Application Through Yeoman

Hi there.  As you know my name. Today we ‘re going to walk through creating a new web application using Yeoman, a workflow comprised of tools for improving your productivity and speed during development.

Yeoman The Basic Tool To Make Web Applications

Yeoman is comprised of three primary tools–Yo for application, Bower for front-end package management, and Grunt for building your projects. Let’s dive right into creating a new to do application from scratch. To get Yeoman installed, you will need to use Node and NPM. Make sure you have recent versions of both available so that everything works correctly.

How to Install the Yeoman

So we’re just going to run NPM installing, you, and allow it to install its dependencies, And we’re now going to install an AngularJS Yeoman generator for scaffolding out a new Angular app. Now, you only need to do this once, so NPM installs generator angular. Fantastic. Now, we can run you angular to begin scaffolding a new application.

This will ask us some questions, such as do you want to include Twitter Boot strap? I am going to say yes. It gives us options about whether we want to use Compass and a few other angular resources. What this process is now doing is fetching any dependencies needed for our AngularJS workflow and scaffolding out any files required for the application.

Next, I am going to preview what this looks like. So I am going to use Grunt server. And this is now firing up a local server for me to review my application. And there we go. Because this project is using Live Reload, I can make changes to my sources, and without me having to do anything else, it will refresh my browser for me, so I get this real time view of what’s going on inside my app.

Now, I am going to go to my angular controller that was scaffolder out. And what I’m doing right now is I’m creating a new array of todos–so item one, item two, and item three. And these are some simple todo items that will be reflected in my app. I am now going to go back to main.

HTML. And we’re going to define a template for these todos. My todos is going to be the title of this page. And I am going to start defining my template, so new paragraph. And I am going to use NG repeat, which is an angular directive for allowing me to basically repeat something for different items in a collection. So I have got the repeat, to do, and to do, so for each to do in my todos array. And I am now going to just declare a new input field, And I am using NG model which represents a new angular mode with two-way binding. As you can see, it’s now reflecting the todos array that we defined earlier inside my page. Let’s now add the ability to create some new todo items. And I am going to define a new form for this.

So let’s go down and create a brand new form. And I don’t need the action on it. But what I am going to do is that NG submits, which is another angular interactive. And I am going to say, call add todo whenever this form is submitted.

What we are now going to do is just add some dives for styling, some div wrappers for styling, add some classes on that. Now, this is done, by implementing this procedure you can create a new web application using Yeoman.

Leave a Reply

Your email address will not be published. Required fields are marked *