初步入门angularJS 之后,开始了边学边做卡的第一步,party_bid的的第一张卡—创建活动。经过差不多一周的摸索和学习,的第一张卡已经结束了,下面就作个总结,小小的记录一下吧!
一、首先是用yo创建一个新工程,新建一个文件夹,在这个文件夹目录下打开Terminal编辑器,输入命令“yo angular”,输入这个命令后,会有五个自己选择的选项:
提醒 Would you like to use Sass (with Compass)? (Y/n) n
提醒 Would you like to include Bootstrap? (Y/n) y
其余按Enter键。创建完成后在工程文件夹下打开命令行,执行grunt serve命令,可以打开服务器窗口,观察新建的工程在网页上的效果,之后写代码可以直接修改这个工程,方便省事。
二、在编写代码之前,要记得先将模板的css文件引入到工程中的styles文件夹下,并在index.html文件中引入这些样式 例如:
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
三、每创建一个新的html文件,都要在/scripts/controllers中新建一个与之对应的.js文件,然后在app.js文件中实现对应路由的配置,例如:
.config(function ($routeProvider)
{
$routeProvider
.when('/main_one', {
templateUrl: 'views/main_one.html',
controller: 'Main_OneCtrl'
})
.when('/', {
templateUrl: 'views/list.html',
controller: 'ListCtrl'
})
MVC模式:http://zh.wikipedia.org/wiki/MVC
路由配置是有两部分构成的:第一部分是URL的跳转部分,他会规定URL变量的跳转地址,也就是该页面有了可以跳转和被跳转的“资格”,第二部分是这个页面对应的controller控制器,这个控制器定义了这个页面跳转或者实现其他功能时的方法还有控制语句,因为AngularJS是实现的controller和view双向绑定,所以在配置路由时,这两个元素缺一不可
其中 ‘ / ’代表程序默认的打开的主界面,可以修改。还有就是,创建.js文件后,要记得在index.html中引用这些文件,例如:
<script src="scripts/app.js"></script>
四、根据要求,要实现几个页面之间的button控制页面跳转,这种跳转可以有两种方式实现:
一种是直接跳转页面,这种跳转方式比较简单,知道页面名称就可以直接跳转,但是这种方式没有可控性,不能用别的命令或语句来控制跳转的条件和时机:<a href="user-manage.html"></a>
另一种是用语句进行跳转,这种跳转可控,建议使用:
*.html: <button ng-click="go_back()">
*.js: $scope.back = "返回";
$scope.go_back = function (){
$location.path('/list')
}
这种方式要现在.js文件中定义跳转的规则,然后在.html的button中用 “ng-*”命令引用这个规则
五、本地存储
main.js中:
var activity = {"activity":$scope.change,"messages":[]}; 将txt输入文档中的内容添加到变量activity中
var activities = JSON.parse(localStorage.getItem('activities')) || []; 取出本地数据库中的数据到activities中
activities.unshift(activity); 按照倒叙将activity中的数据压栈到activities中
localStorage.setItem("activities", JSON.stringify(activities)); 再将activities中的数据储存到本地数据库中
list.js中:
$scope.list1 = JSON.parse(localStorage.getItem('activities'))||[] 取出数据到list中
list.html中:
<li ng-repeat="activity in list1">
//ng-repeat实现的是一个遍历功能
<button class=" btn-style btn-3">
<h3>{{activity.activity}}</h3>
</button>
</li> 提取list中的数据现实到页面中
六、ng-disable和ng-show
ng-show 是用来控制按钮显示和隐藏的,当ng-show=true是,按钮现实,反之,按钮隐藏;
ng-disabled是用来控制按钮的可点与不可点
七、重名检测
用到了ng-show和ng-change
ng-change 是用来比较输入的内容与本地数据库中存储的内容是否相同的,每当输入框中的之变化一次,定义的方法便要遍历一次数据库的所有内容
当比较出有重名,ng-show为true,显示提醒”活动重名“,并且跳过”创建“按钮的跳转功能和数据库的存入功能
这种方法可以在跳转语句和数据库存入功能上写入ng-show的判断语句,来控制重名后的跳过功能
分享到:
相关推荐
数据格式 uid_score_bid 如 dingdanglbh,4.0 ,25862578 Luna-cat,5.0 ,25862578 aiyung,5.0 ,25862578
9点潮流计算PSO的优化算法 很简单,只要在MATLAB运行就可以
Repaso_Clases_Objetos_call_aplly_bid_22_02_2021
欧美1分钟历史数据,2003年5月到2019年2月,MT4EA回测好用。
去噪代码 matlab
mc_bid
crc-16的编码,使用的多项式是G(x)=x^16+x^12+x^5+1
bid0-lid64-steam.game_steamzc9_2.0.0.2702.exe.file
bid0-lid0-steam游戏管家_steambdth01_1.0.0.1487@1prw2r@gog.exe
backup_1000821v1001400000.zip
Bid Documents - Toyota Hilux Fx
bid0-lid64-steam.game_steamzc_2.0.0.2242.exe
附加服务器 欢迎使用Addons Server存储库! 请随时访问托管的当前项目的网页。 如果要安装,请遵循 指南。 我们希望您的帮助! 如果您有任何疑问,可以通过与我们联系。 请在此处报告错误: : 或您可以通过访问AMO...
出价统计信息和详细信息 作为签约过程一部分而...bids.details数组用于提供一个或多个Bid对象,每个对象代表收到的唯一出价。 bids.statistics数组用于表示有关投标和投标者数量的关键统计信息。 数组中的每个条目都
VHDL语言编写,实现双向移位寄存器功能,在MAX+plus软件下实现
[1]和[2]中的适用于类的BID方法的MATLAB DEMO。 该方法基于即插即用(PnP)框架。 MAIN BID函数:Main_BID_PnP.m 演示脚本:Demo_BID_PnP.m%========================================== ========================...
bid格式招投标文件阅读器,可以打开浏览、管理电子招标文件,如果打不开标书文件,请按下面步骤检查:1、请查看招标文件(.bid文件)是否下载完全,请用IE下载工具下载;2、查看IE浏览器版本,如果版本低于IE8,低于IE...
kp guide on how to use the kp tools
create index book_bid_idx on book(bid); create index abc on student(sid,sname); create index abc1 on student(sname,sid);他们是不同的 2、查看索引 select index_type,index_name,table_name,uniqueness from...
构造数据库 箱docs.rs crate.io 构造数据库 tdb核心 tdb服务器核心 tdb-cli tectonicdb是一个快速,高度压缩的独立数据库和流水协议,适用于订单报价。为什么使用简单有效的二进制文件格式:密集刻度格式(DTF) ...