Angularjs 控制器

Angerlarjs 控制器：

    1.控制整个angerlarjs程序的数据；

    2.它是常规的js对象

    3.使用 ng-controller指定应用程序的控制器

   简单实例：

   <script src="../scripts/angerlarjs.min.js"></script>
    <div ng-app="Myapp" ng-controller="MyController">
        <!--通过ng-model绑定输入域到控制器的属性-->
        姓：<input type="text" ng-model="FirstName" />
        <br />
        名：<input type="text" ng-model="LastName" />
        <br />双向绑定
        姓名：{{FirstName+" "+LastName}}
    </div>

    <script>
        //1.创建angerlarjs程序    2.定义控制器   3.定义$scope保持Model对象

        var app = angular.module("Myapp", []).controller("MyController", function ($scope) {
            //在作用域中创建两个属性
            $scope.FirstName = "li";
            $scope.LastName = "cong";
        });
    </script>

 

    4.控制器中可以也可以定义方法

在控制器的作用域内新增一个方法
....
$scope.Fname = function () {
                return $scope.FirstName + $scope.LastName;
            }
....

在页面绑定的时候
{{Fname() }}

     5.大型项目中，一般将控制器程序放在单独的js文件当中，和js封装函数是一个道理

前台页面方法
<div ng-app="Myapp" ng-controller="MySecondController">
        <table>
            <tr><th>姓名</th><th>年龄</th></tr>
            <tr ng-repeat="x in userinfo">
                <td>{{x.name}}</td>
                <td>{{x.age}}</td>
            </tr>
        </table>
</div>

js控制方法取数据（Userinfo.js）
var apps = angular.module("Myapp", []).controller("MySecondController", function ($scope) {
    $scope.userinfo = [{ name: "licong", age: "18" }, { name: "licong1", age: "19" }];
});

页面中自己引用Userinfo.js即可

 通过以上简单的学习，对控制器的使用和认识又上升了一个台阶，归纳起来就是以下几点：

     1.它也是一种常规的js对象，只不过应用了angerlarjs的包，封装起来

     2.可以在控制器内部创建属性或方法

     3.控制器的作用域只在指定的范围内

     4.可以将控制器独立出来放在一个js文件里面，类似于js函数的封装