介绍

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

使用

使用前需引入angular.js(尽量使用1.5、1.8版本,其他版本容易出问题)

M层

创建数据绑定

var app = angular.module('myApp',[]);

作用域注入(局部作用域)

//$scope代表局部作用域、$rootScope代表全局作用域
app.controller('myController',['$scope','$rootScope',function($scope,$rootScope){
      $scope.name = '仰光';
      $rootScope.age = '23';
}])

V层

<div ng-app="myApp" ng-controller="myController">
  {{name}}  //使用局部值name
</div>
<p>{{age}}</p> //使用全局age 不用注入作用域 ng-controller

监听

$scope.watch('$scope.eventName',function(newVal,oldVal){
         $scope.xx = newVal > 200 ? 0 : 20;
})
//事件监听 watch('事件名',callBackFn) 缺点:实时监听，浪费性能;

$timeout、$interval

由于angular中并不支持setTimeout和setInterval 因此被这两个替代

用法

    app.controller('myController',['$scope','$timeout','$interval',function(){
      $timeout(function(){
            console.log('This is a setTimeout');
      },1000)

      $interval(function(){
            console.log('This is a setInterval');
      },1000)
}])

循环

 app.controller('myController',function($scope){
#scope.dataList = {
   'namae' : '仰光',
   'age' : '23',
   'sex' : 'man'
   }
})
      <ul ng-controller="myController">
          <li ng-repeat="data in dataList">{{data}}<li>
     </ul>

http

$http.get('app.json').success(function(data){
 $scope.list = data;
})

绑定事件

<div ng-click='evenFn()'>{{content}}</div>
    app.controller('$scope',function($scope){
$scope.evenFn = function(){
     console.log('This is a click event');
}
})

手动初始化、绑定两个module

var m1 = angular.module(‘myApp1’,[]);
var m2 = angular.module(‘myApp2’,[]);
var div = document.getElementsByTagName(‘div’);

初始化:
document.onclick = function(){
angular.bootstrap(div[0],[‘myApp1’]);
angular.bootstrap(div[1],[‘myApp2’]);
}

路由 route

注意引入的angular.js的版本要不小于angular.route.js的版本

单页应用spa

  <div id="box" ng-controller="myController">
    <a href="#/page1">首页</a>
    <a href="#/page2">内容1</a>
    <a href="#/page3">内容2</a>
 </div>
  <div ng-view></div>

var app = angular.module('myAapp',['ngRoute']);
app.controller('$scope',function($scope){})

路由的设置

  <div id="box">
    <a href="#/page1">首页</a>
    <a href="#/page2">内容1</a>
    <a href="#/page3">内容2</a>
  </div>
 <div ng-view></div>
  app.config(['$routeProvider',function($routeProvider){
   $routeProvider
.when('/page1',{             //当(when)我们点击page1时 模板内容显示
'template' : '<p>This is a index page</p>{{name}}',
'controller' : 'myController1'   //为每一个路由页面都绑定一个自己的作用域controller
     });
     .when('/page2',{
         'template' : '<p>This is a content page 1</p>',
         'controller' : 'myController2'              
     });
     .when('/page3',{
         'templage' : '<p>This is a content page 2</p>',
         'controller' : 'myController3'
     });
     .otherwise({redirectTo : '/page1'})  //页面加载进来时 显示/page1的内容
  }])

路由分别注入作用域控制器的配置

              app.controller('myController1',function($scope){
               $scope.name="name1"
})
            app.controller('myController2',function($scope){
               $scope.name="name2"

})
            app.controller('myController3',function($scope){
               $scope.name="name3"

})

UI路由

 $stateProvider 当前页面跳转
 $urlRouterProvider 设置默认界面

.config(function($stateProvider,$urlRouterProvider){
    $stateProvider
         // state表示状态 'tab' 表示事件名 可以按自己意向设置
       .state('tab',{
         url : '/tab',  //访问时候的虚拟路径 虚拟文件夹
        abstract : true, // 用templateUrl的内容替换当前界面的内容
        templateUrl : '.../xx.html'
   })
       .state('tab.home',{
        url :'/home',
        views : {
            'tab-home' : {
                templateUrl : '.../tab01.html',
                controller : 'xxx'
            }
        }
    })
    $urlRouterProveider.otherwise('xxxxx/xx/html')
})

 icon-on icon-off
 上线下线图标切换

返回上一级页面

$state.go(‘stateName’,{},{reload:true}) //跳转指定页面;
$ionicHistory.goBack(); //跳转历史页面，即进入这个页面前的那个页面

过滤器

数值

$scope.xx = $filter(‘number’)(数值,小数点保留个数,四舍五入)
$scope.number = $filter(‘number’)(1234.369,2) // 输出的值为1234.37

货币

$filter(‘currency’)(1000,’$’) //$1000
表达式内{name|currency:’$’}

时间

$filter(‘date’)(‘yy/MM/dd’); //小括号后面添加时间格式

大写、小写过滤器

$filter(‘uppercase’)(‘…’) //转换为大写
$filter(‘lowercase’)(‘…’) //转换为小写

排序

$filter(‘orderBy’)(collection,expression,reverse,comparator) // true == 降序 == reverse, false == 升序 == !reverse

过滤

$filter(‘filter’)(arr,’L’); //将数组中含有L的给过滤出来

限制过滤器

$filter(‘limitTo’)(input,limit,begin) //可以限制个数 $filter(‘limitTo’)(2);

自定义过滤器

自定义以首字母大写为例子

app.filter('firstUpper',function(){
  return function(str){
      return str.charAt(0).toUpperCase() + str.subString(1); //将str中的第一个字母大写拼接字符串中（n-1）后面的字符串
  }
})

调用 $filter(‘firstUpper’)(‘yangguang’); //输出 Yangguang

样式指令

 <h1 ng-style="myObj">
ABC
 </h1>

 $scope.myObj = {
    'background' : '#f00',
    'color' : '#ff0'   
 }


 <style>
.active{color:#000;}
 </style>
 <p ng-class="{{myClass}}"></p>

 $scope.myClass = {
  'active' : 'true'   // 'className' : '任意值'
 }

创建自定义格式

 app.directive('cf',[function(){
return{
    restrict : 'E',  // E:元素 A:属性 C:类名 M:注释
    replace : true,  //是否将自定义格式替换掉
    template : '<h1>替代模板</h1>'   //替代的模板
}
 }]);

 <cf></cf> 标签被替换为<h1>替代模板</h1>

作用域间的互相通信

向上通信

<body ng-app="myApp">
 <div ng-controller="myCtr">
     {{name}}
     <div ng-controller="myCtr" ng-click="fnAdd()">
         {{name}}
         <div ng-controller="myCtr">
             {{name}}
         </div>
     </div>
 </div>
         $scope.fnAdd = function(){
             $scope.name = $scope.name-1;
             $scope.$emit('upper',$scope.name); //$emit向上通信
         }
         $scope.$on('upper',function(){
             $scope.name = $scope.name+1;
         })

向下通信

$scope.fnAdd = function(){
    $scope.name = $scope.name-1;
    $scoppe.$broadcast('lower',$scope.name); //$broadcast向下通信
}
$scope.$on('lower',function(){
    $scope.name = $scope.name+1;
})

脏值、脏数据、脏数据检测

关键字 $watch监听 $digest修改

$watch之后会把值返回给$digest,$digest会把老值和新值进行比较,如果相同,不修改,不相同则就改,这个过程叫做脏数据处理;

介绍

使用

M层