angular---代码详解(第二篇)

蒲曦

2023-12-01

                       5.1作用域

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>作用域</title>
</head>
<body ng-app="App" ng-init="name='康熙'">
   
   <div class="box" ng-controller="ParentController">
      
      <nav>
         <a href="javascript:;">首页</a>
         <a href="javascript:;">列表</a>
      </nav>

      <div class="main" ng-controller="ChildController">
         <h4>{{name}}</h4>
      </div>

   </div>


   <script src="./libs/angular.min.js"></script>
   <script>
      
      var App = angular.module('App', []);

      App.controller('ParentController', ['$scope', function ($scope) {

         $scope.name = '雍正';

      }]);

      App.controller('ChildController', ['$scope', function ($scope) {

         // $scope.name = '乾隆';

      }]);

   </script>


   <script>
      
      // var a = 10;

      // function fn() {

      //     var a = 15;

      //     function bar() {

      //        alert(a);
      //     }

      //     alert(a);

      // }

      // fn();


      // 新建一个函数就会产生一个新的作用域
      // 并且子作用域可以访问父级作用域，父级不
      // 能访问子级的
   </script>
</body>
</html>

			6.1AngularJS 过滤器

				
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 过滤器</title>
</head>
<body ng-app="App">
   
   <ul ng-controller="DemoController">
      <li>{{price|currency:'￥'}}</li>
      <li>{{now|date:'yyyy/MM/dd hh:mm:ss'}}</li>
      <li>{{items|filter:'s'}}</li>
      <li>{{students|filter:{age: 16} }}</li>
      <li>{{students|json}}</li>
      <li>{{items|limitTo:-1}}</li>
      <li>{{str|uppercase|limitTo:3}}</li>
      <li>{{str|lowercase}}</li>
      <li>{{num|number:2}}</li>
      <li>{{items|orderBy: '':true}}</li>
      <li>{{students|orderBy: 'age': false}}</li>
   </ul>

   <script src="./libs/angular.min.js"></script>
   <script>
      var App = angular.module('App', []);

      App.controller('DemoController', ['$scope', function ($scope) {

         $scope.price = 11.11;

         $scope.now = new Date;

         $scope.items = ['html', 'css', 'js'];

         $scope.students = [
            {name: '小红', age: 16},
            {name: '小明', age: 16},
            {name: '小米', age: 10}

         ];

         $scope.str = 'hello Angular';

         $scope.num = '10.2345';


      }]);

      // var str = '10.5a';

      // alert(Number(str));
   </script>
</body>
</html>
           6.2   AngularJS 自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 自定义指令</title>
</head>
<body ng-app="App">
   
   <div ng-controller="DemoController">
      <h4>{{info|capitalize:123}}{{name}}</h4>
   </div>

   <script src="./libs/angular.min.js"></script>
   <script>
      
      var App = angular.module('App', []);

      // 自定义指令的
      App.directive('name', function () {
         return {
            // 
         }
      });

      // 自定义过滤器
      App.filter('demo', function () {

         return function (input) {
            console.log('hello' + input);

            return 'hello' + input;
         }
      });

      App.filter('capitalize', function () {
         // console.log(input);

         return function (input, arg2) {
            // console.log(arg2);
            return input[0].toUpperCase() + input.slice(1);
         }

      });

      // 自定义控制器的
      App.controller('DemoController', ['$scope', function ($scope) {

         $scope.name = '小明';

         $scope.info = 'my name is ';

      }]);

   </script>
</body>
</html>
	
			7.1AngularJS 依赖注入
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 依赖注入</title>
</head>
<body ng-app="App">
   
   <div class="box" ng-controller="DemoController"></div>

   <script src="./libs/angular.min.js"></script>
   <script>
      
      var App = angular.module('App', []);

      // AngularJS 内置一些具有特殊功能的“模块”
      // 开发者在开发的时候可以直接使用这些“模块”

      // 推断式依赖注入
      App.controller('DemoController', function ($scope, $http) {

      });

   </script>
</body>
</html>	 
				7.2
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 依赖注入</title>
</head>
<body ng-app="App">
   
   <div ng-controller="DemoController">
      <h3>{{name}}</h3>
   </div>

   <script src="./libs/angular.min.js"></script>
   <script>
      
      var App = angular.module('App', []);

      // 行内式注入
      App.controller('DemoController', ['$scope', '$http', function (abc, bcd) {

         abc.name = '依赖注入';

      }]);

   </script>
