Angular基础(下)

作者: 小纸人儿 | 来源:发表于2016-11-10 12:02 被阅读52次

    $http

    $http 服务是核心服务,用于与服务器通信,通过浏览器的 XMLHttpRequest 对象或通过 jsonp
    要使用 $http 服务需要在 controller 中注入 $http 模块
    $http 使用 promise 规范
    

    1、$http method
    设置请求的方式:get , post , jsonp , head , put , delete , patch

    2、$http headers
    设置请求头信息

    var req = { 
           method: 'GET',
           url: '/ajax/api/path',
           headers: { 'Content-Type': 'pplication/json' }
    }
    $http(req).then(function(response){ //请求成功时}, function(error){ //请求失败时});
    

    3、$http.get

    $http.get("url").then(function(response){
           //请求成功时
        }, function(error){ 
          //请求失败时
    });
    

    4、$http.post

    $http.post("url").then(function(response){
           //请求成功时
        }, function(error){ 
          //请求失败时
    });
    

    5、$http.jsonp

    $http.jsonp("url").then(function(response){
           //请求成功时
        }, function(error){ 
          //请求失败时
    });
    

    Angular路由

    Angular路由用于集成外部文件,是三方插件提供的服务,并不属于Angular自身的服务
    路由效果类似于选项卡,tab切换,不同的是路由可回退到上一次浏览的页面
    路由一般有两种写法:ng-route(pc) 、ui-route(移动端)
    

    1、载入实现路由的js文件 angular-route.js
    (该js版本需低于引用的angular.min.js)

    2、包含了ngRoute模块作为主应用模块的依赖模块

        var app = angular.module( 'myapp' , ['ngRoute'] );
    

    3、使用ngview指令,不用赋值

       <div ng-view></div>
    

    4、配置$routeProvider,用来定义路由规则

    <!DOCTYPE html>
    <html ng-app="myapp">
        <head>
            <meta charset="UTF-8">
            <title> Angular 路由 </title>
            <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/angular-route.min.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body ng-controller="mycont">
            <h1>{{ title }}</h1>
            <nav>
                <a href="#page1">首页</a>
                <a href="#page2">子页</a>
                <a href="#page3">详情页</a>
                <a href="#page4">购物车</a>
            </nav>
            <div ng-view></div>
        </body>
        <script type="text/javascript">
            var app = angular.module('myapp' , ['ngRoute']);
                  // config 用来定义路由规则
            app.config( function($routeProvider){
                $routeProvider
                .when('/page1' , {template:'<p>这是首页</p>'})
                .when('/page2' , {template:'<p>这是子页</p>'})
                .when('/page3' , {template:'<p>这是详情页</p>'})
                .when('/page4' , {template:'<p>这是购物车</p>'})
                .otherwise({redirectTo:'/page3'})
            } )
            app.controller('mycont' , function($scope){
                $scope.title = '路由练习';
            })
        </script>
    </html>
    
    Paste_Image.png

    相关文章

      网友评论

        本文标题:Angular基础(下)

        本文链接:https://www.haomeiwen.com/subject/elutpttx.html