angularjs知識點

時間 2019-12-15
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
    <!--
    ng-app 邊界指令
    {{}}  呈現指令
    ng-model    信息指令  用於信息綁定
    ng-bind 綁定指令
    ng-init 初始化指令  :對邊界內數據模型初始化  習慣放在BODY上


    -->


</head>
<body ng-app="myApp">

<ul>
    <li><a href="#!home">首頁</a></li>
    <li><a href="#!liebiao">列表頁</a></li>



</ul>




<!--顯示頁 把路由templateUrl 頁面中的內容寫到該DIV中  並加上控制類-->
<div ng-view>





</div>


<script>
    var app = angular.module('myApp',['ngRoute']);

    //自定義服務
    app.service('hexafy', function() {
        this.myFunc = function (x) {
            return x.toString(16);
        }
    });

    //系統的服務不加$
    // 圖片和連接要加ng 指定
    // <img ng-src="{{}}"/><a ng-href="{{}}"></a>

    app.controller('homeCon',function ($scope, $route) {
        //$scope.$route = $route;
        $scope.name = '這是首頁';
        $scope.add = function () {
            alert('121212');
        }
    })
        .controller('liebiaoCon',function ($scope, $route, $http,hexafy) {
            //$scope.$route = $route;
            $scope.name = '這是列表頁';
            $scope.add = function () {
                alert('121212');
            }

            //發送http服務
            /*$http({
                method: 'GET',
                url: '/someUrl'
            }).then(function successCallback(response) {
                // 請求成功執行代碼
            }, function errorCallback(response) {
                // 請求失敗執行代碼
            });*/

            //POST請求要加headers不然服務器接受不到
            $http({
                method: 'POST',
                url: '/someUrl',
                headers:{
                    "Content-Type":"application/X-www-form-urlencoded"
                },
                data:""//用字符串  不能用{}
            }).then(function successCallback(response) {
                // 請求成功執行代碼
            }, function errorCallback(response) {
                // 請求失敗執行代碼
            });

            //過濾服務{{任意內容 | 過濾器}}

            //自定義過濾服務
            app.filter('reverse', function() { //能夠注入依賴
                return function(text) {
                    return text.split("").reverse().join("");
                }
            });
            //過濾篩選服務
           // <li ng-repeat='pname in pnames | filter:filter_input'></li>


            //監聽服務  $watch   不須要注入
            //在控制器中但是隨時使用

            $scope.InputValue = '';
            $scope.$watch('InputValue',function () {
                //監聽InputValue   變化就會觸發

            })




        })
        .config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/home',{
                templateUrl: 'home.html',
                controller: 'homeCon',
            })
            .when('/liebiao',{
                templateUrl: 'liebiao.html',
                controller: 'liebiaoCon',
            })
            .otherwise({
                redirectTo:'/home'//默認頁  只能用CODE
            });



    }]);


</script>

</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。