AngularJS语法详解

前端技术 2023/09/09 JavaScript

模板和数据的基本运作流程如下：

用户请求应用起始页面
用户的浏览器向服务器发起一次http连接，然后加载index.html页面，这个页面包含了模板
angular被加载到页面中，等待页面加载完成，查找ng-app指令，用来定义模板的边界
angular遍历模板，查找指定和绑定关系，将触发一些列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。最后，应用将会启动起来，并将模板转换成DOM视图
连接到服务器去加载需要展示给用户的其他数据

显示文本

一种使用{{}}形式，如{{greeting}} 第二种ng-bind=\"greeting\"

使用第一种，未被渲染的页面可能会被用户看到，index页面建议使用第二种，其余的页面可以使用第一种

表单输入

复制代码 代码如下:

<html ng-app>
<head>
    <title>表单</title>
    <script type=\"text/javascript\" src=\"angular.min.js\"></script>
    <script type=\"text/javascript\">
    function StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        computeNeeded = function() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch(\'funding.startingEstimate\',computeNeeded); //watch model的变化
    }
    </script>
</head>
<body>
    <form ng-controller=\"StartUpController\">
        Starting: <input ng-change=\"computeNeeded()\" ng-model=\"funding.startingEstimate\">  //change的时候调用函数
        Recommendation: {{funding.needed}}
    </form>
</body>
</html>

在某些情况下，我们不想一有变化就立刻做出动作，而是要进行等待。例如：

复制代码 代码如下:

<html ng-app>
<head>
    <title>表单</title>
    <script type=\"text/javascript\" src=\"angular.min.js\"></script>
    <script type=\"text/javascript\">
    function StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        computeNeeded = function() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch(\'funding.startingEstimate\',computeNeeded);//watch监视一个表达式，当这个表达式发生变化时就会调用一个回调函数
        $scope.requestFunding = function() {
            window.alert(\"Sorry,please get more customers first.\")
        };
    }
    </script>
</head>
<body>
    <form ng-submit=\"requestFunding()\" ng-controller=\"StartUpController\">  //ng-submit
        Starting: <input ng-change=\"computeNeeded()\" ng-model=\"funding.startingEstimate\">
        Recommendation: {{funding.needed}}
        <button>Fund my startup!</button>
    </form>
</body>
</html>

非表单提交型的交互，以click为例

复制代码 代码如下:

<html ng-app>
<head>
    <title>表单</title>
    <script type=\"text/javascript\" src=\"angular.min.js\"></script>
    <script type=\"text/javascript\">
    function StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        computeNeeded = function() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch(\'funding.startingEstimate\',computeNeeded);
        $scope.requestFunding = function() {
            window.alert(\"Sorry,please get more customers first.\")
        };
        $scope.reset = function() {
            $scope.funding.startingEstimate = 0;
        };
    }
    </script>
</head>
<body>
    <form ng-controller=\"StartUpController\">
        Starting: <input ng-change=\"computeNeeded()\" ng-model=\"funding.startingEstimate\">
        Recommendation: {{funding.needed}}
        <button ng-click=\"requestFunding()\">Fund my startup!</button>
        <button ng-click=\"reset()\">Reset</button>
    </form>
</body>
</html>

列表、表格以及其他迭代型元素

ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下：

复制代码 代码如下:

<html ng-app>
<head>
    <title>表单</title>
    <script type=\"text/javascript\" src=\"angular.min.js\"></script>
    <script type=\"text/javascript\">
    var students = [{name:\'Mary\',score:10},{name:\'Jerry\',score:20},{name:\'Jack\',score:30}]
    function StudentListController($scope) {
        $scope.students = students;

    }
    </script>
</head>
<body>
    <table ng-controller=\"StudentListController\">
        <tr ng-repeat=\'student in students\'>
            <td>{{$index+1}}</td>
            <td>{{student.name}}</td>
            <td>{{student.score}}</td>
        </tr>
    </table>
</body>
</html>

本文地址：https://www.stayed.cn/item/23914

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案