AngularJS的簡單實用

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'
                     });
                }]);