angularjs 的入门Demo

傷城~ 2022-05-21 13:13 169阅读 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使用     文件结构 #####

![70][]

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） #####

//创建Controller

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

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

\};\}）

##### 8创建Controller（调用Service）  #####

##### app.controller("mycontroller",function($scope,$http,brandService)\{        $scope.findAll=function()\{        brandService.findAll().success(       function(response)\{       $scope.list=response;       \}         )                \};\}） #####

[70]: /images/20220521/d2e18caead9f49ba9b10eb02a4f501aa.png