Angular第一天学习

最新推荐文章于 2023-03-04 12:11:55 发布

qq_33571580

最新推荐文章于 2023-03-04 12:11:55 发布

阅读量434

点赞数 3

分类专栏： angular学习文章标签： angular 初级学习

本文链接：https://blog.csdn.net/qq_33571580/article/details/70821448

版权

angular学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Angular入门

先了解Angular官网https://code.angularjs.org,进入官网下载Angular框架.下载好在html中导入angular.min.js文件.1. 1. 在 <html ng-app> 根标签上，增加了一个ng-app属性.

2.<div ng-init="count=1;price=144"><!-- 增加了一个ng-init属性，属性值中定义了两个变量

3.<input type="text" ng-model="count"><br />

ng-app="myApp" 程序的运行人口,加载myApp模块.程序运行先找到运行人口再找到加载的主要模块.

4.<div ng-controller="myCtrl">

5. <input type="text" ng-model="hello"><br />

6. /*定义一个Angular模块*/var app = angular.module("myApp", []);在script 中 app.controller("myCtrl",function($scope){
$scope.hello = "hello angularjs！今天开始，要进行JS高级开发部分"
});

7.ng-repeat=""g in goodses" ==js中for...in循环.

8. 数据双向绑定，绑定的是标签中的属性值<==>JS中的变量当标签的属性值发生变化->angular自动给JS中的变量赋值或者JS中的变量发生变化->angular自动给标签中的属性值赋值.但是不会重复执行代码.所以我们通过通过$scope的$watch()函数来监视
/* 2.1.使用$watch监视一个变量 */
/*$scope.$watch("x", function() {
$scope.z = $scope.x * $scope.y;
});*/
/* 2.2.使用$watch监视多个变量,多个变量之间，通过+连接符连接起来 */
/*$scope.$watch("x + y", function() {
$scope.z = $scope.x * $scope.y;
})*/

/*3.1 对参与运算的数据进行监听，只要发生变化，就重复执行watch函数*/
/*$scope.$watch("nums.m + nums.n", function() {
$scope.nums.o = $scope.nums.m * $scope.nums.n;
});*/
/*3.2 对对象深层监控
* $watch()第三个参数，专门用于监控对象属性数据
* 第三个参数默认为false：表示不监控对象的属性数据
* 可以通过添加true参数的方式，来监控对象~属性。
*
* 注意：如果对象中参与运算的属性只有一个或者少数几个，就不要监控整个对象了！
* */

根据这我写了一个购物车功能:

<!DOCTYPE html>
<html ng-app="shop">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../Angular购物车进阶/js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="../Angular购物车进阶/js/lib/angular-1.6.4/angular.min.js"></script>
</head>
<body>
        <div class="container" ng-controller="shopping">
            <div class="row">
                    <div class="page-header">
                        <h2>我的购物车</h2>
                    </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <table class="table table-hover table-striped">
                        <tr>
                            <th>商品编号</th>
                            <th>商品名称</th>
                            <th>商品单价</th>
                            <th>购买数量</th>
                            <th>小计金额</th>
                        </tr>
                        <tr ng-repeat="goods in goodses">
                            <td>{{goods.goodsID}}</td>
                            <td>{{goods.goodsName}}</td>
                            <td >￥{{goods.goodsPrice}}</td>
                            <td><input type="text" ng-model="goods.count"></td>
                            <td>￥{{goods.goodsPrice*goods.count}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-body text-right">
                            总计金额: ￥<span ng-bind="totalQuantity()"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var app = angular.module("shop",[]);
            app.controller("shopping",function ($scope) {
                $scope.goodses = [
                    {goodsID:1, goodsName:"商品A", goodsPrice:130, count:1, subtotal:130},
                    {goodsID:2, goodsName:"商品B", goodsPrice:150, count:1, subtotal:150},
                    {goodsID:3, goodsName:"商品C", goodsPrice:170, count:1, subtotal:170},
                    {goodsID:4, goodsName:"商品D", goodsPrice:180, count:1, subtotal:180},
                    {goodsID:5, goodsName:"商品E", goodsPrice:190, count:1, subtotal:190},
                    {goodsID:6, goodsName:"商品F", goodsPrice:200, count:1, subtotal:200},
                ];
                $scope.totalQuantity = function(){
                    var total = 0
                    for(var i = 0 ; i <$scope.goodses.length;i++ ){
                        total += $scope.goodses[i].count * $scope.goodses[i].goodsPrice;
                    }
                    return total;
                }
//                $scope.$watch("goods.count+goods.goodsPrice",function () {
//                    $scope.total =$scope.goods.goodsPrice+$scope.goods.count;
//                })
            })
        </script>
</body>
</html>