Angular.js 的初步认识

时间：2023-11-21 13:12:14

MVC模式

模型(model)－视图(view)－控制器(controller)

Angular.js采用了MVC设计模式的开源js框架

1、如何在angular.js建立自己的模块(model)，控制器(controller)，操作模型数据。

　　

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="js/angular.js"></script>

    <!--这里我们需要引入一个angular.js -->

</head>

<!--④：在body中，声明执行myCtrl控制器-->

<body ng-controller="myCtrl">

<!--用双花括号括起来来引用，创建好的模型数据  -->

<p>{{name}}</p>

<script>

    //①：    模块的声明

   var app= angular.module("myApp",['ng']);

    //③： 控制器的声明

    app.controller('myCtrl',function($scope){

        console.log('in my contro function');

        //⑤：操作模型数据

        //$scope是建立模型数据和视图的桥梁

        $scope.name='web1608';

    });

</script>

</body>

</html>

2、ng指令

　　对于图像数据(ng-src)和(ng-click)的引用　

<button ng-click="add()">＋1</button>

<img ng-src="img/{{imgUrl}}"/>
<script>

    //模块的声明

    var app=angular.module('myApp',['ng']);

    //控制器的声明

    app.controller('myCtro',function($scope){

        $scope.num=10;

        $scope.imgUrl='1.jpg';

        $scope.add=function(){

            $scope.num++;

            console.log($scope.num);

        }

    })

</script>

需要使用img的src属性是同样 也要用ng指令中定义好的ng-src  来使用模型数据。否则浏览器显示后会提示有错误 .

　　使用(ng-repeat)来遍历数据：

 <!DOCTYPE html>

 <html ng-app="myApp">

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script src="js/angular.js"></script>

 </head>

 <body ng-controller="myCtro">

 <!--简易 添加 数据和 删除 数据  ng-repeat  -->

 <table>

     <thead>

     <tr>

         <th>单价</th>

         <th>数量</th>

         <th>小计</th>

         <th>删除</th>

     </tr>

     </thead>

     <tbody>

     <!--ng-repeat  遍历方式①  -->

     <tr ng-repeat="shop in cart track by $index">

     <!--shop in cart  是遍历数组对象cart 给shop(自己命名) 和 for in 类似 -->

     <!--track by $index  每个遍历过程的shop 都有一个下标 $index-->

         <td ng-repeat="(key,value) in shop">

         <!-- ng-repeat 遍历方式② -->

         <!--  遍历shop 关联数组 方式 ： 键对值-->

             {{value}}

         </td>

         <td>

             <button ng-click="delete($index)">删除</button>

         </td>

     </tr>

     </tbody>

 </table>

 <button ng-click="add()">添加</button>

 <script>

     var app=angular.module('myApp',['ng']);

     app.controller('myCtro',function($scope){

         $scope.cart=[

             {cname:'冰箱',price:1000,num:1},

             {cname:'烤箱',price:300,num:1},

             {cname:'保鲜箱',price:200,num:1},

         ];

         $scope.delete=function($index){

             //对cart进行删除操作

             $scope.cart.splice($index,1);

         }

         $scope.add=function(){

             //直接入栈 添加新数据

             $scope.cart.push({cname:'保鲜箱',price:200,num:1});

         }

     })

 </script>

 </body>

 </html>

　　显示结果:
Angular.js 的初步认识

相关文章