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 框架非常关注如何用极少的外部特性 ...

随机推荐

iphone设备尺寸规格
1.以下是iphone各种设备的尺寸规格 2.开发时只需要按“逻辑分辨率”来,1x,2x,3x主要用于切图时按不同大小来切图,如1x的图就是按照“逻辑分辨率”大小的效果图切出来的原图,2x就是1x原图 ...
BZOJ_2081_[Poi2010]Beads_哈希
BZOJ_2081_[Poi2010]Beads_哈希 Description Zxl有一次决定制造一条项链,她以非常便宜的价格买了一长条鲜艳的珊瑚珠子,她现在也有一个机器,能把这条珠子切成很多块(子 ...
小程序-demo：知乎日报
ylbtech-小程序-demo:知乎日报 1.返回顶部 0. 1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存 ...
Git dev分支合并到master分支完美实战
aa@aa-PC MINGW64 /f/online-center/cloud/server-functions_services (master) ...
c语言struct和c++的class的暧昧
c语言风格的封装数据放在一起,以引用和指针的方式传给行为c++ 认为封装不彻底 1数据和行为分开对外提供接口 2没有权限设置看看struct的一个例子 //data.h //c语言风格的封装数 ...
TransposonPSI——转座子分析的入门自学
最近需要做转座子分析,查找发现可以使用 TransposonPSI 来进行分析.但是登陆官网,该软件 update 时间为 2013 年,但是因为时间紧迫,暂时还没有进行其他方法的调研,所以先选用该软 ...
bzoj 1195: [HNOI2006]最短母串【状压dp】
我有病吧--明明直接枚举是否匹配就可以非要写hash,然后果然冲突了(--我个非酋居然还敢用hash 设f[s][i]为已选串状态为s并且最后一个串是i,还有预处理出g[i][j]表示最长有长为g[i ...
bzoj 1179: [Apio2009]Atm【tarjan+spfa】
明明优化了spfa还是好慢-- 因为只能取一次值,所以先tarjan缩点,把一个scc的点权和加起来作为新点的点权,然后建立新图.在新图上跑spfa最长路,最后把酒吧点的dis取个max就是答案. # ...
51nod 1188 最大公约数之和 V2
第二个$ O(T\sqrt(n)) $复杂度T了..T了..T了...天地良心,这能差多少?! 于是跑去现算(. \[ \sum_{i=1}^{n-1}\sum_{j=i+1}^{n}gcd(i, ...
BIOS 和UEFI的区别
BIOS先要对CPU初始化,然后跳转到BIOS启动处进行POST自检,此过程如有严重错误,则电脑会用不同的报警声音提醒,接下来采用读中断的方式加载各种硬件,完成硬件初始化后进入操作系统启动过程:而UE ...

AngularJS小练习20170508

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

随机推荐

热门专题