angular 1.3.x 笔记

2018-11-2    分类: angularjs笔记及案例

笔记基于angular 1.3.17 ,虽然现在有2.x还听说1.x和2.x是 跳崖式的升级,很多方法都不一样了,没办法只能去学习老版本了公司项目是基于老版本开发的。

https://www.bootcdn.cn/angular.js/1.3.17/

以上链接还包括一些扩展功能,例如cookie插件、动画效果插件、类似ajax功能的插件等等

 

代码总揽

<body ng-app="phonecatApp">

 <div ng-controller="PhoneListCtrl">
   <li ng-repeat="phone in phones">
     <span>{{phone.name}}</span>
     <span>{{phone.snippet}}</span>
   </li>
 </div>


 <script>
  var phonecatApp = angular.module('phonecatApp', ['infinite-scroll', 'timer']); // 创建module

  phonecatApp.controller('PhoneListCtrl', function ($scope, $http,$rootScope) {
    $scope.phones = [
      {'name': '名字1','snippet': '内容1'},
      {'name': '名字2','snippet': '内容2'},
      {'name': '名字3','snippet': '内容3'}
    ];
  });

 </script>

</body>

 

效果:

 

 

遮丑

[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
<body ng-app="phonecatApp" ng-cloak>

 

 

全局变量

phonecatApp.controller() 独立的控件之间变量是不能传递,这些需要全局,在任意xx.controller()中都可以调用。

 var phonecatApp = angular.module('phonecatApp', ['infinite-scroll']);
 phonecatApp.run(function($rootScope){  //声明全局
    $rootScope.people ={
       name:'小明',
       age:'12',
       tel:'12233333333'
    };
 });


 phonecatApp.controller('PhoneListCtrl', function ($scope, $http,$rootScope) {
    console.log($rootScope.people.name)  //小明
 });

 

 

 

 

class判断

 <!--第一种 直接加变量--> 
 <div ng-class="tempClass"></div> 

 <!--第二种 用{{}} 包住的变量表达式--> 
 <div ng-class="{{bClass}}"></div> 

 <!--第三种--> 
 <div ng-class="{'red':num,'green':!num}"></div> 

 <!--第四种--> 
 <div ng-class="{true:'green',false:'red'}[num]"></div> 



app.controller('frist',function($scope){ 
  $scope.tempClass = 'green'; 
  $scope.bClass = "{'red':true,'green':false}" 
  $scope.num = true; 
}

 

 

滚动加载

借助插件:https://cdn.bootcss.com/ngInfiniteScroll/1.2.0/ng-infinite-scroll.min.js

 

<script src="angular.min.js"></script>
<script src="ng-infinite-scroll.min.js"></script>


<div ng-controller="PhoneListCtrl">
 <div class="box" infinite-scroll="loadMore()" infinite-scroll-disabled="scroll_status" infinite-scroll-distance='1'>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <span>{{phone.snippet}}</span>
    </li>
 </div>
</div>

var phonecatApp = angular.module('phonecatApp', ['infinite-scroll']); // 创建module,这里要注入infinite-scroll插件之后才可以使用其方法
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {

   $scope.scroll_status=false;

   $scope.loadMore =function () {
      $scope.scroll_status=true;  //滚动到底部,正在加载数据,禁止多次执行
      console.log('到底部了');
   }

});

 

infinite-scroll  //box容器里面的内容滚动到底部的时候会执行loadMore()的函数

infinite-scroll-disabled  //默认为false,作用是防止滚动到底部的瞬间可能会造成多次执行loadMore()的时候,值为true时就停止了infinite-scroll的回调,也就是不执行loadMore()了

infinite-scroll-distance //值默认为0时,效果就是内容一定要滚动到底部的时候才会触发函数,如果值越大,会感觉到稍微滚动一点点也会触发到infinite-scroll回调执行loadMore()