首页 > 语言 > JavaScript > 正文

AngularJS语法详解

2024-05-06 14:46:58
字体:
来源:转载
供稿:网友

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

用户请求应用起始页面
用户的浏览器向服务器发起一次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监视一个表达式,当这个表达式发生变化时就会调用一个回调函数

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选