AngularJS的简单实用

Posted 2020-10-06 LuckyDan

Angular Js 的初步认识和使用
    一:
        1.模块化
            定义模块和控制器  ng-app="myapp"  controller="myctrl"
            指定模型  ng-model=""
            获取的属性值: ng-bind="属性名"或者{{属性名}}  
        2.初始化模块(在Script中进行)
            var myapp1 =angular.module("myapp",[]);
        3.定义模块的控制器,并依赖注入,
            $scope:可以操作模块作用域内的所有视图
            myapp1.controller("myctrl",["$scope",function($scope){
                $scope."属性名"
                // 也可以对$scope操作的视图进行赋值
                $scope."属性名"="值";
            }])
        4.绑定事件
            //其他事件联想基本为:ng-动作
            ng-click="clear()"
            
            在定义的模块控制器中进行事件函数的后续操作:
                $scope.clearSop=function(){
                    $scope.name="";
                }
        5.集合数据的遍历
            数据格式范例:对象数组一般的数据类型(进行页面数据交互时因注意json的数据格式)
                $scope.products = [
                    {
                        id : 1001,
                        name : ‘数码相机‘,
                        price : 3000
                    },{
                        id : 1002,
                        name : ‘苹果手机‘,
                        price : 7000
                    }
                ];
            遍历样式:product相当于元素,products相当于集合,index为索引
                <tr ng-repeat="product in products">
                    <td>{{$index+1}}</td>
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                </tr>
        6.AngularJS中的路由的使用
            1.需要单独导入:angular-route.js文件
            2.定义angular模块
            3.初始化模块
            4.路由中的路径格式采用:"#/+url"
            5.使用ng-view的模块用来展示路由加载后的变化内容
            6.初始化模块:
                var myapp1=angular.module("myapp",["noRoute"]);
            7.配置模块的路由
                myapp.config(["$routeProvider", function($routeProvider){
                    $routeProvider
                     .when(‘/JavaEE‘, {
                         templateUrl: ‘5_1.html‘
                     })
                     .when(‘/ios‘, {
                         templateUrl: ‘5_2.html‘
                     })
                     .when(‘/android‘, {
                         templateUrl: ‘5_3.html‘
                     })
                     .otherwise({
                         redirectTo: ‘/JavaEE‘
                     });
                }]);