后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL, 页面使用的是bottstarp3.0(懒人神器);

 

　　第一个例子:

　　在本地架设NODEJS, angular的所有请求都是请求本地的3000端口,  这个例子展示的是angular用GET请求服务器的list.json, 1.json, 2.json等文件;

　　POST请求/0和/id这两个地址：

运行下面代码

     
      
       angular　　
       
            
        
             
         
              
          
               
               
           
                
            
                 
             
                  
              
                          var app = angular.module("app",["ngResource",'ngRoute']);            
               
                        
                
                                 
                 
                              
                  
                                                       name                    age                                
                   
                                         `i`.`name`                      `i`.`age`                                         
                    
                                 query_1.json                        
                     
                                  query_2.json                        
                      
                                   GET_0.json                        
                       
                                    POST_0.json                        
                        
                                         
                         
                                              
                          
                            `i`.`id`                                             
                           
                                                                //所有的依赖都要在外部定义好;    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('
                            
                             '+data+"");                //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;            })        };    };    

 

　　这个例子的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 environmentsapp.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 onlyif ('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对这些方法进行了简单的封装:

　　

运行下面代码

     
      
       angular　　
       
            
        
             
         
              
          
               
               
           
           
                
            
                        var app = angular.module("app",[]);        
             
                      
              
                           $log()的使用, 主要用来调试:                
               
                            
                
                                 
                                 
                 
                  log                
                  
                   warn                
                   
                    info                
                    
                     error                            
                     
                              app.controller('LogController', ['$scope', '$log', function($scope, $log) {          $scope.$log = $log;          $scope.message = 'Hello World!';        }]);            

 

 

　　例子3:

 
    
　　angular的路由处理, ng-view的使用, 所有对应路由的模板会在 标志有ng-view属性的div中显示.  我们通过url控制页面对应的逻辑是个好主意么么哒;
 
    
运行下面代码
 
    
 
    
     
      
       angular　　
       
            
        
             
         
              
          
               
               
           
                    
            
                 
             
                  
              
                   
               
                           var app = angular.module("app",['ngRoute']);        
                    
                
                         
                 
                              ng-view的实例                
                  
                               
                   
                                    
                    
                                         
                     
                       ID{ { id }}                                        
                      
                                           
                       
                                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: '
                        
                         This is in page : 
                         
                          href-to-`ver`
                         
                        
',                controller : function($scope, $routeParams) {                    $scope.ver = $routeParams.bookId                }            })            .when('/list/:bookId/detail', {                template : "
                        
                         this is detail : `bookId`
                        
                        
                         back",                controller : function($scope, $routeParams) {                    console.log( $routeParams )                    $scope.bookId =  $routeParams.bookId;                }            })            //剩下的走这路由            .otherwise;        })