Angular自定义服务&&路由

作者: 西巴撸 | 来源:发表于2017-04-16 09:14 被阅读117次

Angular自定义服务&&路由
网页设计 - 收藏集 - 掘金
焦点领动【功能升级】2020年4月第一周：新增全站AMP功能
第十二章这火，你得灭
AMP是如何提升性能？
AE表达式名词解释
为学习Ajax做的准备
AE表达式--抖动
AMP vs MIP
【黑苹果】关于CodecCommander定制过程中耳机杂音修复

什么是跨域

不同域名之间进行数据访问，默认情况下是不允许的。

是谁导致了跨域

是浏览器导致了跨域，为了数据的安全。

怎样解决跨域

使用插件
JSONP

Ajax和jsonp是同一个东西么

Ajax的核心是通过XmlHttpRequest获取非本页内容
而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

JSONP的实现原理

**示例代码 : **

<script>
    function fn(res) {
        console.log('callback' + '---------' + res);
    }
</script>
<script src="01-jsonp.php?callback=fn"></script>

然后需要在根目录下创建一个PHP的文件来调用js脚本
**示例代码 : **

<?php
$fn = $_GET['callback'];
// echo "alert(1)";    // 服务器返回的js代码是可以直接在浏览器中执行的
echo $fn."('xiba')";

$http服务

**示例代码 : **

<body ng-app="app" ng-controller="appController">

<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    // 注入$http模块
    app.controller('appController', ['$scope', '$http', function ($scope, $http) {
        // get请求
        $http({
            // 请求地址 自己在网上找个地址 模拟一下
            url: '02.php',
            // 请求方式
            method: 'get',
            // get方式传递参数  在传递过程当中 会自动帮你转成 get.php?name=xiba 传递时->name:xiba
            parmas:{
                name:'xiba'
            }
        }).success(function (res) {
            // 成功回调 angular版本是1.6以下 1.6以上不是用success回调
            console.log(res);
        }).error(function (error) {
            // 失败回调 angular版本是1.6以下 1.6以上不是用error回调
            console.log(error);
        });

        // post请求
        $http({
            url:'02.php',
            method:'post',
            // post 请求必须设置请求头
            // 当设置请求头的时候为application/x-www-form-urlencoded是以soap 以对象形式传递.
            // SOAP: 以对象形式来进行传递
            // RESTFUL：json串形式进行传递。
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            //data:{data:{} 传参形式  在传递数据时，是以json来传递的name:"xiba" json串 }
            data:'name:xiba'
        });
    }]);
</script>
</body>

自定义服务

什么是服务

angular在一开始就帮我们定义一些功能。我可以直接使用这些功能。
都是一个方法或者一个对象的形式来调用指定的功能。
想要使用这些服务。必须得要注入。
谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。

内置服务：

$location $log $timeout $interval $http $filter
angular允许开发自己根据自己的需求来自定义自己的功能。

自定义服务分为三种

factory 直接就是一个对象
service 通过new形式创建的对象就可以在里面使用this.
provider对上面定义的服务进行配置。可以在开始的时候，让服务有哪些功能，或是去掉哪些。
服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用。
服务它是一个单例。
value 当作是一个全局常量

factory自定义服务 --> 直接就是一个对象

**示例代码 : **

<body ng-app="app" ng-controller="appController">

<h3>{{date}}</h3>
<h3>{{dateTime}}</h3>

<script src="../js/angular.js"></script>
<script>
    // 创建模块
    var app = angular.module('app', []);

    // 自定义服务 factory
    app.factory('myFac1', function () {
        return function () {
            console.log('自定义了一个服务');
        }
    });
    // 自定义服务 factory
    app.factory('myFac2', function () {
        function say() {
            console.log('hello');
        }

        function hellow() {
            console.log('hello wawa');
        }

        return {
            say1: say,
            say2: hellow
        }
    });
    // 自定义服务
    app.factory('showTime', ['$filter', function ($filter) {
        function showDate() {
            var dateTime = new Date();
            return $filter('date')(dateTime, 'yyyy-MM-dd');
        }

        function showDateTime() {
            var dateTime = new Date();
            return $filter('date')(dateTime, 'yyyy-MM-dd hh:mm:ss')
        }

        return {
            showDate: showDate,
            showDateTime: showDateTime
        }
    }]);

    // 创建控制器
    app.controller('appController', ['$scope', 'myFac1', 'myFac2', 'showTime', function ($scope, myFac1, myFac2, showTime) {
        /*
         myFac1();
         myFac2.say1();
         myFac2.say2();
         */

        $scope.date = showTime.showDate();
        $scope.dateTime = showTime.showDateTime();
    }]);
