首先可能需要安装npm,并且配置环境.

1.打开Dos(命令提示符).按Windows徽标键+R组合键,输入cmd然后按回车键进入Dos.

2.安装Yeoman.在Dos下输入npm install -g yo.

3.安装Grunt.在Dos下输入npm install -g grunt-cli.

4.安装Bower.在Dos下输入npm install -g bower.

5.安装Generator-angular的0.9.8版本.在Dos下输入npm install -g generator-angular@0.9.8

6.安装Generator-karma.在Dos下输入npm install -g generator-karma.

7.安装Angular-strap.在Dos下输入npm install -g angular-strap.

8.安装Bootstrap.在Dos下输入npm install -g bootstrap.

9.进入AngularJs的项目文件夹,我的是:D:\AngularJsItem,在这里新建TemplateItem文件夹.然后在Dos下进入文件夹,先输入d:回车,先复制路径,然后输入cd+空白+鼠标右键粘贴,然后回车,再输入yo angular TemplateItem,按用户要求自动生成项目.第一个问题是:Would you like to use Sass(With Compass)?这个输入n然后回车就好.暂时没用上.

第二个问题是:Would you like to include Bootstrap?输入y然后回车,因为项目之后要使用BootStrap.第三个问题是:Which modules would you like to include?(Press <space> to select)... .这个选中全部,然后按回车就好了(如果前面括号里面有*,就是已选中状态).

10.如果缺少以上图片中的文件夹.需要将这些也安装.在Dos下输入npm install -g 文件夹名称.缺少哪个就安装哪个.

11.接下来在项目里面添加bower_components文件夹,如果有就不用新建.直接到npm目录,我的是D:\NodeJs\Install\node_global.-g都是安装到这个目录.找到node_modules目录,将里面的文件夹复制到bower_components目录下.

12.在项目添加一个app文件夹(和bower_components同级),如果有就直接在app目录下新建文件夹bootstrap,然后在bootstrap下面新建index.html文件.

下面是我的index.html的页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="../../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
</head>
<body ng-app="userApp">
　　<stk-userlist-panel></stk-userlist-panel>

　　<script src = "../../bower_components/jquery/dist/jquery.js"></script>
　　<script src = "../../bower_components/angular/angular.js"></script>
　　<script src = "../../bower_components/angular-animate/angular-animate.js"></script>
　　<script src = "../../bower_components/angular-cookies/angular-cookies.js"></script>
　　<script src = "../../bower_components/angular-resource/angular-resource.js"></script>
　　<script src = "../../bower_components/angular-route/angular-route.js"></script>
　　<script src = "../../bower_components/angular-sanitize/angular-sanitize.js"></script>
　　<script src = "../../bower_components/angular-touch/angular-touch.js"></script>
　　<script src = "../../bower_components/angular-strap/dist/angular-strap.js"></script>
　　<script src = "../../bower_components/lodash/dist/lodash.js"></script>
　　<script type="text/javascript">
　　　　var app = angular.module('userApp', [
　　　　　　'ngAnimate',
　　　　　　'ngCookies',
　　　　　　'ngResource',
　　　　　　'ngRoute',
　　　　　　'ngSanitize',
　　　　　　'ngTouch',
　　　　　　'mgcrea.ngStrap'
　　　　]);

