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

最新推荐文章于 2024-05-13 14:54:25 发布
最新推荐文章于 2024-05-13 14:54:25 发布
阅读量369 收藏
点赞数 1
分类专栏： angularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angularWQ/article/details/62289917
版权 
                       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>
王大强~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【荐】Angular官方代码风格指南
野草园
12-23 1114
本文为笔者对Angular官网风格指南的整理版本，删除／增加了部分内容。另外，原文对每个规范都作出了原因的解释，个别还有示例，需要的请点击查看原文。原链接：英文文档 ／ 中文文档单一职责单一文件 一个文件定义一样东西，比如一个组件、一个服务、一个管道、一个指令 每个文件最多不要超过400行 单一函数 定义功能单一的函数 一个函数最多不要超过75行 命名规范 文件名采用feature.type.*
Angular ng-class详解及实例代码
09-01
因此，推荐使用第2和第3种方式，将类的逻辑保留在HTML中，以保持控制器的纯净性。 总的来说，`ng-class`是AngularJS中实现动态CSS类管理的强大工具，它可以灵活地根据应用程序的状态来改变元素的样式。在实际项目中...
angular项目代码
07-23
angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码
AngularJS指令
最新发布
Thewei666的博客
05-13 477
AngularJS中使用模块的 directive() 函数来自定义指令app.directive('指令名称',function(){return{template,replace ,restrict,...})
angular代码实例一
wanderer_ankey的博客
12-15 379
.input{ /* 设置圆角 */ border-radius:5px ; } div{ width:800px; } *{ margin: 4px auto; text-align: center; } .mStateT{ /* 已发货是绿色 */ background:green } .mStateF{ /* 未发货是黄色 */ backgr
angular---代码详解(第一篇)
web_q的博客
03-15 943
1.1:简要 html> html lang="en"> head> meta charset="UTF-8"> title>AngularJS 模块化title> head> body> 指定模块 --> 一个页可以有多个模块，但是不能互想嵌套 --> 一般只会有一个 --> div class="box" ng-app="App"> 指定
angular代码高亮代码
Doooer的博客
11-01 497
新建立一个管道 keyword.pipe.ts import {Injectable, Pipe, PipeTransform} from '@angular/core'; import {DomSanitizer} from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class ...
将angular-ui的分页组件封装成指令的方法详解
01-19
（1）一如既往的我还是使用了requireJS进行js代码的编译 （2）必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css…. 首先抛出几个问题： a）:何时回用到分页 (当后端返回的数据过多，一页装不满时，...
angular-ngSanitize模块-$sanitize服务详解
08-30
第一行使用`$sanitize`服务，第二行则使用了`$sce.trustAsHtml()`，第三行则直接使用`ng-bind`，它不会尝试解析HTML，而是将内容作为纯文本展示。 总的来说，`$sanitize`服务是AngularJS中一个关键的安全工具，它...
angular-1.5.8.js压缩包
07-21
尽管路由功能在Angular 1.x中不是核心部分，但通过第三方库如`ngRoute`或`ui-router`，可以实现页面间的导航和状态管理。1.5.8版本依然兼容这些路由库。 ### 9. 装饰器（Decorators） 装饰器允许修改或增强已存在...
angular-document-viewer
05-02
《Angular文档查看器详解》 Angular文档查看器（angular-document-viewer）是一个基于Angular框架的组件，用于在Web应用中展示各种类型的文档，如PDF、Word文档等。然而，根据提供的描述，该组件可能已被废弃，并且...
angular---代码详解(第三篇)
web_q的博客
03-16 651
8.6 服务汇总篇 html> html lang="en"> head> meta charset="UTF-8"> title>AngularJS 自定义服务title> head> body ng-app="App"> div ng-controller="DemoController"> div> script src="./libs/ang
简单描述一个最简化的Angular项目代码
Dominic_W的博客
03-20 789
一个使用NgModule装饰器修饰的类，通常就是一个模块，NgModule为一系列组件声明了编译的上下文环境，通常我会把几个业务逻辑关联比较紧密的组件放在一个模块中，形成一个功能单元。的值是angular cli创建当前组建时，根据组件所在的路径以及组件名称定义的一个唯一标识符，如果我们后续要在项目中的其他地方引用当前这个组件时，可以使用这个标识符。按照官方的说法，组件是angular的主要构造块，说白了，整个angular项目都是由一个又一个的组件组合起来的。文件也需要先了解一下。
angular4 常用代码
CandiceYu的博客
03-20 269
angular4 常用操作 父组件给子组件传值 首先 在子组件中引入 @Input() childVaule（子组件使用的数据） 然后 在父组件中引入组件 <app-somthing [childValue]=“fatherValue”></app-something> fatherValue（父组件要给子组件传的值）（右侧） 子组件给父组件传值（父组件监听子组件传值）...
Angular框架
深蓝旭的博客
08-21 926
一、如何安装Angular 　　在文件夹中打开cmd，输入nmp init创建一个package.json。这个可以一路回车跳过（如果没有特别要注明）。nmp是前台的包，用于管理后台。成功创建package.json后再输入nmp install bower -g，bower推荐安装到全局，这里bower是需要Git的支持，所以需要安装一个Git软件，然后在配置一下计算机的环境变量，将Git的路径复制到PATH变量的后面（不配置有时候会出错）。然后在cmd中输入bower install angular .
Angular内部代码与外部代码的交互
老杨头的博客
12-18 327
Angular 程序在名为 NgZone 的特殊区域内运行，这种机制提高了变化检测的效率，但将程序内部代码与外部代码隔离开来，降低了内部代码与外部代码交互的便利性，需要添加必要的代码才能完成互相的调用。 1、Angular引入外部对象 除了使用npm安装外，很多第三方库都是以CDN方式在index.html中进行引入。比如 baidu 地图API： <scripttype="text/javascript"src="http://api.map.bai...
Angular_代码片段_一步步进行
折枝
03-17 260
Angular_代码片段_一步步进行 <page-header title="簽核詳情"></page-header> <nz-card [nzBordered]="false" class="mb-lg" nzTitle="簽核进度"> <nz-steps [nzCurrent]=c.router_stage nzProgressDot> <nz-step [nzTitle]="'指示書接收'" [nzDescription]=
AngularJs的源代码，学习最优秀工程师的设计思路
fengsuiyingdong的专栏
07-24 1129
再牛逼的框架他的本质也是javascript代码，只要你会js代码你就能看懂！别怂！ AngularJs是一个很简单的框架（其设计思想很前卫，涉及领域很广，使得它表现出很难的特性，但是你要相信，你使用起来还是很简单的。） 我这里分析的是AngularJS v1.5.7，官网最新版的是2.x（新版的2.x比1.x改进了很多很多，改天再细致分析一遍） 我们来分析一下angular的核心文件（），...
angular 如何引进 @auth0/angular-jwt
06-13
安装完成后，可以在需要使用`@auth0/angular-jwt`的组件或服务中引入该库，示例代码如下： ```typescript import { JwtHelperService } from '@auth0/angular-jwt'; @Injectable() export class AuthService { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值