YeoMan(1)Environment, TODO Demo Implementation

YeoMan(1)Environment, TODO Demo Implementation

1. Installation and Environment
Check my node and nom version
>node --version && npm --version
v0.10.28 1.4.10

Install yo, bower, grunt, actually I already have bower and grunt.
>sudo npm install --g yo
>sudo npm install bower -g
>sudo npm install grunt -g

Check the installation
>yo --version && bower --version && grunt --version
1.1.2 1.3.5 grunt-cli v0.1.13 grunt v0.4.5

2. Install the yo generator and Build the Template
>yo
yo>install a generator
[generator-angular]
>sudo npm install -g generator-angular

>yo
yo>Run the Angular generator
Answer all the choices

Tips, I will also check this generator Run the Angular-require generator

3. Start to Understand the Template
>grunt serve
This command will start the http server, we will access the website from here>
http://localhost:9000

Open the file and edit it, we change it and the browser will automatically reload that.

4. Start to Write the CRUD
<html ng-app>
<input type=“text” ng-model=“name” …/>
<li ng-repeat=“todo in todos”>
..snip…
</li>
<li ng-repeat=“todo in todos | filter:query | orderBy: orderProp”>
<form role=“form” ng-submit=“addTodo()”>
<button class=“btn btw-danger” ng-click=“removeTodo($index)” aria-label=“Remove”>X</button>

Example to Create, List, Delete Objects
main.html
<div class="container">
<h2>My todos</h2>
  <!-- todo form -->
  <form role="form" ng-submit="addTodo()">
    <div class="row">
      <div class="input-group">
        <input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
        <span class="input-group-btn">
          <input type="submit" class="btn btn-primary" value="Add">
        </span>
      </div>
    </div>
  </form>
  <p></p>

  <!-- todo list -->
  <p class="input-group" ng-repeat="todo in todos">
    <input type="text" ng-model="todo" class="form-control">
    <span class="input-group-btn">
      <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button>
    </span>
  </p>
</div>

main.js
'use strict';
angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope) {
    $scope.todos = [
      'Item1',
      'Item2',
      'Item3',
      'Item4'
    ];
    $scope.addTodo = function () {
         $scope.todos.push($scope.todo);
           $scope.todo = '';
    };
    $scope.removeTodo = function (index) {
            $scope.todos.splice(index, 1); //remove 1 ele begin from index
     };
  });

5. bower Library Management
>bower list
List all the dependencies, there is difference between bower and NPM, actually, NPM is for node packages which can be grunt dependencies or some other packages needed to build the projects. Bower is the tool to manage the front end dependencies.

Search for Packages
>bower search angular-ui-sortable
Search results:     angular-ui-sortable git://github.com/angular-ui/ui-sortable.git

Install the Package
>bower install --save angular-ui-sortable jquery-ui

Once we type the command to install that, we can see all the packages under bower_components.

That is cool, suppose I need to type and put the .js file in my index.html since I add 2 JS library. But I stop and start the grunt serve, it does everything for me.

Put Order in My List Page
Manually add modules in app.js
angular
  .module('mytodoApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.sortable'
  ])

Change the Look and feel, Use the ui.sortable
  <div ui-sortable ng-model="todos">
    <p class="input-group" ng-repeat="todo in todos" style="padding:5px 10px; cursor: move;">
      <input type="text" ng-model="todo" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button>
      </span>
    </p>
  </div>

That is cool, I can drag and drop to change the order of the list.


References:
http://yeoman.io/codelab.html#toc

angular blogs
http://sillycat.iteye.com/blog/2007538
http://sillycat.iteye.com/blog/2007546
http://sillycat.iteye.com/blog/2007988

https://code.angularjs.org/1.2.17/docs/guide/services
https://code.angularjs.org/1.2.17/docs/guide

你可能感兴趣的:(Environment)