</script>

</body>

service自定义服务 --> 通过new出来一个对象可以使用this

**示例代码 : **

<body ng-app="app" ng-controller="appController">
<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);

    app.service('mySer', function () {
        this.sayHellow = function () {
            console.log('hellow');
        }
        this.showTime = function () {
            console.log('show');
        }
    });
    app.service('formDate', function () {
        // 把一个对象转成name=xiba&age=10
        this.formD = function (obj) {
            var str = '';
            for (var key in obj) {
                str += key + '=' + obj[key] + '&'
            }
            return str.slice(0);
        }
    });

    app.controller('appController', ['$scope', 'mySer', 'formDate', '$http', function ($scope, mySer, formDate, $http) {
        /*
         mySer.sayHellow();
         mySer.showTime();
         var obj = {name:'xx',age:'11'}
         var str = formDate.formD(obj);
         console.log(str);
         */
        // 自定义一个php文件引入
        $http({
            url:'04-post.php',
            method:'post',
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            data:formDate.formD({
                name:"xiba",
                age:10
            })
        }).success(function (res) {
            alert(res);
        });
    }]);

</script>
</body>

value自定义服务 --> 全局常量

**示例代码 : **

<body ng-app="app" ng-controller="appController">
<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app',[]);
    /*
     * 常量：其值始终保持不变的量。
     * 变量：其值可以发生变化的量。
     * */
    app.value('version','1.1');
    app.value('key','xiba');
    app.value('url','www.baidu.com');

    /*2.创建控制器
     * 可扩展性。需求改动时， 不需要动太多的代码。
     * */
    app.controller('appController',['$scope','version','key',function ($scope,version,key) {
        console.log(key);
    }]);
</script>
</body>

配置块

配置服务，可以在开始的时候，让服务有哪些功能，或是去掉哪些。
通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。
比如$log、$http、$location都是内置服务
相对应的provider分别是$logProvider、$httpProvider、$locationPorvider。
**示例代码 : **

<body ng-app="app" ng-controller="appController">

<h3>{{name | chaUppercase}}</h3>

<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('appController', ['$scope', '$log', function ($scope, $log) {
        $log.log('debug');
        $scope.name = 'xiba';
    }]);
    /*配置：
     * 配置服务， 可以在开始的时候，让服务有哪些功能 ， 或是去掉哪些。
     * */
    app.config(['$logProvider', '$filterProvider', function ($logProvider, $filterProvider) {
        $logProvider.debugEnabled(false);
        $filterProvider.register('chaUppercase', function () {
            return function (input) {
                return input[0].toUpperCase() + input.slice(1);
            }
        });
    }]);
</script>
</body>

运行块

**示例代码 : **

<body ng-app="app" ng-controller="appController">
<h1>{{name}}</h1>
<h2>{{key}}</h2>

<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('appController', ['$scope', function ($scope) {

    }]);
    /*
     * 在开发中， 运行块，就用户一进来就要去执行的一任务，都可以放到run里面
     * */

    angular.module('app').run(['$rootScope', '$http', function ($rootScope, $http) {
        $rootScope.name = 'run';
        $http({
            url: '07-get.php',
            method: 'get',
        }).success(function (res) {
            $rootScope.key = res;
        }).error(function (error) {

        });
    }]);
</script>
</body>

Angular路由小demo

