angularjs知识点 

<!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>

 

posted @ 2018-10-30 22:17  jentary  阅读(370)  评论(0)    收藏  举报