AngularJS组件
- ng-app : 指令定义和链接AngularJS应用程序到HTML。
- ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。
- ng-bind : 该指令绑定AngularJS应用程序数据到HTML标签。
AngularJS指令
- ng-app : 指令定义和链接AngularJS应用程序到HTML。
- ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。
ng-bind : 该指令绑定AngularJS应用程序数据到HTML标签。
ng-controller指令：控制器
ng-init 指令 ：ng-init 指令初始化一个AngularJS应用程序的数据。
- ng-repeat 指令：ng-repeat 指令重复html元素集合中的每个项目。常用于数组的迭代便利。
AngularJS表达式
<div ng-app=""
ng-init="quantity=2;cost=30; student={firstname:'李',lastname:'刚',rollno:101};marks=[82,91,78,77,64]">
<!-- 表达式1：使用数字 -->
<p>Expense on Books : {{cost * quantity}} Rs</p>
<!-- 表达式2：使用字符串 -->
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
<!-- 表达式3：使用对象 -->
<p>Roll No: {{student.rollno}}</p>
<!-- 表达式4：使用数组 -->
<p>Marks(Math): {{marks[3]}}</p>
</div>AngularJS－MVC设计模式
<script type="text/javascript">
//3.控制器Controller (函数)
function helloController($scope){
$scope.greeting = {
//1.模型model：（数据）
text:'hello,angularJS'
};
};
</script>
</head>
<body ng-app>
<!-- 2.视图view -->
<h1 ng-controller="helloController">
调用控制器方法:{{greeting.text}}
</h1>
</body>
</html>AngularJS模块儿化
将控制器定义在模块儿下，将属性和函数定义在控制器下
<script type="text/javascript">
//定义模块
var app = angular.module("pyg",['用于引入插件']);
//把函数定义模块下
app.controller('helloController',function($scope){
//定义添加方法
$scope.add = function(a,b){
return parseInt(a)+parseInt(b);
}
//定义查询方法
$scope.findAll = function(){
return "this is findAll";
}
})
</script>
</head>
<body ng-app="pyg">
<div ng-controller="helloController">
a:<input type="text" ng-model="a"/> {{a}}<br>
b:<input type="text" ng-model="b"/> {{b}}<br>
打印结果:{{add(a,b)}}<br>
调用查询方法:{{findAll()}}
</div>
</body>AngularJS控制器
studentController如下：
<script>
function studentController($scope) {
$scope.student = {
firstName: "yiibai",
lastName: "com",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>studentController 定义 scope 表示应用程序，使用studentController对象。
$scope.student 是studentController对象的属性。
firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。
fullName 是$scope.student对象的函数，它的任务是返回合并的名称。
在fullName函数中，我们现在要学生对象返回组合的名字。
作为一个说明，还可以定义控制器对象在单独的JS文件，并把有关文件中的HTML页面。
现在可以使用ng-model或使用表达式如下使用studentController学生的属性。
Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}AngularJS-事件
ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-model：数据双向绑定
ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。
<title>angularJS数据双向绑定</title>
<script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app>
姓名:<input type="text" ng-model="username"/>
用户姓名:{{username}}ng-init 指令：数据的初始化
ng-init 指令 ：ng-init 指令初始化一个AngularJS应用程序的数据。
<body ng-app ng-init="myname='唐僧去西天取经不得不说故事?'">
姓名:<input type="text" ng-model="myname"><br>
获取值:{{myname}}
</body>ng-repeat 指令：ng-repeat 指令重复html元素集合中的每个项目。常用于数组的迭代便利。
循环数组
<script type="text/javascript">
//定义模块
var app = angular.module("pyg",[]);
//把函数定义模块下
app.controller('userController',function($scope){
//定义变量
$scope.list = [12,23,56,88,99];
})
</script>
</head>
<body ng-app="pyg">
<div ng-controller="userController">
<h1 ng-repeat="x in list">
{{x}}
</h1>
</div>
</body>循环对象
<script type="text/javascript">
//定义模块
var app = angular.module("pyg",[]);
//把函数定义模块下
app.controller('userController',function($scope){
//定义变量
$scope.list = [{name:'张三',shuxue:100,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}];
})
</script>
</head>
<body ng-app="pyg">
<div ng-controller="userController">
<h1 ng-repeat="entity in list">
{{entity.name}} // {{entity.shuxue}} // {{entity.yuwen}}
</h1>
</div>
</body>