YeoMan(1)Environment, TODO Demo Implementation

sillycat

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

最近访客更多访客>>

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
浏览 1012
评论(0)
分类:Web前端
查看更多

发表评论

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

相关推荐

alexnet模型-通过CNN卷积神经网络的动漫角色识别-不含数据集图片-含逐行注释和说明文档.zip: 本代码是基于python pytorch环境安装的。下载本代码后，有个环境安装的requirement.txt文本首先是代码的整体介绍总共是3个py文件，十分的简便本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。运行01生成txt.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集运行02CNN训练数据集.py,会自动读取txt文本内的内容进行训练，这里是适配了数据集的分类文件夹个数，即使增加了分类文件夹，也不需要修改代码即可训练训练过程中会有训练进度条，可以查看大概训练的时长,每个epoch训练完后会显示准确率和损失值训练结束后，会保存log日志，记录每个epoch的准确率和损失值最后训练的模型会保存在本地名称为model.ckpt 运行03pyqt界面.py，就可以实现自己训练好的模型去识别图片了

电商购物网站 SSM毕业设计附带论文.zip: 电商购物网站 SSM毕业设计附带论文启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

题目源码2024年强网杯全国网络安全挑战赛 Pwn题目chat-with-me源码: 强网杯

mobilenet模型-基于深度学习AI算法对建筑装饰风格识别-不含数据集图片-含逐行注释和说明文档.zip: 本代码是基于python pytorch环境安装的。下载本代码后，有个环境安装的requirement.txt文本首先是代码的整体介绍总共是3个py文件，十分的简便本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。运行01生成txt.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集运行02CNN训练数据集.py,会自动读取txt文本内的内容进行训练，这里是适配了数据集的分类文件夹个数，即使增加了分类文件夹，也不需要修改代码即可训练训练过程中会有训练进度条，可以查看大概训练的时长,每个epoch训练完后会显示准确率和损失值训练结束后，会保存log日志，记录每个epoch的准确率和损失值最后训练的模型会保存在本地名称为model.ckpt 运行03pyqt界面.py，就可以实现自己训练好的模型去识别图片了

2-数字化转型对企业劳动力就业的影响的研究数据（2001-2021年）.zip: 随着数字技术和企业数字化转型的推进，企业的人力资源管理方式也在不断的变化，尤其是企业数字化转型对劳动力就业产生了深远的影响。传统制造企业的工作模式一般是人工操作，处于低劳动力成本下的位置，而数字化转型要求企业应用物联网、云计算、大数据等先进技术，提高生产效率和减少人力成本。数字化转型对企业劳动力就业的影响是多方面的，除替代性影响外，还会给企业带来新的机会，促进员工自我提升和企业人力资源管理意识的提高。本数据的整理让大家能够更清晰了解数字化转型对有关企业劳动力就业的影响。相关数据指标企业年龄，资产负债率，流动比率，股权集中度，所有制性质，总资产收益率，地区人均GDP

非常好的电子设计小软件GIF2BMP非常好用的软件.zip: 非常好的电子设计小软件GIF2BMP非常好用的软件.zip

学报稿件管理系统 SSM毕业设计附带论文.zip: 学报稿件管理系统 SSM毕业设计附带论文启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

OpenSSL 1.1加密开源库: OpenSSL 是一个用于实现安全通信的软件包，它由一组密码学函数库组成。它的主要目标是通过使用公开的密码学算法来保护数据的机密性、完整性和身份验证。它支持对称加密、非对称加密、数字签名、证书管理等功能。

文书用电子小印生成器V124: 可以根据需要生成小印章，自己输入文字、选择日期、调整颜色。

锐捷三擎云办公解决方案3.0全面提升用户体验和数据安全: 内容概要：文章介绍了锐捷三擎云办公解决方案3.0的关键技术和应用场景。该解决方案通过多项技术创新提升了用户体验和数据安全性，支持多层防护、自研协议、多终端适配和高效资源管理等功能。适用人群：企业IT管理人员和技术爱好者。使用场景及目标：该方案适用于各种企业的云办公需求，包括普通办公、研发、移动办公等，主要目标是提高用户办公体验，加强数据安全管理和提升资源利用效率。其他说明：解决方案还包括全面的用户管理、桌面管理和策略管理，确保系统的整体稳定性和易管理性。同时，支持第三方设备和平台的灵活纳管，实现业务敏捷。

springboo母婴商城: 摘要现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本母婴商城系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此母婴商城系统利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发.母婴商城系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。关键词：母婴商城系统；SSM框架；Mysql；自动化

w 是一个大于10的无符号整数，若 w 是 n (n ≥ 2)位的整数，函数求出w的低 n-1位的数作为函数值返回: c语言基础代码练习题

基于Java的SQL慢查询镜像分析工具设计源码: 该项目是一款基于Java语言开发的SQL慢查询镜像分析工具源码，总共有53个文件，其中包含38个Java源文件、4个XML配置文件、3个属性文件、2个Git忽略文件、2个PNG图片文件、1个Markdown文件、1个JPG图片文件、1个SQL文件和1个YML文件。该工具旨在辅助开发人员高效识别和解决MyBatis数据库操作中的性能瓶颈，尤其是针对那些可能导致应用程序响应缓慢或资源消耗过高的慢SQL查询问题。

【java毕业设计】KTV点歌系统源码（ssm+jsp+mysql+说明文档+LW）.zip: 功能说明：实现功能包括管理员：个人中心、用户管理、歌曲库管理、歌曲类型管理、点歌信息管理，用户：个人中心、歌曲库管理、点歌信息管理等功能。环境说明：开发语言：java 框架：ssm jdk版本：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse 部署容器：tomcat7+

Screenrecorder-2024-11-07-21-33-20-304.mp4: Screenrecorder-2024-11-07-21-33-20-304.mp4

stata软件安装包（stata18）（stata软件安装包下载与安装）: 软件主体：stata软件安装包。版本：stata18。价格：免费。安装教程：请阅读本人相对应的安装教程文章。描述：安装教程保姆级别仔细，直接按步骤来就行了。本人申明：本安装包需要的人可以免费获取，不用于商业买卖，只用于学术研究。（如果可以帮到大家就给个关注吧）

基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM: 【作品名称】：基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【项目介绍】：基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础看懂代码，自行调试代码并解决报错，能自行添加功能修改代码。

IMG_3659.JPG: IMG_3659.JPG

数据分析 - 机器学习写诗 - python: 数据分析 - 机器学习写诗 - python Chinese_poem、lyrics_writer、poet_master

性能优化与加载时间控制.docx: 性能优化与加载时间控制.docx

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论