　　　　app.service('userService', function userService() {
　　　　// AngularJS will instantiate a singleton by calling "new" on this function
　　　　//1辅助方法: 从localStorage中加载监视列表
　　　　var loadModel = function(){
　　　　　　var model = {
　　　　　　　　userList: localStorage['userManager.userList'] ?
　　　　　　　　JSON.parse(localStorage['userManager.userList']) : []
　　　　　　};
　　　　　　return model;
　　　　};

　　　　//2辅助方法: 将监视列表保存到localStorage中
　　　　var saveModel = function(){
　　　　　　localStorage['userManager.userList'] =
　　　　　　JSON.stringify(Model.userList);
　　　　};

　　　　//3辅助方法: 使用lodash找到指定ID的监视列表
　　　　var findById = function(cid){
　　　　　　　　return _.find(Model.userList, function(user){
　　　　　　　　return parseInt(user.cid) === parseInt(cid);
　　　　　　});
　　　　};

　　　　//4辅助方法:以编号查找编号是否存在,因为编号是来标志对象的(唯一的)
　　　　var findIndexByCid = function(cid){
　　　　　　var index = -1;
　　　　　　var userArr = JSON.parse(localStorage['userManager.userList']);
　　　　　　for(var i = 0; i < userArr.length; i++){
　　　　　　　　if(parseInt(userArr[i].cid) === parseInt(cid)){
　　　　　　　　　　index = i;
　　　　　　　　　　break;
　　　　　　　　}
　　　　　　}
　　　　　　return index;
　　　　}

　　　　//4返回所有监视列表或者按指定的ID进行查找
　　　　this.query = function(cid){
　　　　　　if(cid){
　　　　　　　　return findById(cid);
　　　　　　}else{
　　　　　　　　return Model.userList;
　　　　　　}
　　　　};

　　　　//5在监视列表模型中保存一个新的监视列表
　　　　this.save = function(user){
　　　　　　if(findIndexByCid(user.cid) > 0){
　　　　　　　　alert('编号已存在,编号是唯一的,请换一个编号!');
　　　　　　　　return 'failed';
　　　　　　}else{
　　　　　　　　Model.userList.push(user);
　　　　　　　　saveModel();
　　　　　　　　return 'success';
　　　　　　}
　　　　};

　　　　//6从监视列表模型中移除指定的监视列表
　　　　this.remove = function(user){
　　　　　　_.remove(Model.userList, function(userModel){
　　　　　　return userModel.cid === user.cid;
　　　　});
　　　　　　saveModel();
　　　　};

　　　　//修改方法
　　　　this.update = function(user){
　　　　　　var userArr = JSON.parse(localStorage['userManager.userList']);
　　　　　　var index = findIndexByCid(user.cid);
　　　　　　userArr[index] = user;
　　　　　　saveModel();
　　　　}

　　　　//7为这个单例服务初始化模型
　　　　var Model = loadModel();
　　　　});

　　　　//指令
　　　　app.directive('stkUserlistPanel', function ($location, $modal, userService) {
　　　　return {
　　　　　　templateUrl: 'templates/userlist-panel.html',
　　　　　　restrict: 'E',
　　　　　　cache: false,
　　　　　　scope: {},
　　　　　　link: function($scope){
　　　　　　//2初始化变量
　　　　　　$scope.user = {};

　　　　　　//添加页面
　　　　　　var addListModal = $modal({
　　　　　　　　scope: $scope,
　　　　　　　　templateUrl: 'templates/addlist-modal.html',
　　　　　　　　show: false
　　　　　　});

　　　　　　//修改页面
　　　　　　var updateListModal = $modal({
　　　　　　　　scope: $scope,
　　　　　　　　templateUrl: 'templates/updatelist-modal.html',
　　　　　　　　show: false
　　　　　　});

　　　　　　//3将服务中的模型绑定到该作用域
　　　　　　$scope.userList = userService.query();

　　　　　　//4显示addlist modal
　　　　　　$scope.showModal = function(){
　　　　　　$scope.user = {};
　　　　　　　　addListModal.$promise.then(addListModal.show);
　　　　　　};

　　　　　　//5根据模态框中的字段创建一个新的列表
　　　　　　$scope.createUser = function(){
　　　　　　　　var status = userService.save($scope.user);
　　　　　　　　if(status == 'success'){
　　　　　　　　　　addListModal.hide();
　　　　　　　　　　$scope.user = {};
　　　　　　　　}
　　　　　　};

　　　　　　//6删除目标列表并重定向至主页
　　　　　　$scope.deleteList = function(user){
　　　　　　　　userService.remove(user);
　　　　　　　　$location.path('/');
　　　　　　};

　　　　　　//进入修改页面的函数
　　　　　　$scope.showUpdateModal = function(user){
　　　　　　　　$scope.user = user;
　　　　　　　　updateListModal.$promise.then(updateListModal.show);
　　　　　　}

　　　　　　//修改的函数
　　　　　　$scope.updateUser = function(user){
　　　　　　　　userService.update(user);
　　　　　　　　updateListModal.hide();
　　　　　　};
　　　　}
　　};
});

</script>
</body>
</html>

13.在bootstrap下新建一个文件夹templates,在里面新建三个html文件.