示例代码 : style

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .title {
        width: 800px;
        height: 64px;
        line-height: 64px;
        background: #000;
        color: #fff;
        margin: 0 auto;
        margin-top: 50px;
        display: flex;
    }

    .title li {
        flex: 1;
        float: left;
        text-align: center;
    }

    .content {
        width: 798px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid #000;
    }

    a {
        text-decoration: none;
        color: #fff;
        font-size: 25px;
    }

</style>

示例代码 : HTML&&Js


<body ng-app="app" >

<ul class="title">
    <li><a href="#/index/1">首页</a></li>
    <li><a href="#/index/2">流行</a></li>
    <li><a href="#/index/3">复古</a></li>
</ul>
<div class="content">
    <div ng-view></div>
</div>

<script src="../js/angular.js"></script>
<script src="../js/angular-route.js"></script>
<script>
    /* 配置路由
     * 传参两步：
     * 1.配置时，定义参数$routeProvider.when('/index/:id)
     * 2.跳转时，传递对应的参数   <a href="#/index/1">首页</a>
     * 3.获取参数： 在绑定的控制器当中，注入服务$routeParams
     *   app.controller('indexController',['$scope','$routeParams',function ($scope,$routeParams) {
     * */
    var app = angular.module('app', ['ngRoute']);
    app.controller('appController', ['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {
        $http({
            url: '11-listMusic.php',
            method: 'get',
            params: {
                id: $routeParams.id
            }
        }).success(function (res) {
            $scope.listM = res;
        })
    }]);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/index/:id', {
            templateUrl: '11-music_tpl.html',
            controller: 'appController'
        }).otherwise({
            // 设置默认跳转的路由
            redirectTo: 'index/1'
        });
    }]);
</script>
</body>

示例代码 : 案例中的这个地址: url: '11-listMusic.php'

<?php

$list = array(
    array('id'=>1,'pid'=>2,'text'=>'我很丑可是我很温柔'),
    array('id'=>2,'pid'=>2,'text'=>'蒲公英的约定'),
    array('id'=>3,'pid'=>2,'text'=>'你我的约定'),
    array('id'=>4,'pid'=>3,'text'=>'pretty boy'),
    array('id'=>5,'pid'=>3,'text'=>'See You Again'),
    array('id'=>6,'pid'=>2,'text'=>'甜甜的'),
    array('id'=>7,'pid'=>1,'text'=>'再见我的爱人'),
    array('id'=>8,'pid'=>2,'text'=>'心中的日月'),
    array('id'=>9,'pid'=>3,'text'=>'Let It Go'),
    array('id'=>10,'pid'=>1,'text'=>'不要说再见'),
    array('id'=>11,'pid'=>3,'text'=>'Rise'),
    array('id'=>12,'pid'=>2,'text'=>'再见'),
    array('id'=>13,'pid'=>1,'text'=>'追梦人'),
    array('id'=>14,'pid'=>2,'text'=>'不能说的秘密'),
    array('id'=>15,'pid'=>4,'text'=>'오늘 하루'),
    array('id'=>16,'pid'=>1,'text'=>'昨日重现'),
    array('id'=>17,'pid'=>3,'text'=>'Love Me like you Do'),
    array('id'=>18,'pid'=>2,'text'=>'好久不见'),
    array('id'=>19,'pid'=>1,'text'=>'独角戏'),
    array('id'=>20,'pid'=>2,'text'=>'K歌之王'),
    array('id'=>21,'pid'=>1,'text'=>'往事随风'),
    array('id'=>22,'pid'=>3,'text'=>'Just Like Fire'),
    array('id'=>23,'pid'=>4,'text'=>'さよならの夏'),
    array('id'=>24,'pid'=>4,'text'=>'江南Style'),
    array('id'=>25,'pid'=>4,'text'=>'仆が死のうと思'),
    array('id'=>26,'pid'=>1,'text'=>'海阔天空'),
    array('id'=>27,'pid'=>4,'text'=>'天空之城'),
    array('id'=>28,'pid'=>1,'text'=>'不再犹豫'),
    array('id'=>29,'pid'=>4,'text'=>'仆が死のうと思'),
    array('id'=>30,'pid'=>3,'text'=>'Heart And soul'),
    array('id'=>31,'pid'=>4,'text'=>'오늘 하루'),
    array('id'=>32,'pid'=>1,'text'=>'往事只能回味'),
    array('id'=>33,'pid'=>3,'text'=>'Bang Bang'),
    array('id'=>34,'pid'=>4,'text'=>'さよならの夏'),
    array('id'=>35,'pid'=>3,'text'=>'Same Old Love'),
    array('id'=>36,'pid'=>4,'text'=>'さよならの夏'),
    array('id'=>37,'pid'=>4,'text'=>'恋恋风尘'),
);
$id = $_GET['id'];
$tempArray = array();
foreach ($list as $key=>$value){
    if ($id == $value['pid']){
       $tempArray[] = $value;
    }
}
echo  json_encode($tempArray);

