angular.js

发布时间：2020-12-17 07:12:36 所属栏目：安全来源：网络整理

导读：angular.js四大特征：mvc模式、双向绑定、依赖注入、模块化设计法则：高内聚低耦合 1.表达式{{}}：使用angular需要引入script src="angular.min.js"/script 同时在body添加：ng-app htmlheadtitleAngularJSDEMO-1表达式/titlescript src="angular.min.js"/

angular.js四大特征：mvc模式、双向绑定、依赖注入、模块化设计

法则：高内聚低耦合

1.表达式{{}}：

使用angular需要引入<script src="angular.min.js"></script>

同时在body添加：ng-app

<html>
<head>
	<title>AngularJSDEMO-1表达式</title>
	<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>

2.双向绑定：

ng-model="name"

<html>
<head>
    <title>AngularJSDEMO-2双向绑定</title>
    <script src="angular.min.js"></script>
</head>

<body ng-app>
请输入姓名：<input ng-model="name">
<input ng-model="name">
{{name}}
</body>
</html>

3.初始化指令

ng-init="name=‘程大海‘"将name初始化为程大海

<html>
<head>
    <title>AngularJSDEMO-初始化指令</title>
    <script src="angular.min.js"></script>
</head>

<body ng-app ng-init="name=‘程大海‘">
请输入姓名：<input ng-model="name">
<input ng-model="name">
{{name}}
</body>
</html>

4.控制器

<html>
<head>
    <title>AngularJSDEMO-控制器</title>
    <script src="angular.min.js"></script>
    <script>
        //建立模块
        var app = angular.module("myApp",[])
        //创建控制器    $scopek控制器和视图层交互数据桥梁
        app.controller("myController",function($scope){
            $scope.add= function(){
                return parseInt( $scope.x)+parseInt($scope.y);
            }
        
        });
    </script>
    
    
</head>

<body ng-app="myApp" ng-controller="myController" >
 
第一个数：<input ng-model="x"> 
第二个数：<input ng-model="y"> 
{{add()}}
</body>
</html>

5、事件指令

<html>
<head>
    <title>AngularJSDEMO-2双向绑定</title>
    <script src="angular.min.js"></script>
    <script>
        //建立模块
        var app = angular.module("myApp",function($scope){
            $scope.add= function(){
                $scope.c= parseInt( $scope.x)+parseInt($scope.y);
            }
        
        });
    </script>
    
    
</head>

<body ng-app="myApp" ng-controller="myController" >
 
第一个数：<input ng-model="x"> 
第二个数：<input ng-model="y"> 
<button ng-click="add()">运算</button>
{{c}}
</body>
</html>

6、循环数组

<html>
<head>
    <title>AngularJSDEMO循环数组</title>
    <script src="angular.min.js"></script>
    <script>
        //建立模块
        var app = angular.module("myApp",function($scope){
            $scope.list = [102,2030,1023,123,23];
        
        });
    </script>
    
    
</head>

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

7.循环对象数组

<html>
<head>
    <title>AngularJSDEMO循环数组</title>
    <script src="angular.min.js"></script>
    <script>
        //建立模块
        var app = angular.module("myApp",function($scope){
            $scope.list = [
            {name:"张三",shuxue:100,yuwen:100},{name:"lisi",shuxue:22,yuwen:2},{name:"wangwu",shuxue:33,yuwen:1}]
        
        });
    </script>
    
    
</head>

<body ng-app="myApp" ng-controller="myController" >
 
 <table>
    <tr>
        <td>姓名</td>
        <td>数学</td>
        <td>语文</td>
    </tr>
    <tr ng-repeat="entity in list">
        <td>{{entity.name}}</td>
        <td>{{entity.shuxue}}</td>
        <td>{{entity.yuwen }}</td>
    </tr>
    
 
 </table>
 
 
</body>



</html>

8.内置服务

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>angular入门小demo</title>
    <script src="angular.min.js"></script>
    
        <script>
        //建立模块
        var app = angular.module("myApp",function($scope,$http){
            $scope.findList= function(){
                $http.get("data.json").success(function(response){
                    $scope.list = response;
                })
            }
        
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="controller" ng-init="findList">
 <table>
    <tr>
        <td>姓名</td>
        <td>数学</td>
        <td>语文</td>
    </tr>
    <tr ng-repeat="entity in list">
        <td>{{entity.name}}</td>
        <td>{{entity.shuxue}}</td>
        <td>{{entity.yuwen }}</td>
    </tr>
    
 
 </table>
 
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!