angular 学习笔记 (3) -- ajax、npm安装angular和路由基础

过了一个星期才重新开始angular学习之路，这一周做了中国软件杯的收尾工作，

一：完成一个桌面端管理页面，我用了前面学习的ng指令之类的做了一个管理员页面，

1、总结一下angualr的ajax请求和image标签报错之后的正确写法：（先注入$http）

  1   function (){      
　　　　　　  $http.get('https://www.aloneness.cn/library_5/checkAdministrator' , {
   2                   params: {
   3                       account: $scope.user.username,
   4                       password: $scope.user.password
   5                   }
   6              }).then( function  (result) {   //  正确请求成功时处理 
  7                   console.info(result);
   8     
  9                   }
  10              }). catch ( function  (result) {  //  捕捉错误处理 
 11                   console.info(result);
  12               });
  13  
 14          }

.success已经不可以用了。

2、如果是豆瓣的接口，也会出现跨域问题。很烦。所以找了一些解决方案。

     var  top = angular.module('top',['ngRoute','moviecat.services.http']); //  注入依赖 
 

HttpService.jsonp(  //  前面要注入HttpService 
                'http://api.douban.com/v2/movie/in_theaters' ,
                { start:  1, count: 10 },
                  function  (data) {
                    console.log(data);
                      //   $apply的作用就是让指定的表达式重新同步 
                });

还有添加一个http.js文件。

( function  (angular) {
    //   由于默认angular提供的异步请求对象不支持自定义回调函数名 
   //   angular随机分配的回调函数名称不被豆瓣支持 
   var  http = angular.module('moviecat.services.http' , []);
  http.service( 'HttpService', ['$window', '$document',  function  ($window, $document) {
      //   url : http://api.douban.com/vsdfsdf -> <script> -> html就可自动执行 
     this .jsonp =  function  (url, data, callback) {
        var  fnSuffix = Math.random().toString().replace('.', '' );
        var  cbFuncName = 'my_json_cb_' +  fnSuffix;
        //   不推荐 
      $window[cbFuncName] =  callback;
        var  querystring = url.indexOf('?') == -1 ? '?' : '&' ;
        for  ( var  key  in   data) {
        querystring  += key + '=' + data[key] + '&' ;
      }
      querystring  += 'callback=' +  cbFuncName;
        var  scriptElement = $document[0].createElement('script' );
      scriptElement.src  = url +  querystring;
      $document[ 0 ].body.appendChild(scriptElement);
    };
  }]);
})(angular);

3、正常使用image会报404错误，所以要把它修改为

 <  img   ng-src  =""   alt  =""  >

二：在本地运行angular官方文档：还没有FQ，所以只能这样了。

三：温习一下安装angular的步骤，因为今天写的时候居然忘了。顺便把路由也写上来。

四：总结一些路由的使用语法。

  1  <body ng-app="app">
  2      <ul>
  3          <li><a href="#/a">A</a></li>
  4          <li><a href="#/b">B</a></li>
  5          <li><a href="#/c">C</a></li>
  6      </ul>
  7      <div ng-view></div>
  8      <script src="node_modules/angular/angular.js"></script>
  9      <script src="node_modules/angular-route/angular-route.js"></script>
 10      <script >
 11          <!-- 只有type="text/javascript"的script节点才会被当做JS执行 -->
 12          <!-- script中的内容就算不能执行，也不可以显示在界面上 -->
 13          <h1>{{name}}</h1>
 14      </script>
 15  
 16      <script>
 17           var  app = angular.module("app",['ngRoute' ]);
  18          app.config(['$routeProvider', function  ($routeProvider){
  19               $routeProvider
  20                      .when('/a',{controller:'aController',templateUrl:'a_temple' })
  21                      .when('/b',{controller:'bController',templateUrl:'a_temple' })
  22                      .when('/c',{controller:'cController',templateUrl:'a_temple' })
  23                      .otherwise({redirectTo: '/a'});  //   其他请求跳转到一个地址 
 24           }]);
  25          app.controller('aController',['$scope', function  ($scope){
  26              $scope.name = "这是a控制器"
 27           }]);
  28          app.controller('bController',['$scope', function  ($scope){
  29              $scope.name = "这是b控制器"
 30           }]);
  31          app.controller('cController',['$scope', function  ($scope){
  32              $scope.name = "这是c控制器"
 33           }]);
  34      </script>
 35  </body>

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did222787

更新时间：2023-05-07 阅读：39次