</body>
</html>
			8.1  AngularJS 服务
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 服务</title>
</head>
<body>

   <dl ng-controller="DemoController">
      <dt>{{title}}</dt>
      <dd>absUrl: {{absUrl}}</dd>
      <dd>url: {{url}}</dd>
      <dd>host: {{host}}</dd>
      <dd>search: {{search}}</dd>
      <dd>hash: {{hash}}</dd>
      <dd>protocol: {{protocol}}</dd>
      <dd>port: {{port}}</dd>
   </dl>
   <script src="./libs/angular.min.js"></script>
   <script>
      var App = angular.module('App', []);

      // $location内置服务

      // AngularJS 专门提供了一个帮你获URL地址一个服务

      App.controller('DemoController', ['$scope', '$location', function($scope, $location) {
         
         $scope.title = '学习$location服务';

         // $location就是angularJS提前封装好的
         // 提供获取地址相关信息的服务
         // console.log($location);

         $scope.absUrl = $location.absUrl();

         $scope.url = $location.url();

         $scope.host = $location.host();

         $scope.search = $location.search();

         $scope.hash = $location.hash();

         $scope.protocol = $location.protocol();

         $scope.port = $location.port();

      }]);

      for(var key in location) {
         console.log(key + '=>' + location[key]);
      }

      // 地址是有若干部分组合成的

      // http:// 协议
      // www.baidu.com / 124.12.134.12 主机
      // :8080 端口号
      // #abc  锚点
      // ?name=itcast&age=10 查询参数据(querystring)



      // function Person(name, age) {

      //     this.name = name;
      //     this.age = age;

      //     this.singing = function () {

      //     }
      // }

      // var service = new Person();
   </script>

</body>
</html>
                   8.2  AngularJS 服务
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 服务</title>
</head>
<body>
   <div ng-controller="DemoController">
      <ul>
         <li>{{msg}}</li>
         <li>{{now|date: 'yyyy-MM-dd hh:mm:ss'}}</li>
         <li><button ng-click="stop()">停</button></li>
      </ul>
   </div>
   <script src="./libs/angular.min.js"></script>
   <script>
      var App = angular.module('App', []);

      App.controller('DemoController', ['$scope', '$timeout', '$interval',function ($scope, $timeout, $interval) {

         $timeout(function () {
            // console.log('执行了');
            $scope.msg = '执行了';

         }, 3000);

         // var i = 0;

         var timer = $interval(function () {

            // console.log(++i);
            $scope.now = new Date;

         }, 1000);

         $scope.stop = function () {
            $interval.cancel(timer);
         }

      }]);

   </script>

</body>
</html>
				8.3  AngularJS 服务
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 服务</title>
</head>
<body>
   <ul ng-controller="DemoController">
      <li>价格: {{price}}</li>
      <li>大写：{{str}}</li>
      <li>截取: {{str1}}</li>
   </ul>
   <script src="./libs/angular.min.js"></script>
   <script>
   
      var App = angular.module('App', []);

      // $filter是过滤器
      App.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) {

         // $filter是九种过滤器中任何一个
         $scope.price = 11.11;

         var currency = $filter('currency');

         $scope.price = currency($scope.price);

         $scope.str = 'hello angular';

         var uppercase = $filter('uppercase');

         $scope.str = uppercase($scope.str);

         $scope.str1 = $filter('limitTo')($scope.str, 2);


      }]);

   </script>

</body>
</html>
				8.4AngularJS 服务
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 服务</title>
</head>
<body>
   <ul ng-controller="DemoController">
      
   </ul>
   <script src="./libs/angular.min.js"></script>
   <script>
      var App = angular.module('App', []);

      // 使用日志服务
      App.controller('DemoController', ['$log', function ($log) {

         $log.info('普通信息');

         $log.warn('警告信息');

         $log.error('错误信息');

         $log.log('打印信息');

         $log.debug('调试信息');

      }]);

   </script>

</body>
</html>
			8.5  AngularJS $http服务
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS $http服务</title>
</head>
<body ng-app="App">

   <div ng-controller="DemoController">
      
   </div>
   
   <script src="./libs/angular.min.js"></script>
   <script>
      
      var App = angular.module('App', []);

      App.controller('DemoController', ['$scope', '$http', '$log', function ($scope, $http, $log) {

         // 

         // $http 本质是对XMLHttpRequest对象封装
         // var xhr = new XMLHttpRequest;
         // 打开一个链接
         // xhr.open('get/post', 'example.php?name=itcast');

         // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

         // xhr.send('age=10');

         $http({
            url: 'example.php',
            // method: 'get',
            method: 'post',
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
            },
            params: { // get 参数
               name: 'itcast',
               sex: '男'
            },
            // data: 'age=10'
            data: { // post 传参
               age: 10
            }
         }).success(function (info) {
            // info 就是返回的数据
            $log.info(info);
         });

      }]);

      // 接口方式
      // SOAP RESTFUL

      // 一个说你该如何请求数据的文档

      // 请求地址: xxx/xxx.php
      // 请求方式：post
      // 参数：id [用户ID] page [页码]

      // 如下数据
      // [] '' {}


      // 传递的数据可以是'key=val&key=val'形式，这种形式叫formData
      // Content-Type 设成 application/x-www-form-urlencoded
      // 当请求数据类型不一样，后端在接收的时采取方法也不一样
      // 假如上述方式以PHP为例可以使用$_POST接收

      // application/json;charset=UTF-8 就是json对象形式传
      // Request Payload
      // 假如采用上述方式，以PHP为例$_POST就不能接收了

   </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS $http服务例子</title>
