YeoMan(1)Environment, TODO Demo Implementation

sillycat

浏览: 2539720 次
性别:
来自: 成都

最近访客更多访客>>

huageng520

learnmore

u012363178

ymgjava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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>

<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>


<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

分享到：

Symfony(3)Environment Update and Configu ... | Scala Dependency and SBT

2014-06-10 07:03
浏览 1013
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论