##第一个AngularJS程序
MVC view(视图)<-----> module(模块) <-----> controller(控制器)
- ng-app指令
: 一个应用程序,一般放在html标签中
2用法: ng-app=“myApp”(模块名称名称)
- ng-controller指令
控制器放在需要应用的标签中,需放在模块中
用法: ng-controller=“MyController”
控制器命名的规则:
1、采用帕斯卡命名法,即每个单词首字母大写
2、结尾为Controller
- ng-model指令
数据的双向绑定 html标签中ng-model="name"
JS代码中
> var app = angular.module('myApp',[]); > app.controller('FirstController',['$scope',function($scope){ $scope.name = 'tom'; }])
- ng-bind指令
数据的单向绑定ng-bind="name"
当在修改视图view时(修改网页时),可以运用数据的双向绑定或数据的单向绑定来修改数据
即更新数据
ng-click指令
JS代码中
var app = angular.module('myApp',[]);
app.controller('FirstController',['$scope',function($scope){
$scope.calc = function(e){
switch (e.target.value){
case '加':
$scope.result = $scope.num1*1+$scope.num2*1;
break;
case '减':
$scope.result = $scope.num1-$scope.num2;
break;
case '乘':
$scope.result = $scope.num1*$scope.num2;
break;
case '除':
$scope.result = $scope.num1/$scope.num2;
break;
}
}
}]);
html文件中
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="../angular-1.5.8/angular.min.js"></script>
<script src="../js/ng06.js"></script>
<title>简易计算器</title>
</head>
<body>
<div ng-controller="FirstController">
操作数1:<input type="text" ng-model="num1">
操作数2:<input type="text" ng-model="num2">
<input type="button" value="加" ng-click="calc($event)">
<input type="button" value="减" ng-click="calc($event)">
<input type="button" value="乘" ng-click="calc($event)">
<input type="button" value="除" ng-click="calc($event)">
<h1>运算结果:<span ng-bind="result"></span></h1>
</div>
</body>
</html>
以上是一个简单的AngularJS 示例,简易的计算器,写博客的第二天 feel great ,,
逆水行舟,不进则退,要保持一个谦逊的心态,总有那么一个人会让你成长,不要过度自信。
Dream