angularJS中-$route路由-$http(ajax)的使用 - diligenceday－IT工程師數位筆記本

文章出處

　　后臺請求使用的是nodeJS驅動(后面帖代碼),很簡單的RESTFUL, 頁面使用的是bottstarp3.0(懶人神器);

　　第一個例子:

　　在本地架設NODEJS, angular的所有請求都是請求本地的3000端口, 這個例子展示的是angular用GET請求服務器的list.json, 1.json, 2.json等文件;

　　POST請求/0和/id這兩個地址：

運行下面代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
    <!--
    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
    -->
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-resource.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
    
</head>
<body ng-app="app">
    <script type="text/javascript">
           var app = angular.module("app",["ngResource",'ngRoute']);
    </script>
    
    <div class="panel panel-default">
        <div class="panel-heading">

        </div>
        <div class="panel-body" ng-controller="reso">
            <table class="table">
                <tr>
                    <td>name</td>
                    <td>age</td>
                </tr>
                <tr ng-repeat="i in users">
                    <td> {{i.name}} </td>
                    <td> {{i.age}} </td>
                </tr>
            </table>
            <button class="btn btn-default" ng-click="update(1)">
            query_1.json
            </button>
            <button class="btn btn-default" ng-click="update(2)">
            query_2.json
            </button>
            <button class="btn btn-danger" ng-click="update(0)">
            GET_0.json
            </button>
            <button class="class btn btn-waring" ng-click="post(0)">
            POST_0.json
            </button>
            <table class="table">
                <tr ng-repeat="i in msgs">
                    <td class="alert-warning alert"> {{i.id}} </td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript">
                                    //所有的依賴都要在外部定義好;
    var app = angular.module("app", ["ngResource",'ngRoute']);
    app.factory('Geek', function($resource) {
        var url = "http://127.0.0.1:3000";
        //直接新建一個REST服務, 相當于提供了一堆請求的合集;
        return $resource(url + "/:id.json", {}, {
            query: {
                method: "GET",
                params: {
                    id: "list"
                },
                isArray: true
            },
            get : {
                method : "GET",
                params : {
                    id : "0"
                }
            },
            save : {
                method : "POST",
                params : {
                    id : "id"
                }
            }
        });
    });
    app.factory("http",function($http) {
        var url = "http://127.0.0.1:3000";
        return function(search,data) {
           return $http.post(url+search, data);
        };
    });
    function reso($scope, Geek, http, $rootElement) {
        $scope.users = Geek.query();
        //$scope.post = 
        window.root = $rootElement;
        $scope.post = function(id) {
            http("/0").then(function(r){
                var data = r.data;
                //var data = JSON.stringify(r.data);
                //var aEl = angular.element('<div class="alert alert-success" role="alert">'+data+"</div>");
                //root.append( aEl )
                $scope.msgs = data.list;
                x = msgs
            });
            //有加了一個請求數據就報了跨域問題,臥槽;
            //而且請求的方式變成了OPTION,我讀書少別逗我啊;
            http("/0",id).then(function(r){
                var data = r.data;
            });
        };
        
        $scope.update = function(id) {
            Geek.query({
                id: id
            }).$promise.then(function(r) {
                $scope.users = r;
            })
        };
    };
    </script>
</body>
</html>

　　這個例子的gruntFile.json文件是這樣的, 用了nuysoft的Mock, 通過npm install Mockjs,不要忘記了

運行下面代碼

{
  "name": "nono",
  "version": "0.0.0",
  "description": "for watch",
  "main": "Gruntfile.js",
  "dependencies": {
    "grunt": "~0.4.5",
    "express": "~3.15.2",
    "grunt-contrib-connect": "~0.6.0",
    "grunt-contrib-watch": "~0.5.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "sqqihao.github.com"
  },
  "keywords": [
    "nono"
  ],
  "author": "nono",
  "license": "__MIT__"
}

　　nodejs的文件內容如下(安裝nodejs很簡單的, 下載以后復制到全局變量即可哦)

運行下面代碼

var express = require('express')
    , http = require('http')
    , path = require('path');

