party_bid的第一张卡的总结

最新推荐文章于 2014-08-12 22:13:15 发布

原创最新推荐文章于 2014-08-12 22:13:15 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular js

日志专栏收录该内容

7 篇文章

订阅专栏

初步入门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的判断语句，来控制重名后的跳过功能