userlist-panel.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>userlist-panel</title>
<style>

</style>
</head>
<body>
　　<div class = "panel panel-info">
　　　　<div class = "panel-heading">
　　　　　　<span class = "glyphicon glyphicon-eye-open"></span>
　　　　　　UserList
　　　　　　<!-- 1在单击时调用showModal()处理器 -->
　　　　　　<button type = "button"
　　　　　　　　class = "btn btn-success btn-xs pull-right"
　　　　　　　　ng-click = "showModal();"
　　　　　　>
　　　　　　　　<span class = "glyphicon glyphicon-plus"></span>
　　　　　　</button>
　　　　</div>

　　　　<div class = "panel-body">
　　　　　　<!-- 2如果没有监视列表存在,就显示帮助文本 -->
　　　　　　<div ng-if = "!userList.length" class = "text-center">
　　　　　　　　Use
　　　　　　　　<span class = "glyphicon glyphicon-plus">
　　　　　　　　</span>
　　　　　　　　　　to create a user
　　　　　　</div>

　　　　　　<div class = "list-group">
　　　　　　　　<!-- 3重复监视列表中的每个列表,并创建链接 -->

　　　　　　　　<div class="list-group-item"
　　　　　　　　　　ng-repeat = "u in userList track by $index">

　　　　　　　　　　<a ng-click = "showUpdateModal(u);">
　　　　　　　　　　　　{{ u.cid }}
　　　　　　　　　　</a>

　　　　　　　　　　<a ng-click = "showUpdateModal(u);">
　　　　　　　　　　　　{{ u.name }}
　　　　　　　　　　</a>

　　　　　　　　　　<a ng-click = "showUpdateModal(u);">
　　　　　　　　　　　　{{ u.description }}
　　　　　　　　　　</a>

　　　　　　　　　　<a>
　　　　　　　　　　　　<!-- 4调用deleteList()处理器删除该列表 -->
　　　　　　　　　　　　<button type = "button" class = "close"
　　　　　　　　　　　　　　ng-click = "deleteList(u);"
　　　　　　　　　　　　>
　　　　　　　　　　　　　　&times;
　　　　　　　　　　　　</button>
　　　　　　　　　　</a>

　　　　　　　　</div>

　　　　　　</div>

　　　　</div>

　　</div>
</body>
</html>

addlist-modal.html文件代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addlist-modal</title>
<style>

</style>
</head>
<body>
　　<div class = "modal" tabindex = "-1" role = "dialog">
　　　　<div class = "modal-dialog">
　　　　　　<div class = "modal-content">
　　　　　　　　<div class = "modal-header">
　　　　　　　　　　<!-- 1在单击时调用$modal.$hide() -->
　　　　　　　　　　<button type = "button" class = "close"
　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　>
　　　　　　　　　　　　&times;
　　　　　　　　　　</button>

　　　　　　　　　　<h4 class = "modal-title">
　　　　　　　　　　　　Create New User
　　　　　　　　　　</h4>
　　　　　　　　</div>

　　　　　　　　<!-- 2命名该表单用于验证过程 -->
　　　　　　　　<form role = "form" id = "add-user" name = "listForm">
　　　　　　　　　　<div class = "modal-body">

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-name">
　　　　　　　　　　　　　　　　编号
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　　　<!-- 3将输入绑定到userList.firstname -->
　　　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-cid"
　　　　　　　　　　　　　　　　placeholder = "cid this user"
　　　　　　　　　　　　　　　　ng-model = "user.cid"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-name">
　　　　　　　　　　　　　　　　姓名(昵称)
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　<!-- 3将输入绑定到userList.firstname -->
　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　id = "user-name"
　　　　　　　　　　　　　　placeholder = "name this user"
　　　　　　　　　　　　　　ng-model = "user.name"
　　　　　　　　　　　　　　required
　　　　　　　　　　　　/>
　　　　　　　　　　</div>

　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　<label for = "user-description">
　　　　　　　　　　　　　　描述
　　　　　　　　　　　　</label>

　　　　　　　　　　　　<!-- 4将输入绑定到userlist.lastname -->
　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　id = "user-description"
　　　　　　　　　　　　　　maxlength = "40"
　　　　　　　　　　　　　　placeholder = "description this user"
　　　　　　　　　　　　　　ng-model = "user.description"
　　　　　　　　　　　　　　required
　　　　　　　　　　　　/>
　　　　　　　　　　</div>