var Mock = require('mockjs');
var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
    app.use(express.errorHandler());
};

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

app.get('/', function( req, res){
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    res.send("you are welcom!");
});

app.get("/list.json",function(req, res) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    res.send([{
        name : "nono",
        age : 26
    },{
        name : "hehe",
        age : 24
    }]);
});


app.get("/0.json",function(req, res) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    res.send([{
        name : "youare",
        age : "welcome"
    }]);
});


app.get("/1.json",function(req, res) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    res.send([{
        name : "yy",
        age : 22
    },{
        name : "niubiu",
        age : 50
    }]);
});

app.get("/2.json",function(req, res) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    res.send([{
        name : "ddp",
        age : 33
    },{
        name : "makiro",
        age : 20
    }]);
});

app.post("/0",function(req, res) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    data.list = Mock.Random.shuffle(data.list);
    res.send(data);
});

app.post("/id",function(req, res) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    res.send("yy");
});

http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
});

　　第二個例子:　　

　　我們在firefox或者是chrome里面一直用console.log 等打log的方法, angular對這些方法進行了簡單的封裝:

運行下面代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
    <!--
    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
    -->
    <!--
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-resource.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
    -->
</head>
<body ng-app="app">
    <script type="text/javascript">
           var app = angular.module("app",[]);
    </script>

    <div class="panel panel-default">
        <div class="panel-heading">
            $log()的使用, 主要用來調試:
        </div>
        <div class="panel-body"  ng-controller="LogController">
            <div class="alert alert-success">
                <input class="btn" type="text" ng-model="message"/>
                <button class="btn btn-danger" ng-click="$log.log(message)">log</button>
                <button class="btn btn-danger" ng-click="$log.warn(message)">warn</button>
                <button class="btn btn-danger" ng-click="$log.info(message)">info</button>
                <button class="btn btn-danger" ng-click="$log.error(message)">error</button>
            </div>
        </div>
        <script type="text/javascript">
        app.controller('LogController', ['$scope', '$log', function($scope, $log) {
          $scope.$log = $log;
          $scope.message = 'Hello World!';
        }]);
        </script>
    </div>
</body>
</html>

　　例子3:

　　angular的路由處理, ng-view的使用, 所有對應路由的模板會在標志有ng-view屬性的div中顯示. 我們通過url控制頁面對應的邏輯是個好主意么么噠;

運行下面代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
    <!---->
    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
    
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-resource.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
    
</head>
<body ng-app="app">
    <script type="text/javascript">
           var app = angular.module("app",['ngRoute']);
    </script>

    <!--使用angular的路由處理-->
    <div class="panel panel-default">
        <div class="panel-heading">
            ng-view的實例
        </div>
        <div class="panel-body" ng-controller="route">
            <ul class="nav nav-pills" role="tablist" >
                <li  role="presentation"  ng-repeat="id in [1, 2, 3 ]">
                    <a href="#/list/{{ id }}"> ID{{ id }}</a>
                </li>

            </ul>
            <div ng-view></div>    
        </div>
    </div>
    <script type="text/javascript">
        app.controller("route",function(){});
        //app.controller("hehe", );
        //路由是定義在app的config里面的;
        app.config(function($routeProvider, $locationProvider) {
            console.log($routeProvider);
            /*
            app.controller("hehe", function($scope, $routeParams) {
                $scope.ver = $routeParams.bookId
                //$scope
            });
            */
            $routeProvider.when('/list/:bookId', {
                template: '<div>This is in page : <a href="#/list/{{ver}}/detail">href-to-{{ver}}</a></div>',
                controller : function($scope, $routeParams) {
                    $scope.ver = $routeParams.bookId
                }
            })
            .when('/list/:bookId/detail', {
                template : "<div>this is detail : {{bookId}}</div><a href='#/list/{{bookId}}'>back</a>",
                controller : function($scope, $routeParams) {
                    console.log( $routeParams )
                    $scope.bookId =  $routeParams.bookId;
                }
            })
            //剩下的走這路由
            .otherwise;

        })
    </script>
</body>
</html>