Day 24: Automatically build ember project with Yeoman _ one months

So far, our series has discussed JavaScript technologies such as Bower, Angularjs, Gruntjs, PhoneGap, Meteor, Ember, and Timelinejs. Today's 30-day study of 30 new technologies, I decided to learn the front-end development of efficiency tools yeoman. This article will first introduce the basic situation of yeoman, then we will use Yeoman to develop a ember application. This article will not introduce the basics of emberjs, so please refer to day 19.

What Yeoman is.

Yeoman according to the official statement, it is not just a tool, or a workflow. It actually includes three parts yo, grunt, Bower, respectively, for project start-up, file operation, package management.

Yo:yo is a project initialization tool that generates a set of project files that are required to start a type of project.

Gruntjs:gruntjs is a JavaScript-based command-line build tool that can help developers automate repetitive work. Read Day 5 for more information.

Bower:bower is a client-side technology Package Manager that can be used to search, install, and uninstall network resources such as JavaScript, HTML, and CSS. Read Day 1 for more information. Why do I care about yeoman?

If you need to convince yourself to learn yeoman, you can read the Whyyeoman on the Yeoman website. Installation

Using NPM Installation:

NPM Install-g Yeoman

Installing the Yeoman Ember Generator

The Yeoman Dependency Builder provides scaffolding for Web projects. All modern JavaScript mv* frameworks have a corresponding generator. This article uses ember:

NPM install-g Generator-ember

We will develop a social bookmarking application that allows users to submit and share links. You can view this application here. This application is the same as we developed on Day 19. GitHub Warehouse

Today's example application code can be obtained from GitHub. Creating Ember Applications

Start application development now. First create the project directory, then run the Yo ember Command, which asks if you are using Twitter Bootstrap. I'm used to using bootstrap in my own project, so I chose it.

; mkdir getbookmarks
cd getbookmarks
; yo ember

     _-----_
    | | | --(O)--|   . --------------------------.
   ---------  |    Welcome to Yeoman,    |
    ( __ )   |   Ladies and gentlemen!  |
    /___a___\   ' __________________________ '
     |  ~  |
   __'.___.' __


[?] Would to include the Twitter Bootstrap for Sass? Yes

After that, Yeoman will create a ember application that automatically uses Bower and NPM to install dependencies.

Now let's look at the yeoman-generated ember application. The application has three top-level directories: app, Node_modules, and test. There are also some configuration files:. BOWERRC,. Gitignore,. Jshintrc, Gruntfile.js and Package.json. The directory structure is shown below.

All application-related code is in the app directory. The directory structure follows ember best practices.

The Bower_components directory includes client dependencies, such as Ember, Twitter Bootstrap, and so on. Bower installs all dependencies within all folders.

The image directory includes application-related images. Yeoman optimizes the images within the image directory.

Index.html includes all ember.js dependencies, all bootstrap dependencies, and build annotations (Gruntfile.js can replace or remove referenced, not optimized scripts and style sheets).

The scripts directory contains controller, view, model, and route for Ember applications.

The Styles directory contains application-related CSS files.

The templates directory contains the handlebar templates that are applied.

Now we can start the preview server:

Grunt Server

This will open the application using the system default browser:

Generate Story Model

We created a ember model:story in the Getbookmarks application developed in Day19. Yeoman's secondary generators can be used to build parts of the project, including model. Run the following command to generate story model:

Yo Ember:model Story

The output of the command is as follows:

   Create App/scripts/models/story_model.js Invoke Ember:controller:/usr/local/lib/node_modules/generator-ember/mode L/index.js Create app/scripts/controllers/stories_controller.js Create App/scripts/controllers/story_edit_co     Ntroller.js Create app/scripts/routes/stories_route.js Create app/scripts/routes/story_route.js Create App/scripts/routes/story_edit_route.js Invoke Ember:view:/usr/local/lib/node_modules/generator-ember/controller /index.js Create app/scripts/views/story_view.js Create App/scripts/views/story_edit_view.js Crea Te app/scripts/views/stories_view.js Create App/templates/story.hbs Create App/templates/sto RY_EDIT.HBS Create App/templates/stories.hbs Create App/scripts/views/bound_text_field_view.js in Voke ember:router:/usr/local/lib/node_modules/generator-ember/controller/index.js Conflict App/scripts/rout Er.js [?] Overwrite app/sCripts/router.js?
 Overwrite Force app/scripts/router.js

This generates story_model.js in the App/scripts/models directory, and the corresponding view, controller, and route are generated.

Modified under Story_model:

Emberapp.story = DS. Model.extend ({
  url:DS.attr (' string '), Tags:DS.attr (' string '),
    fullname:DS.attr (
    ' string '), Title:DS.attr (' string '),
    excerpt:DS.attr (' string '),
    submittedOn:DS.attr (' Date ')
});

Restart the grunt server for changes to take effect. Installing Ember Localstorage Adapters

We will use HTML 5 localstorage to store the data. Install the adapter using Bower.

Bower Install--save Ember-localstorage-adapter

Then update the index.html page and add dependencies:

<script src= "Bower_components/ember-localstorage-adapter/localstorage_adapter.js" ></script>

Update app/scripts/store.js at the same time, configure application using Lsadapter:

