AngelarJS学习笔记1

最新推荐文章于 2024-06-23 17:16:57 发布

K'illCode

最新推荐文章于 2024-06-23 17:16:57 发布

阅读量3.4k

点赞数 1

分类专栏： angularJS 文章标签： angularJS

本文链接：https://blog.csdn.net/Dome_/article/details/79277018

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

 
 基本定义： 

 
 1.ng-app = "" 定义了angularJs的使用范围; 

 
 2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值，有多个变量时，中间用分号隔开； 

 
 3.ng-model = "变量" 定义变量名; 

 
 4.ng-bind = "变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。 

 
 但是一般都用双重花括号来获取变量的值，比如：{{变量}}; 

 
 5.ng-repeat 指令会重复一个 HTML 元素：（可以用于循环遍历数组） 

 
 使用 ng-repeat 来循环数组 

 
 <ul> 

 
 <li ng-repeat="x in names"> 

 
  {{ x }} 

 
 </li> 

 
  </ul> 

 
 AngularJs指令：是以ng作为前缀的HTML属性。 

 
 AngularJs表达式写在双大括号内{{expression}}。 

 
 AngularJs表达式把数据绑定到HTML,这与ng-bind 指令作用相同。 

 
 AngularJs将在表达式书写的位置"输出"数据。 

 
 AngularJS 表达式 与 JavaScript 表达式 

 
 类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。 

 
 与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。 

 
 与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。 

 
 与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。 

 
 注意： 

 
 ng-model是用于表单元素的，支持双向绑定。对普通元素无效； <input> 元素 <select> 元素（下拉列表）<textarea> 元素 <button> 元素  HTML5 增加了如下表单元素：<datalist><keygen><output> 

 
 ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素； 

 
 当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。 

 
 ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类： 

 
 ng-invalid:未通过验证的表单 

 
 ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true 

 
 ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过 

 
 ng-touched:布尔值属性，表示用户是否和控件进行过交互 

ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

AngularJS中$scope的基本使用方法，先看一段代码：

 
        01 <!doctype html>
 
        02 <html lang="en">
 
        03 <head>
 
        04     <meta charset="UTF-8" />
 
        05     <title>Document</title>
 
        06     <script type="text/javascript" src="../js/angular.min.js"></script>
 
        07 </head>
 
        08 <body>
 
        09     <div ng-app='app' ng-controller='ctrl'>
 
        10         <input type="text" ng-model='name' />
 
        11         <h1 ng-bind='name'></h1>
 
        12         <h2>{{name}}</h2>
 
        13     </div>
 
        14 </body>
 
        15 </html>
 
        16 <script type="text/javascript">
 
        17     var m = angular.module('app', []);
 
        18     m.controller('ctrl', ['$scope', function($scope){
 
        19         $scope.name = 'K`illDemo';
 
        20     }]);
 
        21 </script>

$scope服务是方法与属性的集合，用于与视图进行交互，使用ng-bind或ng-model等指令，在视图中展示数据写在大括号内{{expression}}。

angular.module()，第一个参数是模块名称，与html代码中的ng-app对应，第二个参数是一个数组，表示这个模块要依赖其他的模块，目前还没有需要依赖的模块，所以这一点后面的笔记中再说。

上面定义模块的js代码还可以这样写：

 
        1 var m = angular.module('app', []);
 
        2 m.controller('ctrl', function($scope){
 
        3     $scope.name = 'K`illDemo';
 
        4 });

使用上面这种写法的时候，controller中的回调函数形参必须是$scope，如果换成其他的就会出错，因为Angular服务中只有$scope，换成其他的就找不到了。

如果用最开始的那种写法，那么回调函数中的形参可以自定义，比如a、b、c、d等等都可以：

 
        1 var m = angular.module('app', []);
 
        2 m.controller('ctrl', ['$scope', function(a){
 
        3     a.name = 'K`illDemo';
 
        4 }]);

一把情况下，为了保持命名规范，我们都用本文最开始的那种写法。

下面来做一个实例，比如我要做一个购物车，可以为用户展示商品单价，最多选购数量，然后计算出总价，代码如下：

 
        01 <!doctype html>
 
        02 <html lang="en">
 
        03 <head>
 
        04     <meta charset="UTF-8" />
 
        05     <title>Document</title>
 
        06     <script type="text/javascript" src="../js/angular.min.js"></script>
 
        07 </head>
 
        08 <body>
 
        09     <div ng-app="app" ng-controller="ctrl">
 
        10         <p>商品名称：{{goods.data.name}}</p>
 
        11         <p>商品单价：{{goods.data.price}}元</p>
 
        12         <p>购买数量：{{goods.data.num}}</p>
 
        13         <p>商品总价：{{goods.data.price*goods.data.num}}</p>
 
        14         <p>
 
        15             <button ng-click='goods.add()'>增加</button>
 
        16             <button ng-click='goods.reduce()'>减少</button>
 
        17         </p>
 
        18     </div>
 
        19 </body>
 
        20 </html>
 
        21 <script type="text/javascript">
 
        22     var m = angular.module('app', []);
 
        23     m.controller('ctrl', ['$scope', function($scope){
 
        24         $scope.goods = {
 
        25             'data' : {
 
        26                 'name' : 'K`illDemo的AngularJs学习笔记',
 
        27                 'price' : '300',
 
        28                 'num' : '1'
 
        29             },
 
        30             'add' : function(){
 
        31                 //最多只能买6套
 
        32                 $scope.goods.data.num = Math.min(++$scope.goods.data.num, 6);
 
        33             },
 
        34             'reduce' : function(){
 
        35                 //最少是0套
 
        36                 $scope.goods.data.num = Math.max(--$scope.goods.data.num, 0);
 
        37             }
 
        38         };
 
        39     }]);
 
        40 </script>

K'illCode

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
AngelarJS学习笔记1

基本定义：1.ng-app = "" 定义了angularJs的使用范围;2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值，有多个变量时，中间用分号隔开；3.ng-model = "变量" 定义变量名;4.ng-bind = "变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}};
复制链接

扫一扫

专栏目录