首先可能需要安装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. lucene DocValues——本质是为通过docID查找某field的值 看图

    Why DocValues? The standard way that Solr builds the index is with an inverted index. This style bui ...

  2. ssh 无密码互通

    节点n1 n2 n3 互通 第一步:n1->n2互通 admin@n1 > ssh-keygen -d

  3. 【转】浏览器中输入url后发生了什么

    原文地址:http://www.jianshu.com/p/c1dfc6caa520 在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复 ...

  4. bzoj 2303: [Apio2011]方格染色【并查集】

    画图可知,每一行的状态转移到下一行只有两种:奇数列不变,偶数列^1:偶数列不变,奇数列^1 所以同一行相邻的变革染色格子要放到同一个并查集里,表示这个联通块里的列是联动的 最后统计下联通块数(不包括第 ...

  5. 51nod 1190 最小公倍数之和 V2【莫比乌斯反演】

    参考:http://blog.csdn.net/u014610830/article/details/49493279 这道题做起来感觉非常奇怪啊--头一次见把mu推出来再推没了的-- \[ \sum ...

  6. 洛谷P2082 区间覆盖(加强版)（珂朵莉树）

    传送门 虽然是黄题而且还是一波离散就能解决的东西 然而珂朵莉树还是很好用 相当于一开始区间全为0,然后每一次区间赋值,问最后总权值 珂朵莉树搞一搞就好了 //minamoto #include< ...

  7. 我理解的 js 异步成长总结

    本文是自己的理解,如果有错误的地方,还请各路大神指出 首先说下我最常用的 Promise getHandlePickupQrPromise() { // 定义返回 Promise对象 // Promi ...

  8. eurekaclient向eurekaserver注册使用真实ip设置

    有时候eureka.instance.prefer-ip-address=true不管用,解决办法如下.

  9. 题解报告：hdu1995汉诺塔V（递推dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1995 Problem Description 用1,2,...,n表示n个盘子,称为1号盘,2号盘,. ...

  10. 转 Dockerfile 常用指令 - 每天5分钟玩转 Docker 容器技术（16）

    是时候系统学习 Dockerfile 了. 下面列出了 Dockerfile 中最常用的指令,完整列表和说明可参看官方文档. FROM指定 base 镜像. MAINTAINER设置镜像的作者,可以是 ...