Getbookmarks.store = DS. Store.extend ();
Getbookmarks.applicationadapter = DS. Lsadapter.extend ({
  namespace: ' Stories '
});

Update route

Modify Router.js:

Getbookmarks.Router.map (function () {

  this.resource (' index ', {path: '/'});
  This.resource (' story ', {path: '/story/:story_id '});
  This.resource (' Story_edit ', {path: '/story/new '});

Submit a new report

We first add the form that will appear after the user accesses the #/story/new. Modify App/templates/story_edit.hbs:

<form class= "form-horizontal" role= "form" > <div class= "Form-group" > <label for= "title" class= "Col-sm-2 Control-label" >Title</label> <div class= "col-sm-10" > <input type= "Title" CLA ss= "Form-control" id= "title" Name= "title" placeholder= "title of the" link "required> </div> </div > <div class= "Form-group" > <label for= "Excerpt" class= "Col-sm-2 Control-label" >excerpt</la bel> <div class= "col-sm-10" > <textarea class= "Form-control" id= "excerpt" name= "excerpt" Plac Eholder= "Short description of the" link "required></textarea> </div> </div> <d IV class= "Form-group" > <label for= "url" class= "col-sm-2 Control-label" >Url</label> <div class= "col-sm-10" > <input type= "url" class= "Form-control" id= "url" name= "url" placeholder= "URL of the link "Required> </div> </div> <div class= "Form-group" > <label for= "tags" class= "col-sm-2 control-l Abel ">Tags</label> <div class=" col-sm-10 "> <textarea id=" Tags "class=" Form-control "NA Me= "tags" placeholder= "Comma seperated List of tags" rows= "3" required></textarea> </div> ;/div> <div class= "Form-group" > <label for= "FullName" class= "col-sm-2 Control-label" >full Nam e</label> <div class= "col-sm-10" > <input type= "text" class= "Form-control" id= "FullName" n 
      Ame= "FullName" placeholder= "Enter your full Name like Shekhar Gulati" Required> </div> </div> <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <button type= "Sub MIT "class=" Btn btn-success "{action ' save '}}>submit story</button> </div> </div> &L
 T;/form>

Now, access http://localhost:9000/#/story/new can see the form that submitted the report.

Update Storyeditcontroller to persist data into local storage:

Getbookmarks.storyeditcontroller = Ember.ObjectController.extend ({

  save:function () {
    var url = $ (' #url '). val ();
        var tags = $ (' #tags '). Val ();
        var fullname = $ (' #fullname '). Val ();
        var title = $ (' #title '). Val ();
        var excerpt = $ (' #excerpt '). Val ();
        var Submittedon = new Date ();
        var store = this.get (' store ');
        Console.log (' Store. ' +store ');
        var story = Store.createrecord (' story ', {
            url:url,
            tags:tags,
            fullname:fullname,
            title:title,< C14/>excerpt:excerpt,
            Submittedon:submittedon
        });
    Story.save ();
    This.transitiontoroute (' index ');
  }
);

List all reports

The next feature we're going to implement is to display a list of reports in the sidebar.

In Application_route.js, we get all the reports from local storage.

Getbookmarks.applicationroute = Ember.Route.extend ({
    model:function () {
        var stories = this.get (' Store '). FindAll (' story ');
        return stories;
    }
});

Then we update application.hbs and add a link to the title of each report:

<div> <nav class= "NavBar navbar-default navbar-fixed-top" role= "navigation" > <div class= "navbar -header "> <button type=" button "class=" Navbar-toggle "data-toggle=" collapse "data-target=". Navbar-ex1-co Llapse "> <span class=" sr-only ">toggle navigation</span> <span class=" ico N-bar "></span> <span class=" Icon-bar "></span> <span class=" Icon-ba
        R "></span> </button> <a class=" Navbar-brand "href=" # ">GetBookmarks</a> </div> <div class= "collapse navbar-collapse navbar-ex1-collapse" > <ul class= "NA V navbar-nav pull-right "> <li>{{#link-to ' story_edit '}}<span class=" Glyphicon glyphicon-plus "& gt;</span> Submit story{{/link-to}}</li> </ul> </div> </nav> ;d IV class= "container" Id= "main" > <div class= "Row" > <div> <div class= "col-md-3" >
                          <div class= "OK sidebar-nav" > <table class= ' table ' >
                          <thead> <tr><th>recent stories</th></tr>
                            </thead> {{#each controller}} <tr><td>
                              {{#link-to ' story ' This}}
                            {{title}}}
                        {{/link-to}} </td></tr> {/each}} </table> </div> </div> <div class= "col-md-9" &G
                    T
 {{outlet}} </div> </div> </div> </div> </div>

The user interface for the application is refreshed. View a separate report

The last feature to add is that users can view individual reports when they visit Http://localhost:9000/#/story/:id. : ID corresponds to story id. Modify Story_routejs.

Getbookmarks.storyroute = Ember.Route.extend ({
  model:function (params) {
        var store = this.get (' store ');
        Return Store.find (' story ', params.story_id);
  }
});

Modify App/templates/story.hbs:

Build for the production environment
Finally, we run the Grunt build command to create a distributable application. The Grunt Build command converts the source files in the app directory to distributable applications in the Dist directory.

Grunt Build
 
That's all for today. Keep feedback.

Original Day 24:yeoman ember--the Missing Tutorial
Translation Segmentfault