Angularjs的四大特性

四大特性

  • 使用MVC设计模式
  • 双向数据绑定
  • 依赖注入
  • 采用模块化设计
一、控制器的作用域
  • 每次调用ng-controller都会创建一个新的Controller对象
  • 每个Controller对象都有唯一的$scope对象,表示当前控制器对象的有效范围/作用域
  • 声明在某个$scope中的模型数据,一般情况下不能被其他的控制器所使用
  • 若想在多个控制器间共享数据、传递数据,可以声明在根作用域--$rootScope--每个Angular应用只有一个唯一的$rootScape对象
  • 控制器的本质用途:用于划分一个大型页面中的不同的DIV块- 每个块中都有自己专用的数据,以及可以跟其他块共享的数据
二、双向数据绑定
  • 方向1 Model绑定到view,此后不论何时只要Model发生改变,数据会立即自动同步更新
    实现方法:{{}} ng-bind ng-if ng-Repeat 几乎所有的显示数据的指令都实现了方向1的绑定
    实例:
    1.创建一个点击计数器,有一个按钮,只要点击一次,立即显示出点击次数
    2.轮播图的前进后退按钮
<--html代码--!>
<body ng-app="myModule">
        <div class="container"  ng-controller="myControl">
            <button class="btn btn-danger" ng-click="add()">有种点我啊</button>
            <br />
            点击次数:<span>{{count}}</span>
            <h1>轮播图</h1>
            ![]({{'images/color'+index+'.png'}})
            <button class="btn btn-success" ng-click="pre()">上一张</button>
            <button class="btn btn-warnning" ng-click="next()">下一张</button>
        </div>
    </body>
//js代码部分
<script type="text/javascript">
        angular.module("myModule",["ng"]).controller("myControl",function  ($scope){
            var count=0;
            $scope.count=count;
            $scope.add=function() {
                $scope.count++;
            }
            var index=1;
            $scope.index=index;
            $scope.pre=function() {
                    $scope.index--;
                    if($scope.index==0){
                        $scope.index=9;
                    }
                }
            $scope.next=function() {
                $scope.index++;
                if($scope.index==10){
                        $scope.index=1;
                    }
            }
        });
    </script>
计数器和轮播图
  • 方向2 view绑定到model,把视图中可以修改的HTML元素,即表单控件的值绑定到模型变量上。此后,只要用户修改了表单控件的值后,后台模型变量的值会立即随之改变
    实现: 只有ngmodel指令可以,为了监视到Model变量真的被改变了可以使用$scope.$watch()函数对Model数据的值进行监视,
    实例:将用户名和密码实时显示出来,复选框显示婚否,单选框显示当前选择的性别,下拉框显示选择的城市,简易版购物车计算器计算实时总价
<body ng-app="myModule" >
            <div class="container" ng-controller="myControl">
                <h1>单行文本输入框</h1>
                名字:<input type="text" ng-model="name"/>
                <span>{{name}}</span><br />
                密码:<input type="password" ng-model="password"/>
                <span>{{password}}</span>
                <br />
                <h2>复选框</h2><br />
                婚否:<input type="checkbox"  ng-model="marry"/><span>{{marry}}</span><br />
                <h2>单选框</h2><br />
                <input type="radio" value="男" ng-model="sex"/>男
                <input type="radio" value="女" ng-model="sex"/>女
                <span>{{sex}}</span><br />
                
                <h2>下拉框</h2>
                <select name="" ng-model="city">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="深圳">深圳</option>
                    <option value="广州">广州</option>
                </select>
                <span>{{city}}</span>
                <br />
                
                <h2>简易版购物车计算器</h2>
                单价:<input type="text" ng-model="price" />
                数量:<input type="text" ng-model="number" />
                总价:{{price*number}}
            </div>
        </body>
angular.module("myModule",["ng"]).controller("myControl",function  ($scope){
            $scope.$watch("name+password",function() {  //两个监听对象之间用+连接即可
                console.log($scope.name);
                console.log($scope.password);
            })
        })