模版案例中的这个地址 : templateUrl: '11-music_tpl.html'

<ul>
    <li ng-repeat="music in listM">{{music.text}}</li>
</ul>

好咯! 齐活咯! 大家晚安,有什么问题欢迎留言咨询 !!!

Angular自定义服务&&路由
什么是跨域不同域名之间进行数据访问，默认情况下是不允许的。是谁导致了跨域是浏览器导致了跨域，为了数据的安全。...
网页设计 - 收藏集 - 掘金
免费且又精致的 HTML/CSS 站点模板 - 前端 - 掘金&amp;amp;amp;amp;l...
焦点领动【功能升级】2020年4月第一周：新增全站AMP功能
新增全站AMP功能【AMP简介】AMP：Accelerated Mobile Pages，意思是移动页面加速。A...
第十二章这火，你得灭
“Ich bin Schnappi das kleine Krokodil Komm aus &amp...
AMP是如何提升性能？
AMP简介 Google推出移动网页加速项目AMPAMP介绍 AMP是如何提升性能？以下的优化点是AMP页面能被...
AE表达式名词解释
函数: - wiggle(freq, amp, octaves = 1, amp_mult = .5, t = t...
为学习Ajax做的准备
HTTP服务的搭建 AMP 知道了AMP是三个部分组成的 Apache：世界排名第一的服务器软件，特点是简单，速度...
AE表达式--抖动
表达式:wiggle(freq, amp, octaves = 1, amp_mult = .5, t = tim...
AMP vs MIP
谷歌AMP https://amp.dev/ 百度MIP https://www.mipengine.org/ 谷...
【黑苹果】关于CodecCommander定制过程中耳机杂音修复
查找类似上图中的节点（关键字：Stereo Amp-In Amp-Out 或 IN OUT HP EAPD De...

Angular自定义服务&&路由

什么是跨域

是谁导致了跨域

怎样解决跨域

Ajax和jsonp是同一个东西么

JSONP的实现原理

$http服务

自定义服务

什么是服务

内置服务：

自定义服务分为三种

factory自定义服务 --> 直接就是一个对象

service自定义服务 --> 通过new出来一个对象可以使用this

value自定义服务 --> 全局常量

配置块

运行块

Angular路由小demo

好咯! 齐活咯! 大家晚安,有什么问题欢迎留言咨询 !!!

相关文章

Angular自定义服务&&路由

网页设计 - 收藏集 - 掘金

焦点领动【功能升级】2020年4月第一周：新增全站AMP功能

第十二章这火，你得灭

AMP是如何提升性能？

AE表达式名词解释

为学习Ajax做的准备

AE表达式--抖动

AMP vs MIP

【黑苹果】关于CodecCommander定制过程中耳机杂音修复

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

Angular自定义服务&&路由

什么是跨域

是谁导致了跨域

怎样解决跨域

Ajax和jsonp是同一个东西么

JSONP的实现原理

$http服务

自定义服务

什么是服务

内置服务：

自定义服务分为三种

factory自定义服务 --> 直接就是一个对象

service自定义服务 --> 通过new出来一个对象 可以使用this

value自定义服务 --> 全局常量

配置块

运行块

Angular路由小demo

好咯! 齐活咯! 大家晚安,有什么问题欢迎留言咨询 !!!

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

service自定义服务 --> 通过new出来一个对象可以使用this