AngularJS的Demo

最新推荐文章于 2019-09-04 09:00:00 发布

myhAini

最新推荐文章于 2019-09-04 09:00:00 发布

阅读量696

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/myhAini/article/details/82257094

版权

Angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、先创建一个html（用工具也好，用文本文件也可以）

<html>
<head>
    <title>入门小Demo-1</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>

1、引入angular.js文件(去官网下载一个就行了，放到和html文件同级目录)
2、看body中的那个ng-app，这就是指令，这是必须的，如果不写的话，下面的{{100+100}}就没效果了。
二、双向绑定

<html>
<head>
    <title>入门小Demo-1  双向绑定</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>

1.看这个指令（ng-model）
2.{{myname}}要和ng-model的值相同
三、初始化指令

<html>
<head>
    <title>入门小Demo-3  初始化</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app   ng-init="myname='陈大海'">
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>

指令ng-init就是初始化的指令，给变量赋予初始值
四、控制器

<html>
<head>
    <title>入门小Demo-3  初始化</title>
    <script src="angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('myController',function($scope){
            $scope.add=function(){
                return parseInt($scope.x)+parseInt($scope.y);
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
运算结果：{{add()}}
</body>
</html>

五、事件指令

<html>
<head>
    <title>入门小Demo-5  事件指令</title>
    <script src="angular.min.js"></script>  
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('myController',function($scope){            
            $scope.add=function(){
                $scope.z= parseInt($scope.x)+parseInt($scope.y);
            }           
        }); 
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
<button ng-click="add()">运算</button>
结果：{{z}}
</body>
</html>

六、循环数组

<html>
<head>
    <title>入门小Demo-6  循环数据</title>
    <script src="angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('myController',function($scope){
            $scope.list= [100,192,203,434 ];//定义数组
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
    <td>{{x}}</td>
</tr>
</table>
</body>
</html>

七、循环对象数组

<html>
<head>
    <title>入门小Demo-7  循环对象数组</title>
    <script src="angular.min.js"></script>  
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('myController',function($scope){        
            $scope.list= [
                {name:'张三',shuxue:100,yuwen:93},
                {name:'李四',shuxue:88,yuwen:87},
                {name:'王五',shuxue:77,yuwen:56}
            ];//定义数组            
        }); 
    </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>

八、内置服务
从后端抓数据的功能，发送一个http请求

<html>
<head>
    <title>入门小Demo-8  内置服务</title>
    <meta charset="utf-8" />
    <script src="angular.min.js"></script>  
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('myController',function($scope,$http){      
            $scope.findAll=function(){
                $http.get('data.json').success(
                    function(response){
                        $scope.list=response;
                    }                   
                );              
            }           
        }); 
    </script>   
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<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>

myhAini

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS的Demo

一、先创建一个html（用工具也好，用文本文件也可以）&lt;html&gt;&lt;head&gt; &lt;title&gt;入门小Demo-1&lt;/title&gt; &lt;script src="angular.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body ng-app&g
复制链接

扫一扫