AngularJS入门

1.表达式

引用angular.min.js，在body 写ng-app指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        
        <title>表达式</title>
        <script src="js/angular.min.js"></script>
    </head>
    <body ng-app>
        {{100+100}} <br>
    </body>
</html>

运行结果

2.双向绑定

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

输入框输入李四

3.初始化指令 ng-init

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

运行结果

4.控制器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>控制器</title>
        <script src="js/angular.min.js"></script>
        <script>
            //1.建立模块   官方定义的模块ng、ngRoute、ngAnimate。ng-xxx是指令
            //angular.module(arg1,arg2);建一个自己的模块
            //第一个参数是模块名，第二个参数是引入其他模块
            var app=angular.module("myApp",[]);
            //2.创建控制器 第一个参数是控制器名，第二个参数是一个函数
            //$scope就是控制层与视图层之间交换数据的桥梁,add()不写$scope,视图层无法调用。
            app.controller("myController",function($scope){
                $scope.add=function(){
                    return parseInt($scope.x)+parseInt($scope.y);
                }
            });
        </script>
    </head>
    <!--
        1.ng-app引入自定义模块，ng-app="myApp"
        2.要引入控制器 ng-controller="myController"
    -->
    <body ng-app="myApp" ng-controller="myController">
        第一个数：<input ng-model="x" />  第二个数：<input ng-model="y" />
        <!--调用控制层的add()因为它定义为$scope相当于全局变量-->
        {{add()}}
    </body>
</html>

运行结果

5.事件指令 ng-click

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件指令</title>
        <script src="js/angular.min.js"></script>
        <script>
            //1.建立模块   官方定义的模块ng、ngRoute、ngAnimate。ng-xxx是指令
            //angular.module(arg1,arg2);建一个自己的模块
            //第一个参数是模块名，第二个参数是引入其他模块
            var app=angular.module("myApp",[]);
            //2.创建控制器 第一个参数是控制器名，第二个参数是一个函数
            //$scope就是控制层与视图层之间交换数据的桥梁,add()不写$scope,视图层无法调用。
            app.controller("myController",function($scope){
                $scope.add=function(){
                    $scope.z = parseInt($scope.x)+parseInt($scope.y);
                }
            });
        </script>
    </head>
    <!--
        1.ng-app引入自定义模块，ng-app="myApp"
        2.要引入控制器 ng-controller="myController"
    -->
    <body ng-app="myApp" ng-controller="myController">
        第一个数：<input ng-model="x" />  第二个数：<input ng-model="y" />
        
        <button ng-click="add()">运算</button>
        运算结果：{{z}}
    
    </body>
</html>

执行结果

6.循环数组 ng-repeat

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>循环数组</title>
        <script src="js/angular.min.js"></script>
        <script>
            //1.建立模块   官方定义的模块ng、ngRoute、ngAnimate。ng-xxx是指令
            //angular.module(arg1,arg2);建一个自己的模块
            //第一个参数是模块名，第二个参数是引入其他模块
            var app=angular.module("myApp",[]);
            //2.创建控制器 第一个参数是控制器名，第二个参数是一个函数
            //$scope就是控制层与视图层之间交换数据的桥梁,add()不写$scope,视图层无法调用。
            app.controller("myController",function($scope){
                $scope.list=[111,222,333,444,555];
            });
        </script>
    </head>
    <!--
        1.ng-app引入自定义模块，ng-app="myApp"
        2.要引入控制器 ng-controller="myController"
    -->
    <body ng-app="myApp" ng-controller="myController">
        <table>
            <!--
                ng-repeat,循环
                x是自定义的名称
                list是要循环的数组
            -->
            <tr ng-repeat="x in list">
                <td>{{x}}</td>
            </tr>
        </table>
    
    </body>
</html>

运行结果

7.遍历对象数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>循环对象数组</title>
        <script src="js/angular.min.js"></script>
        <script>
            //1.建立模块   官方定义的模块ng、ngRoute、ngAnimate。ng-xxx是指令
            //angular.module(arg1,arg2);建一个自己的模块
            //第一个参数是模块名，第二个参数是引入其他模块
            var app=angular.module("myApp",[]);
            //2.创建控制器 第一个参数是控制器名，第二个参数是一个函数
            //$scope就是控制层与视图层之间交换数据的桥梁,add()不写$scope,视图层无法调用。
            app.controller("myController",function($scope){
                $scope.list=[
                    {name:"张三",shuxue:100,yuwen:100},
                    {name:"李四",shuxue:16,yuwen:10},
                    {name:"王五",shuxue:50,yuwen:90}
                ];
            });
        </script>
    </head>
    <!--
        1.ng-app引入自定义模块，ng-app="myApp"
        2.要引入控制器 ng-controller="myController"
    -->
    <body ng-app="myApp" ng-controller="myController">
        <table border="1">
            <tr>
                <td>姓名</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <!--
                ng-repeat,循环
                stu是自定义的名称
                list是要循环的数组
            -->
            <tr ng-repeat="stu in list">
                <td>{{stu.name}}</td>
                <td>{{stu.shuxue}}</td>
                <td>{{stu.yuwen}}</td>
            </tr>
        </table>
    
    </body>
</html>

执行结果

8.内置服务 $http

要在jave web工程里实现，做一个json.data,仿访问后台获取数据

工程目录

data.json

[
    {"name":"张三","shuxue":100,"yuwen":100},
    {"name":"李四","shuxue":16,"yuwen":10},
    {"name":"王五","shuxue":50,"yuwen":90},
    {"name":"赵六","shuxue":60,"yuwen":70}
]

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJS入门--内置服务</title>
    <script src="js/angular.min.js"></script>
    <script>
            //1.建立模块   官方定义的模块ng、ngRoute、ngAnimate。ng-xxx是指令
            //angular.module(arg1,arg2);建一个自己的模块
            //第一个参数是模块名，第二个参数是引入其他模块
            var app=angular.module("myApp",[]);
            //2.创建控制器 第一个参数是控制器名，第二个参数是一个函数
            //$scope就是控制层与视图层之间交换数据的桥梁,add()不写$scope,视图层无法调用。
            app.controller("myController",function($scope,$http){
                $scope.findList=function(){
                    //$http.get()可以访问后台获取数据
                    $http.get("data.json").success(
                            function(response){
                                //定义全局变量list接收
                                $scope.list=response;
                            }
                        );
                    
                }
                //可以在这调用，但是在这里调用是每个用了这个模块的都会执行
                //$scope.findList();
            });
        </script>
</head>
    <!--
        1.ng-app引入自定义模块，ng-app="myApp"
        2.要引入控制器 ng-controller="myController"
        3.要调用findList()方法，这里要用ng-init指令  
    -->
    <body ng-app="myApp" ng-controller="myController" ng-init="findList()">
        <table border="1">
            <tr>
                <td>姓名</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <!--
                ng-repeat,循环
                stu是自定义的名称
                list是要循环的数组
            -->
            <tr ng-repeat="stu in list">
                <td>{{stu.name}}</td>
                <td>{{stu.shuxue}}</td>
                <td>{{stu.yuwen}}</td>
            </tr>
        </table>
    
    </body>
</html>

执行结果

posted on 2019-06-13 19:38 成魔的蜘蛛阅读(80) 评论(0) 收藏举报

刷新页面返回顶部

AngularJS入门

导航

公告