Angular第一天学习

来源：互联网发布：淘宝上小提琴教学视频编辑：程序博客网时间：2024/06/11 08:18

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>

3 0