<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
程序解释:
- AngularJS应用程序由ng-app定义。应用程序在
<div>
内运行。 - ng-controller=”myCtrl”属性是一个AngularJS指令。用于定义一个控制器。
- myCtrl函数是一个Javascript函数。
- AngularJS使用$scope对象来调用控制器
- 在AngularJS中,$scope属于应用变量和函数
- 控制器的$scope(相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
- 控制器在作用域中创建了两个属性(firstName和lastName)
ng-model指令绑定输入域到控制器的属性(firstName和lastName)
一个做过的例子
与服务端进行交互在前端html页面中显示内容
首先看看项目目录:
这是一个金融理财页面。此框架采用fis3打包处理结合angularjs完成项目构建。
项目开发的代码写在app目录下,bin里是一些配置文件,deployed是fis3编译构建后的文件,doc是一些文档,framework是整个项目的框架,所有已有的插件或者重写的插件接口以及函数方法都在这里,server是模拟服务器在自己电脑上搭一个本地服务器来测试代码包括mock数据。app展开目录:
这里就出现了框架中的核心部分,controllers层和views层。
从一个定期支持额度的页面说起:
首先在目录中找到服务端mock数据配置页面
再mock所需要的数据:
这里需要的数据就是isQuota一个返回值,返回01和00做不同的事情。
向服务器发出请求
利用封装好的函数postRequest发出请求,结果存入result中。
控制层调用
html页面调用部分
点击事件调用的函数名称为gotostep2()。即为在控制层定义的函数。
以上即为一个完整的向服务器请求数据的流程。