　　　　　　　　</div>

　　　　　　　　<div class = "modal-footer">
　　　　　　　　　　<!-- 5在单击时创建列表,但如果表单是无效的,那么它将处于禁用状态 -->
　　　　　　　　　　<button type = "submit"
　　　　　　　　　　　　class = "btn btn-success"
　　　　　　　　　　　　ng-click = "createUser();"
　　　　　　　　　　　　ng-disabled = "!listForm.$valid"
　　　　　　　　　　>
　　　　　　　　　　　　Create
　　　　　　　　　　</button>

　　　　　　　　　　<button type = "button"
　　　　　　　　　　　　class = "btn btn-danger"
　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　>
　　　　　　　　　　　　Cancel
　　　　　　　　　　</button>
　　　　　　　　</div>
　　　　　　</form>
　　　　</div>
　　</div>
</div>
</body>
</html>

updatelist-modal.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>updatelist-modal</title>
<link href="../../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<style>

</style>
</head>
<body>
　　<div class = "modal" tabindex = "-1" role = "dialog">
　　　　<div class = "modal-dialog">
　　　　　　<div class = "modal-content">
　　　　　　　　<div class = "modal-header">
　　　　　　　　　　<!-- 1在单击时调用$modal.$hide() -->
　　　　　　　　　　<button type = "button" class = "close"
　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　>
　　　　　　　　　　　　&times;
　　　　　　　　　　</button>

　　　　　　　　　　<h4 class = "modal-title">
　　　　　　　　　　　　Update Old User
　　　　　　　　　　</h4>
　　　　　　　　</div>

　　　　　　　　<!-- 2命名该表单用于验证过程 -->
　　　　　　　　<form role = "form" id = "add-user" name = "listForm">
　　　　　　　　　　<div class = "modal-body">

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-name">
　　　　　　　　　　　　　　　　编号
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　　　<!-- 3将输入绑定到userList.firstname -->
　　　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-cid"
　　　　　　　　　　　　　　　　placeholder = "cid this user"
　　　　　　　　　　　　　　　　ng-model = "user.cid"
　　　　　　　　　　　　　　　　ng-disabled="true"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-name">
　　　　　　　　　　　　　　　　姓名(昵称)
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　　　<!-- 3将输入绑定到userList.firstname -->
　　　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-name"
　　　　　　　　　　　　　　　　placeholder = "name this user"
　　　　　　　　　　　　　　　　ng-model = "user.name"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

　　　　　　　　　　　　<div class = "form-group">
　　　　　　　　　　　　　　<label for = "user-description">
　　　　　　　　　　　　　　　　描述
　　　　　　　　　　　　　　</label>

　　　　　　　　　　　　　　<!-- 4将输入绑定到userlist.lastname -->
　　　　　　　　　　　　　　<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-description"
　　　　　　　　　　　　　　　　maxlength = "40"
　　　　　　　　　　　　　　　　placeholder = "description this user"
　　　　　　　　　　　　　　　　ng-model = "user.description"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

　　　　　　　　　　</div>

　　　　　　　　　　<div class = "modal-footer">
　　　　　　　　　　　　<!-- 5在单击时创建列表,但如果表单是无效的,那么它将处于禁用状态 -->
　　　　　　　　　　　　<button type = "submit"
　　　　　　　　　　　　　　class = "btn btn-success"
　　　　　　　　　　　　　　ng-click = "updateUser(user);"
　　　　　　　　　　　　　　ng-disabled = "!listForm.$valid"
　　　　　　　　　　　　>
　　　　　　　　　　　　　　Update
　　　　　　　　　　　　</button>

　　　　　　　　　　　　<button type = "button"
　　　　　　　　　　　　　　class = "btn btn-danger"
　　　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　　　>
　　　　　　　　　　　　　　Cancel
　　　　　　　　　　　　</button>
　　　　　　　　　　</div>
　　　　　　　　</form>
　　　　　　</div>
　　　　</div>
　　</div>
</body>
</html>

最后的效果图:

AngularJS小练习20170508的更多相关文章

  1. 【AngularJS】—— 3 我的第一个AngularJS小程序

    通过前面两篇的学习,基本上对AngularJS的使用有了一定的了解. 本篇将会自己手动写一个小程序,巩固下理解. 首先要注意的是,引用AngularJS的资源文件angular.min.js文件. 由 ...

  2. AngularJS小知识点一

    AngularJS是由谷歌公司及一个由开发者组成的个人社区共同打造.其主要优势在于帮助使用者在web应用程序中实现必要的动态视图.它是通过原生的MVC(模型-视图-控制器)功能来增强HTML. PS: ...

  3. （四）Angularjs - 小实例（2）

    自定义指令编写时钟 模板 <!-- 模板文件 --><html> <!-- 内置的ng-app指令通知编译器启动AngularJS框架--> <body ng ...

  4. （三）Angularjs - 小实例

    AngularJS处理数据表格 使用 np-repeat 指令 <table> ... <!-- 这里使用ng-repeat指令来重复数据生成表格 --> <tr ng- ...

  5. angularjs小知识

    字符串和对象的转化  :angular.fromJson(jsonStr) 对象转字符串 :angular.toJson(obj) jsonStr:json字符串 obj:对象

  6. angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）

    本次做一个简单的关于动态生成select的练习 在实现上有两种方式: 其一.通过ng-repeat来实现 其二.通过ng-option来实现 在页面效果上,两种实现的效果都一样 但是在数据选择的数据从 ...

  7. AngularJS 技术总结

    学习AngularJS,并且能在工作中使用到,算是很幸运了.因此本篇也会搜集各种资料,进行分享. 书籍分享 AngularJS权威指南 常用链接 AngularJS API文档 AngularJS 用 ...

  8. angularJS 二

    angularJS 2.1  ngForm <!DOCTYPE html> <html lang="zh-cn" ng-app> <head> ...

  9. vue学习笔记

    来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件.关于vue有一些点是文档中没有提及的,记录一下以便以后查询- 一.Vue的特点 新一代 Vue.js 框架非常关注如何用极少的外部特性 ...

随机推荐

  1. Spring Bean状态（转）

    Spring-beans的核心实体是BeanDefinition和BeanFactory.前者映射我们的定义,后者则是依据定义生产bean的工厂.  上图是spring beans的静态结构图,更多是 ...

  2. bzoj1046 [HAOI2007]上升序列——LIS

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1046 倒序求最长下降子序列,则得到了每个点开始的最长上升子序列: 然后贪心输出即可. 代码如 ...

  3. Ubuntu下搭建基于apache2的gerrit+gitweb服务器

    说明:Ubuntu版本12.04 1. 配置gerrit管理帐号 1 sudo adduser gerrit 增加sudo权限: 1 sudo usermod -a -G sudo gerrit 切换 ...

  4. 【411】COMP9024 Assignment1 问题汇总

    1. 构建 Makefile 文件后运行错误,undefined reference to 'sqrt' 实际上是没有链接math数学库,所以要 $gcc test.c –lm //-lm就是链接到m ...

  5. 无线 WIFI 的13个信道频率范围（转载）

    转自:http://cnzhx.net/blog/13-channels-of-wifi/ 目前主流的无线WIFI网络设备不管是802.11b/g还是802.11b/g/n 一般都支持13个信道.它们 ...

  6. J20170520-ts

    手取り   净收入,实收额;用手抓住,到手

  7. c语言程序设计案例教程（第2版）笔记（四）—指针、分配存储空间、文件

    零散知识点: 指针类型:每个变量占用的首单元地址称为这个变量的存储地址. “&”为“取地址运算符”.格式:&  变量名.功能:返回指定变量的存储地址. “*”为“取内容运算”.格式:* ...

  8. Java中关键字continue、break和return的区别

    Java中关键字continue.break和return的区别: continue:跳出本次循环继续下一次循环 break:   跳出循环体,继续执行循环外的函数体 return:   跳出整个函数 ...

  9. 题解报告：hdu 1789 Doing Homework again（贪心）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1789 Problem Description Ignatius has just come back ...

  10. Java编码格式

    简介 编码问题一直困扰着开发人员,尤其在 Java 中更加明显,因为 Java 是跨平台语言,不同平台之间编码之间的切换较多.本文将向你详细介绍 Java 中编码问题出现的根本原因,你将了解到:Jav ...