angularjs 的入门Demo

最新推荐文章于 2018-10-22 23:24:07 发布

NO如果

最新推荐文章于 2018-10-22 23:24:07 发布

阅读量467

点赞数

分类专栏： angularjs 文章标签： angularjs入门demo angularjs基础

本文链接：https://blog.csdn.net/hanzl1/article/details/80956007

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.前提引入angular.min.js 入门

<html>
<head>
<title>angularjs入门demo</title>
<script src="angularjs/angular.min.js"></script>
</head>

<body ng-app ng-init="name='hanzl'">
{{100+200}}
<br>
<h1>双向绑定初始化演示</h1>
请输入：<input ng-model="name"/>
{{name}}
</body>

</html>

2.控制器

<html>
<head>
<title>angularjs控制器</title>
<script src="angularjs/angular.min.js"></script>
<script >
//建立模块
var app=angular.module("myapp",[]);
//创建控制器 $scope就是控制层和视图层交换的桥梁
app.controller("myController",function($scope){

$scope.add=function(){
return $scope.z=parseInt($scope.x)+parseInt($scope.y);
}
});

</script>
</head>

<body ng-app="myapp" ng-controller="myController">

请输入第一个数：<input ng-model="x"/><br>
请输入第一个数：<input ng-model="y"/><br>
结果：{{add()}}
</body>

</html>

3.事件指令

</body>

4.循环数组

<html>
<head>
<title>angularjs控制器</title>
<script src="angularjs/angular.min.js"></script>
<script >
//建立模块
var app=angular.module("myapp",[]);
//创建控制器 $scope就是控制层和视图层交换的桥梁
app.controller("myController",function($scope){

$scope.add=function(){
return $scope.z=parseInt($scope.x)+parseInt($scope.y);
};
$scope.list=[ 1,2,3,4];//定义数组
});

</script>
</head>

<body ng-app="myapp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>

</html>

5.循环数组--对象

<html>
<head>
<title>angularjs控制器</title>
<meta charset="utf-8">
<script src="angularjs/angular.min.js"></script>

<script >
//建立模块
var app=angular.module("myapp",[]);
//创建控制器 $scope就是控制层和视图层交换的桥梁
app.controller("myController",function($scope){

$scope.add=function(){
return $scope.z=parseInt($scope.x)+parseInt($scope.y);
};
$scope.list=[{name:'李四',age:0},{name:'zhangsan',age:20},{name:'王五',age:30}];//定义数组
});

</script>
</head>

<body ng-app="myapp" ng-controller="myController">
<table>
<tr><td>姓名</td><td>年龄</td></tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.age}}</td>
</tr>
</table>
</body>

6.$http使用文件结构

data.json 文件内容 [{"name":"李四","age":0},{"name":"zhangsan","age":20}]

testGrgular.html 内容

<html>
<head>
<title>angularjs控制器</title>
<meta charset="utf-8">
<script src="angularjs/angular.min.js"></script>
<script >
//建立模块
var app=angular.module("myapp",[]);
//创建控制器 $scope就是控制层和视图层交换的桥梁
app.controller("myController",function($scope,$http){

$scope.add=function(){
return $scope.z=parseInt($scope.x)+parseInt($scope.y);
};
$scope.list=[{name:'李四',age:0},{name:'zhangsan',age:20},{name:'王五',age:30}];//定义数组

$scope.finList=function(){
$http.get("data.json").success(
function(response){
$scope.list2=response;
}

)
}
});

</script>
</head>

<body ng-app="myapp" ng-controller="myController" ng-init="finList()">
<table>
<tr><td>姓名</td><td>年龄</td></tr>
<tr ng-repeat="entity in list2">
<td>{{entity.name}}</td>
<td>{{entity.age}}</td>
</tr>
</table>
</body>

</html>

</html>

7.创建Service

var app=angular.module("myapp",['pagination']);
//创建Service
app.service("brandService",function($http){
this.findAll=function(){
return $http.get('../brand/findAll.do');
}

});

8创建Controller（未分层就是不调用Service）

var app=angular.module("myapp",['pagination']);
//创建Service
app.service("brandService",function($http){
this.findAll=function(){
return $http.get('../brand/findAll.do');
}

});

//创建Controller

app.controller("mycontroller",function($scope,$http){

$scope.findAll=function(){
$http.get('../brand/findAll.do').success(
function(response){
$scope.list=response;
}
)

};}）

8创建Controller（调用Service）

var app=angular.module("myapp",['pagination']);
//创建Service
app.service("brandService",function($http){
this.findAll=function(){
return $http.get('../brand/findAll.do');
}

});