三、依赖注入

被动注入方式(Injection)方式
angular.module("myModule",["ng]).controller("myControl",function($scope,$interval));
angular中的ngController指令在实例化控制器对象时,会根据指令的形参名,创建出控制器所依赖的对象,并注入进来---依赖注入(Dependency Injection)
注意:

  • angular在创建控制器对象时,会根据形参列表中的每个形参依赖的对象的名称来创建,故控制器声明函数不能声明angular无法识别的形参名 angular只提供了一种依赖注入方式-根据形参名来注入依赖的对象
  • 若项目js文件使用了类似yuicompressor等压缩程序,默认会把函数的形参名精简为一个字母的形式,会导致Angular的依赖注入失败
    解决办法
 module.controller("控制器名",[
                 
                  "$scope",
                  "$interval",
                  "$http",
                  function(a,b,c){

                  }
              ]);
  • 可以被注入的对象-所有的service对象都可以被注入
    • $rootScope 在多个控制器间共享数据的服务
    • $interval 提供周期性定时器服务
    • $timeout 提供一次性定时器服务
    • $log 体用五个基本的日志输出服务
    • $http 提供异步HTPP请求(AJAX)的服务
      $http{method:"GET",url:""}.then(fun).catch(fun)
      
         $http.get("url").then(fn);
      
         $http.post("url",data).then(fn);
      
  - $location
实例:使用定时器interval实现秒钟

<body ng-app="myModule">
<div class="container" ng-controller="myControl">
<p>{{num}}</p>
</div>
</body>

<script>
angular.module("myModule",["ng"]).controller("myControl",function($interval){
$scope.num=0;
$interval(function(){
$scope.num++;
},1000);
</script>

#####ng模块中提供的过滤器

  1. filter:把model中的数据在显示时以某种特定的格式来呈现

    1. lowercase

      语法:{{表达式 | lowercase}

    2. uppercase

      语法:{{表达式 | uppercase}

    3. number

      语法:{{表达式 | number}}
      {{表达式 | number:小数位数}}

    4. currency

      {{表达式 | currency}}
      {{表达式 | currency:'货币符号'}}

    5. date

      {{表达式 | date }}
      {{表达式 | date | "yyyy-MM-dd"}}

#####四、单页应用
angularjs提供的模块---ngroute
1)概念:
route:路由,通过某条线路找到目标内容
ngroute:模块的目标,就是根据浏览器url中的一个特殊的地址标记,查到到该标记所对应的模板页面,并异步加载到ng-view上
2)使用步骤:
 1) 创建唯一完整的HTML页面,其中声明一个容器,ngview指令。引入angular.js angular-routejs

     <div ng-view></div>

 2)创建多个模板页面(习惯上放在一个特别的目录下,如tpl)

 3) 创建Module,声明依赖于ng/ng-route两个模板

     var app = angular.module("module",["ng","ngRoute"]);

 4)在Module中配置路由字典

     app.config(function($routeProvider){

      $routeProvider.when("/start",{


         templateUrl:xxx,
         controller:""     //此处声明的控制器可供当前目标页面所有元素使用   

       })

    })

 5)使用浏览器做测试

     http:IP地址/index.html#/路由地址
实例

<body ng-app="myModule">
<ul>
<li><a href="#/page1">page1</a></li>
<li><a href="#/page2">page2</a></li>
</ul>
<div ng-view>
</div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="js/singlePage.js" type="text/javascript" charset="UTF-8"></script>

//singlePage.js文件内容
var module = angular.module("myModule",["ng","ngRoute"]);
module.config(function ($routeProvider){
$routeProvider.when("/page1",{
templateUrl:"temp/page1.html"
}).when("/page2",{
templateUrl:"temp/page2.html"
})
})

ngroute中的页面跳转有两种方式:
- 通过超链接访问href="#/main"
- 通过js跳转$location.path("/main")

推荐阅读更多精彩内容