AngularJS学习总结

来源：互联网发布：淘宝客服培训班编辑：程序博客网时间：2024/05/20 21:45

AngularJS学习总结

AngularJS是一个基于Mvx的前端重量级框架，在angularJS中最重要的和最需要关注的是数据；
AngularJS适用于所有数据相关的项目；
AngularJS中的变量和方法和javascript中的不互通；
相对于使用ng-bind（不推荐使用），使用{{}}具有更强大的性能；
ng-app:AngularJS使用的范围；
ng-model:AngularJS绑定的控件；
ng-click:AngularJS中的点击事件；
ng-init:变量的初始化（在父级上加;不推荐把所有数据卸载ng-init里面）；
ng-repeat:AngularJS中的循环事件；
AngularJS中的Controller：
作用：
1、放JS代码；
示例代码（给变量赋值）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html ng-app="test">  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <script type="text/javascript" src="js/angular.js"></script>    <script type="text/javascript">        var app = angular.module("test",[]);        app.controller('zhangsan',function($scope){            $scope.a = 12;        });    </script>  </head>  <body>        <div ng-controller="zhangsan">            <span>{{a}}</span>        </div>  </body></html>

2、桥梁的作用（打通AngularJS和JavaScript）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html ng-app="test">  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <script type="text/javascript" src="js/angular.js"></script>    <script type="text/javascript">        var app=angular.module("test",[]);        app.controller('cont1',function ($scope){            $scope.alert=function (s){                window.alert(s);            };        });         </script>  </head>  <body ng-controller="cont1">        <input type="text" ng-model="s12"/>        <input type="button" value="按钮" ng-click="alert(s12)">  </body></html>

1个页面里可以有很多个module；
1个module里可以有很多个controller；

1、双向绑定：
e.g.:在A控件里的输入会显示在B控件中，同时在B控件里的输入会显示A控件中；
2、依赖注入：
普通函数：有调用方决定函数；
ng函数：由定义方决定参数；
注意事项：
依赖注入的参数名scope不能随便写；

controller有两种写法：
1、（推荐使用）

var app=angular.module("test",[]);        app.controller('cont1',function ($scope){            $scope.a=12;        });

2、（此时参数名可以随便写）

var app=angular.module("test",[]);        app.controller('cont1',['$scope','$http',function (a,b){            a.a=12;        }]);

filter–过滤器
示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html ng-app="test">  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <script type="text/javascript" src="js/angular.js"></script>    <script type="text/javascript">        var app = angular.module('test',[]);        app.controller('cont1',function($scope){            $scope.items=[{name:'衬衫',price:15,time:213213123213},                    {name:'外套',price:89,time:453454354355},                    {name:'鞋子',price:123,time:144541255122}];        });    </script>  </head>  <body >    <ul ng-controller="cont1">        <li ng-repeat="item in items">            <h3>{{item.name}}</h3>            <span>{{item.price|currency}}</span>            <i>{{item.time|date:"yyyy年MM月dd日 HH:mm:ss"}}</i>        </li>    </ul>  </body></html>

价格加 |currency(过滤器) 之后向外输出带了美元符号
时间加了 |date(过滤器) 向外输出变成了年月日格式格式（{{item.time|date:”yyyy年MM月dd日 HH:mm:ss”}}同时过滤器可以带参数）
ng-src:用于给图片加地址
示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html ng-app="">  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <script type="text/javascript" src="js/angular.js"></script>  </head>  <body ng-init="a=true">        <input type="text" ng-model="src"/>        <img ng-src="{{src}}"/>  </body></html>

ng-href:加链接
ng-hide:隐藏
ng-show:显示
示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html ng-app="">  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <script type="text/javascript" src="js/angular.js"></script>  </head>  <body ng-init="a=true">        <input type="button" value="显示隐藏" ng-click="a=!a">        <div style="background:#CCC;width:300px;height:300px;" ng-hide="a"></div>  </body></html>

ng-clack:用于做延迟（页面没加载出来之前都是隐藏的）

AngularJS从服务器获取数据：
采用$http 的get()和post()方法；
示例代码（从a.php获取数据）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html ng-app="test">  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <script type="text/javascript" src="js/angular.js"></script>    <script type="text/javascript">        var app=angular.module("test",[]);        app.controller('cont1',function ($scope,$http){            //$http.get(url,参数);            //$http.post();            $http.get('a.php',{                params:{a:12,b:5},                  responseType:'json'                     }).then(function (res){                alert(res.data);            },function (){                alert("失败了");            });        });    </script>  </head>  <body ng-controller="cont1">  </body></html>

阅读全文

0 0