欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Angularjs

程序员文章站 2022-03-05 07:49:43
...

简介:
	angularJS是一款优秀的前端框架,主要有四大核心功能:MVC模式,双向绑定,依赖注入,模块化设计

mvc模式:将JS分成controller层和service层
双向绑定:将标签和变量进行绑定,修改标签变量会变化,修改变量标签也会变化
依赖注入:将内置对象直接注入进来使用,$scope $http
模块化设计:把控制器封装到模块中,别的页面想用直接引入模块即可

1.{{表达式}}表达式的使用,表达式的值可以是变量或者运算式,也可以是控制器方法的调用
      {{表达式}}代表$scope内部
<html>
     <head>
         <title>AngularJS Simple Test</title>
     	<!--引入angular.min.js插件-->
         <script src="plugins/angular.min.js"></script> <!--注意script不能写成自闭合标签-->
     </head>
     <body ng-app>  <!--开启对angular的使用-->
        结果:{{100}}  //100
     	结果:{{100+200}}  //300
     </body>
</html>

2.双向绑定,ng-model
<html>
    <head>
        <title>AngularJS双向绑定</title>
        <script src="plugins/angular.min.js"></script>
    </head>
    <body ng-app>
        姓名:<input type="text" ng-model="username"/>
        绑定的数据:{{username}}		<!--表达式的值会随着输入框中的值同时变化-->
    </body>
</html>

3.初始化指令,ng-init
<html>
    <head>
        <title>AngularJS初始化指令</title>
        <script src="plugins/angular.min.js"></script>
    </head>
    <body ng-app ng-init="username='张三'">
        姓名:<input type="text" ng-model="username"/>
        绑定的数据:{{username}}		
    </body>
</html>

4.控制器,controller
	$scope是视图和控制器之间的通信桥梁,代表当前页面对象
<html>
    <head>
        <title>AngularJS Controller</title>
        <script src="plugins/angular.min.js"></script>
        <script>
            //定义一个ng模块,参数1:给当前module起一个名字,参数2:引入其他module,如果不需要引入就写"[]"
            var app = angular.module("myModule",[]);
            //给模块绑定controller,参数1:给当前controller起一个名字,参数2:回调函数
            app.controller("myController",function($scope){
                $scope.add=function(){
                    return parseInt($scope.a) + parseInt($scope.b);
                }
            });
        </script>
    </head>
    <body ng-app="myModule" ng-controller="myController">
        数字1:<input type="text" ng-model="a"/>
        数字2:<input type="text" ng-model="b">
        结果:{{add()}}
    </body>
</html>

5.单机事件指令,ng-click
<html>
    <head>
        <script src="plugins/angular.min.js"></script>
        <script>
            var app = angular.module("myModule",[]);
            app.controller("myController",function($scope){
                $scope.add = function(){
                    $scope.num = parseInt($scope.a) + parseInt($scope.b) ; 
                }
            });
        </script>
    </head>
    <body ng-app="myModule" ng-controller="myController">
         数字1:<input type="text" ng-model="a"/>
        数字2:<input type="text" ng-model="b">
        <button ng-click="add();">
        结果:{{num}}
    </body>
</html>
    
6.循环数组,ng-repeat
<html>
    <head>
        <script src="plugins/angular.min.js"></script>
        <script>
            var app = angular.module("myModule",[]);
            app.controller("myController",function($scope){
               $scope.list=[1,2,3,4,5];
            });
        </script>
    </head>
    <body ng-app="myModule" ng-controller="myController">
        <table>
            <tr>
                <td ng-repeat="x in list"> {{x}} </td>
            </tr>
        </table>
    </body>
</html>
    
7.循环对象数组,ng-repeat
<html>
    <head>
        <script src="plugins/angular.min.js"></script>
        <script>
            var app = angular.module("myModule",[]);
            app.controller("myController",function($scope){
                $scope.list=[
                    {"username":"张三"},
                    {"username":"李四"},
                    {"username":"王五"}		<!--js对象表示法,最后一个不写","-->
                ];
            });
        </script>
    </head>
    <body ng-app="myModule" ng-controller="myController">
        <!--结果一行三列,注意ng-repeat的使用-->
        <table>
            <tr>
                <td ng-repeat="entity in list"> {{entity.username}} </td>
            </tr>
        </table>
        <!--结果三行一列-->
        <table>
            <tr ng-repeat="entity in list">
                <td> {{entity.username}} </td>
            </tr>
        </table>
    </body>
</html>
   
8.内置服务, $scope $http
<html>
    <head>
        <script src="plugins/angular.min.js"></script>
        <script>
            var app = angular.module("myModule",[]);
            app.controller("myController",function($scope,$http){
                $scope.findAll=function(){
                    $http.get("/brand/findAll.do").success(function(data){
                       $scope.list = data; 
                    });
                }
            });
        </script>
    </head>
    <body ng-app="myModule" ng-controller="myController">
        <table>
            <tr ng-repeat="entity in list">
                <td> {{entity.id}} </td>
                <td> {{entity.username}} </td>
                <td> {{entity.firstChar}} </td>
            </tr>
        </table>
    </body>
</html>
相关标签： 前端框架

上一篇： 易扩展,易复用,封装axios

下一篇： 剑指 Offer 16. 数值的整数次方——快速幂，栈溢出，阐述java中最小值与最大值的关系

推荐阅读