AngularJS小练习20170508

首先可能需要安装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">

　　<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
　　　　　　
　　　　　　<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">
　　　　　　
　　　　　　<div ng-if = "!userList.length" class = "text-center">
　　　　　　　　Use
　　　　　　　　<span class = "glyphicon glyphicon-plus">
　　　　　　　　</span>
　　　　　　　　　　to create a user
　　　　　　</div>

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

　　　　　　　　</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">
　　　　　　　　　　
　　　　　　　　　　<button type = "button" class = "close"
　　　　　　　　　　　　ng-click = "$hide();"
　　　　　　　　　　>
　　　　　　　　　　　　×
　　　　　　　　　　</button>

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

<form role = "form" id = "add-user" name = "listForm">
　　　　　　　　　　<div class = "modal-body">

<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-cid"
　　　　　　　　　　　　　　　　placeholder = "cid this user"
　　　　　　　　　　　　　　　　ng-model = "user.cid"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

<input type = "text"
　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　id = "user-name"
　　　　　　　　　　　　　　placeholder = "name this user"
　　　　　　　　　　　　　　ng-model = "user.name"
　　　　　　　　　　　　　　required
　　　　　　　　　　　　/>
　　　　　　　　　　</div>

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

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

<form role = "form" id = "add-user" name = "listForm">
　　　　　　　　　　<div class = "modal-body">

<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-cid"
　　　　　　　　　　　　　　　　placeholder = "cid this user"
　　　　　　　　　　　　　　　　ng-model = "user.cid"
　　　　　　　　　　　　　　　　ng-disabled="true"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

<input type = "text"
　　　　　　　　　　　　　　　　class = "form-control"
　　　　　　　　　　　　　　　　id = "user-name"
　　　　　　　　　　　　　　　　placeholder = "name this user"
　　　　　　　　　　　　　　　　ng-model = "user.name"
　　　　　　　　　　　　　　　　required
　　　　　　　　　　　　　　/>
　　　　　　　　　　　　</div>

<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">
　　　　　　　　　　　　
　　　　　　　　　　　　<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的更多相关文章

【AngularJS】—— 3 我的第一个AngularJS小程序
通过前面两篇的学习,基本上对AngularJS的使用有了一定的了解. 本篇将会自己手动写一个小程序,巩固下理解. 首先要注意的是,引用AngularJS的资源文件angular.min.js文件. 由 ...
AngularJS小知识点一
AngularJS是由谷歌公司及一个由开发者组成的个人社区共同打造.其主要优势在于帮助使用者在web应用程序中实现必要的动态视图.它是通过原生的MVC(模型-视图-控制器)功能来增强HTML. PS: ...
（四）Angularjs - 小实例（2）
自定义指令编写时钟模板 <html>  <body ng ...
（三）Angularjs - 小实例
AngularJS处理数据表格使用 np-repeat 指令 <table> ...  <tr ng- ...
angularjs小知识
字符串和对象的转化 :angular.fromJson(jsonStr) 对象转字符串 :angular.toJson(obj) jsonStr:json字符串 obj:对象
angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）
本次做一个简单的关于动态生成select的练习在实现上有两种方式: 其一.通过ng-repeat来实现其二.通过ng-option来实现在页面效果上,两种实现的效果都一样但是在数据选择的数据从 ...
AngularJS 技术总结
学习AngularJS,并且能在工作中使用到,算是很幸运了.因此本篇也会搜集各种资料,进行分享. 书籍分享 AngularJS权威指南常用链接 AngularJS API文档 AngularJS 用 ...
angularJS 二
angularJS 2.1 ngForm <!DOCTYPE html> <html lang="zh-cn" ng-app> <head> ...
vue学习笔记
来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件.关于vue有一些点是文档中没有提及的,记录一下以便以后查询- 一.Vue的特点新一代 Vue.js 框架非常关注如何用极少的外部特性 ...

随机推荐

linux下Apache默认安装路径
如果采用RPM包安装,安装路径应在 /etc/httpd目录下apache配置文件:/etc/httpd/conf/httpd.conf 可以修改相关的访问路径及配置Apache模块路径:/usr/ ...
Ural2004： Scientists from Spilkovo（德布鲁因序列&思维）
Misha and Dima are promising young scientists. They make incredible discoveries every day together w ...
【转】axios全攻略
随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...
bzoj1513
二维线段树听说二维线段树不能下传标记? 就是裸的二维线段树,由于每次高度只能增加,所以我们就可以标记永久化每个线段树里有两个数组,mx和mark,每次修改路径上所有mx都要修改,mark是区间的精 ...
java笔记之IO1
File:文件和目录(文件夹)路径名的抽象表示形式 * 构造方法: * File(String pathname):根据一个路径得到File对象 * File(String parent, S ...
ZOJ5593:Let's Chat（双指针）
传送门题意给出x个a区间和y个b区间,询问a和b交区间的子区间长度为m的个数分析类似于双指针,具体见代码 trick 代码 #include <bits/stdc++.h> usi ...
python 面向对象八多继承
python是支持多继承的,在设计类的继承关系时,通常,主线都是单一继承下来的.但是,如果需要“混入”额外的功能,通过多重继承就可以实现,这种设计通常称之为MixIn. 为了更好地看出继承关系,以Mi ...
bzoj 4784: [Zjoi2017]仙人掌【tarjan+树形dp】
其实挺简单的但是没想出来---- 首先判断无解情况,即,一开始的图就不是仙人掌,使用tarjan判断如果一个点dfs下去有超过一个点比他早,则说明存在非简单环. 然后考虑dp,显然原图中已经属于某个简 ...
【插件开发】—— 14 Site is incorrect！编辑器启动报错！
前言博文纵览最近在弄编辑器的时候出现了一个十分尴尬的错误!这里收录一下: BUG如下图所示: 目测堆栈,与自己开发的代码无关.完全是Eclipse自己初始化的时候遇到了问题,最头疼的就是这种问题. ...
初学者的疑惑，到底什么是javaBean？
JavaBeans是Java中一种特殊的类,可以将多个对象封装到一个对象(bean)中.特点是可序列化,提供无参构造器,提供getter方法和setter方法访问对象的属性.名称中的"Bea ...

AngularJS小练习20170508

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

随机推荐

热门专题