Angular基本使用02

插值表达式

双大括号{{}}中可以放多种表达式，先准备一些演示数据

var app = angular.module('demo.main', []);
app.controller('nameController', function ($scope) {
    $scope.num = 1;
    $scope.fn = function () {
    console.log('函数执行了');
    return 'run';
    };
    $scope.data = {
        num: 1,
        str: 'hello world',
        arr:[1,2,3,4,5]
    };
});

取值：{{data.name}}
取函数：{{fn}}
取对象：{{data}}
运算表达式：{{num + 2}}
函数执行：{{fn()}}

<div ng-controller="nameController">
<div>
取值表达式：{{data.num}}
<br>
取函数：{{fn}}
<br>
取对象：{{data}}
</div>
<div>
运算表达式：{{num + 2}}
</div>
<div>
函数执行：{{fn()}}
</div>
</div>

控制器的作用域

数据依附于控制器，控制器可相互嵌套。当发生嵌套时数据获取类似于JavaScript的作用域链，若本身存在该数据则使用本身的，若本身没有则逐级往上获取直至为空。

<body ng-app="demo.main">
<div ng-controller="outerController">
<div ng-controller="innerController">
访问本级作用域：{{num}} <br/>
访问上一级作用域：{{name}}<br/>
无内容：{{data}}
</div>
</div>
<script>
var app = angular.module('demo.main', []);
app.controller('outerController', function ($scope) {
    $scope.num = 1;
    $scope.name = 'outer';
});

app.controller('innerController',function($scope){
    $scope.num = 2;
})
</script>

$apply方法

在Angular中，当使用Angular的方法修改数据时，页面上相应的数据会被更新。当使用其他方式修改时虽然数据改变了但是页面上的值并没有更新。此时需要调用$apply方法来提醒Angular来更新一次界面。

var app = angular.module('demo.main', []);
app.controller('outerController', function ($scope) {
    $scope.num = 0;
    setTimeout(function(){
        //使用非Angular提供的方式修改数据时界面上的数据并不会被更新
        $scope.num = 1;
        //调用apply方法通知Angular更新页面上的数据
        $scope.$apply();
    },1000);
});

数据监视

使用$watch方法监视某个数据。该方法返回一个函数，调用返回的函数可以解除监听。

var app = angular.module('demo.main', []);
app.controller('outerController', function ($scope) {
    $scope.num = 0;
    //每隔一秒使用非Angular提供的方式修改一次数据
    //此时$watch无法监听到数据的改变，调用$apply通知$watch
    setInterval(function(){
        $scope.num ++;
        //不调用$apply时$watch无法监听到数据的改变
       $scope.$apply();
    },1000);
    var releaseFn = $scope.$watch('num', function (newValue, oldValue, scope) {
        console.log(newValue, oldValue);
    });
    // 3秒后释放自己注册的watcher
    setTimeout(releaseFn,3000);
});

内部路由

Angular利用锚链接不会刷新界面的特性，提供了$location使得能实现单页面路由的功能。调用$location.path()返回当前的锚链接地址。

<body ng-app="demo.main">
<div ng-controller="mainController">
<a href="#/a">goto a</a>
<!-- 需要注意的是"#b"和"#/b"一样 -->
<!-- 此时没有"/"，但是Angular会自动添加"/" -->
<a href="#b">goto b</a>
<a href="#/c">goto c</a>
此时路由至：{{path}}
</div>
</body>
<script>
var app = angular.module("demo.main",[]);
app.controller("mainController",function($scope,$location){
    //将$location挂在在$scope上
    $scope.location = $location;
    //监听location.path()方法的返回值
    $scope.$watch('location.path()', function (nValue, oValue, scope) {
        //更新path为新的锚链接地址
        $scope.path = nValue;
    })
});
</script>