angularjs学习文档（1）

来源：互联网发布：acl访问控制列表端口编辑：程序博客网时间：2024/05/18 04:00

我是学web前端的，为了跟的上技术潮流，最近开始学习了angular；这个是需要一定的js基础才可以学习的。

ng-app:是为了定义模块；

ng-controller:是设置控制器

scope：视图模型

下面这段代码是学习跟着敲的，关键的地方也做了注释

    <div ng-app="hd" ng-controller="ctrl"><!--视图-->        <h2 ng-bind="name"></h2>        <h1>{{name}}</h1>        <input type="text" ng-model="name">    </div>    <script>        var m=angular.module('hd',[]);//声明一个模块        //双向数据绑定        m.controller('ctrl',['$scope',function($scope){            //viewmodle            $scope.name="ww";        }])    </script>

用angular实现基本的购物车里的加减

<body ng-app="hd"><div ng-controller="ctrl">    商品名称：{{goods.title}};<br/>    商品价格：{{goods.price}};<br/>    购买数量：{{goods.num}};<br/>    总额：{{goods.price*goods.num}}<br/>    <button ng-click="add()">增加</button>    <button ng-click="reduce()">减少</button></div><script>    var m=angular.module('hd',[]);    m.controller('ctrl',['$scope',function($scope){        $scope.goods={'title':'apple','price':300,'num':0};        $scope.add=function(){            $scope.goods.num=Math.min(++ $scope.goods.num,6);        };        $scope.reduce=function(){            $scope.goods.num=Math.max(-- $scope.goods.num,0);        };    }])</script></body>

另外一种方法

<body ng-app="hd"><div ng-controller="ctrl">    商品名称：{{goods.data.title}};<br/>    商品价格：{{goods.data.price}};<br/>    购买数量：{{goods.data.num}};<br/>    总额：{{goods.data.price*goods.data.num}}<br/>    <button ng-click="goods.data.add()">增加</button>    <button ng-click="goods.data.reduce()">减少</button></div><script>    var m=angular.module('hd',[]);    m.controller('ctrl',['$scope',function($scope){        $scope.goods={            data:{'title':'apple','price':300,'num':0},            add:function(){                $scope.goods.data.num=Math.min(++ $scope.goods.data.num,6);            },            reduce:function(){                $scope.goods.data.num=Math.max(-- $scope.goods.data.num,0);            }        };    }])</script></body>

阅读全文

0 0