</head>
<body ng-app="App">
   
   <div ng-controller="StarController">
      <button ng-click="getData()">获取数据</button>
      <table>
         <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>头像</td>
            <td>专辑</td>
         </tr>
         <tr ng-repeat="star in stars">
            <td>{{star.name}}</td>
            <td>{{star.age}}</td>
            <td>{{star.sex}}</td>
            <td>{{star.photo}}</td>
            <td>{{star.ablum}}</td>
         </tr>
      </table>
   </div>

   <script src="./libs/angular.min.js"></script>
   <script>
      
      var App = angular.module('App', []);

      App.controller('StarController', ['$http', '$scope', '$log', function ($http, $scope, $log) {

         $scope.getData = function () {

            // 发送请求
            $http({
               url: './stars.php',
               method: 'get'
            }).success(function (info) {
               $log.info(info);

               $scope.stars = info;
            });

         }

      }]);

   </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS $http跨域</title>
</head>
<body ng-app="App">
   <div ng-controller="DemoController">
      
   </div>
   <script>
      
      function fn(arg) {

         console.log(arg);

         document.write('111');

      }
   </script>
   
   <!-- <script src="./jsonp.php?callback=fn"></script> -->

   <script src="./libs/angular.min.js"></script>
   <script src="./libs/jquery.min.js"></script>
   <script>
      
      // 1、JSONP 跟Ajax 没有关系
      // 2、$.ajax({

      // });

      // 3、$.ajax({
         // url: 'example.php',
         // type: 'post',
         // dataType: 'jsonp'
      // })

      // var script = createElement('script');
      // script.src = url;
      // var head = document.querySelector('head');
      // head.appendChild(script);
      // 

      // $.ajax({
      //     url: 'jsonp.php',
      //     dataType: 'jsonp'
      // });

      var App = angular.module('App', []);

      App.controller('DemoController', ['$http', '$scope', function ($http, $scope) {

         $http({
            url: 'jsonp.php?a=JSON_CALLBACK',
            method: 'jsonp' // 采用JSONP方式
         }).success(function (info) {
            console.log(info);
         });

      }]);

   </script>
</body>
</html>
			8.6  AngularJS 自定义服务
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 自定义服务</title>
</head>
<body>
   <div ng-controller="DemoController">

      <span>{{now}}</span>
   
   </div>
   <script src="./libs/angular.min.js"></script>
   <script>
      var App = angular.module('App', []);

      // 定义一个名叫showTime的服务

      App.factory('showTime', ['$filter', function ($filter) {

         // return function () {

         //     var now = new Date();

         //     var date = $filter('date');

         //     return date(now, 'y-M-d H:m:s');

         // }

         var now = new Date();

         var date = $filter('date');

         return {
            now: date(now, 'y-M-d H:m:s')
         }

      }]);

      App.controller('DemoController', ['$scope', 'showTime', function($scope, showTime) {

         // $scope.now = showTime();

         $scope.now = showTime.now;
         
      }])

   </script>

</body>
</html>
                      8.7 自定义服务
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 自定义服务</title>
</head>
<body>
   <div ng-controller="DemoController">
      <h1>{{now}}</h1>
   </div>
   <script src="./libs/angular.min.js"></script>
   <script>
      var App = angular.module('App', []);

      // 自定义服务显示日期
      App.service('showTime', ['$filter', function($filter) {

         var now = new Date();

         var date = $filter('date');
         
         this.now = date(now, 'y-M-d H:mm:ss');

      }]);

      App.controller('DemoController', ['$scope', 'showTime', function($scope, showTime) {
         
         $scope.now = showTime.now;

      }])

   </script>

</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 自定义服务</title>
</head>
<body>
   <div ng-controller="DemoController">
      {{author}}
      {{ver}}
   </div>
   <script src="./libs/angular.min.js"></script>
   <script>
      var App = angular.module('App', []);

      // 自定义常量服务
      App.value('author', 'itcast');
      App.value('version', '1.0');

      // 本质上一个服务
      // 从表现形式上是一个常量
      // 常量就是不变的值与变对量相对应

      // 声明依赖调用服务
      App.controller('DemoController', ['$scope', 'author', 'version', function($scope, author, version) {

         $scope.author = author;
         $scope.ver = version;
      }]);

   </script>

</body>
</html>

angular---代码详解(第二篇)

相关阅读

相关文章

相关问答

相关文档