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 id="a_temple" type="text/ng-template">
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>

 

posted @ 2017-06-30 16:13  Westbrook维  阅读(1287)  评论(0)  编辑  收藏  举报