AngularJS表单应用示例代码

发布于 2015-01-10 11:55:21 | 271 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的AngularJS教程，程序狗速度看过来！

AngularJS 前端JS框架

AngularJS诞生于Google是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。

本文为大家提供的是一个AngularJS表单应用示例代码，感兴趣的同学参考下。

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

用户请求应用起始页面
用户的浏览器向服务器发起一次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);

        $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>

AngularJS 前端JS框架

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

显示文本

表单输入

后端技术

前端技术

数据库

热门框架

常用IDE

其他