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

最新推荐文章于 2024-05-13 14:54:25 发布
最新推荐文章于 2024-05-13 14:54:25 发布
阅读量943 收藏 2
点赞数 1
分类专栏： angularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angularWQ/article/details/62276176
版权 

													1.1:简要
   <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 模块化</title>
</head>
<body>
   <!-- 指定模块 -->
   <!-- 一个页可以有多个模块，但是不能互想嵌套 -->
   <!-- 一般只会有一个 -->
   <div class="box" ng-app="App">
      <!-- 指定控制器 -->
      <div ng-controller="DemoContoller">
         <h1>{{name}}在{{school}}学习使用AngularJS</h1>
         <ul>
            <li ng-repeat="(key, course) in courses">第{{key+1}}天：{{course}}</li>
         </ul>
      </div>
   </div>

   <!-- 引入框架 -->
   <script src="./libs/angular.min.js"></script>
   <script>
      
      // 提供一个全局对象angular，在此对象下有N多方法
      // 其中module方法可以帮我们创建一个模块
      var App = angular.module('App', []);

      // App就是新创建的模块，这个模块又是一个对象
      // 在此对象下又有N多方法，可以实现具体业务逻辑

      // 其它controller可以创建一个控制器
      App.controller('DemoContoller', ['$scope', function ($scope) {
         // $scope 是一个空对象{}，此对象就是Model

         $scope.name = '强';
         $scope.school = '北京邮电'; 

         $scope.courses = [
            'MVC',
            '指令',
            '模块化'
         ]

      }]);

   </script>
</body>
</html>
			2.1演示
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 模块化</title>
</head>
<body ng-app="Demo">
   
   <table>
      <thead>
         <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
         </tr>
      </thead>
      <tbody ng-controller="StarsController">
         <tr ng-repeat="star in stars">
            <td>{{star.name}}</td>
            <td>{{star.sex}}</td>
            <td>{{star.age}}</td>
         </tr>
      </tbody>
   </table>
   
   <script src="./libs/angular.min.js"></script>
   <script>
      // 定义一个模块
      var Demo = angular.module('Demo', []);

      // 定义控制器
      Demo.controller('StarsController', ['$scope', function ($scope) {

         // $scope 就是 Model 并且空对象

         // 后面数据会来自于后端
         $scope.stars = [
            {name: '刘德华', sex: '男', age: 62},
            {name: '王力宏', sex: '男', age: 40},
            {name: '周杰伦', sex: '男', age: 39},
            {name: '小明', sex: '女', age: 12}
         ];

      }]);
   </script>

   <!-- 模块 -->

   <!-- 每个模块基于MVC -->

</body>
</html>
 

 

 

3.1
 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 指令</title>
   <!-- <link rel="stylesheet" ng-href="{{link}}"> -->
   <style>
      .red {
         color: red;
      }

      .blue {
         color: blue;
      }
   </style>
</head>
<body ng-app="App">
   
   <ul ng-controller="DemoController">
      <li ng-bind="name"></li>
      <li>{{name}}</li>
      <li ng-show="1">ng-show用来显示或隐藏内容的，当值为true时显示</li>
      <li ng-hide="0">ng-hide用来显示或隐藏内容的，当值为true时隐藏</li>
      <li ng-if="1">ng-if用来控制元素是否存在，当值为true时存在</li>
      <li><img ng-src="{{path}}" alt=""></li>
      <li ng-class="{red: true, blue: true}">ng-class指令</li>
      <li><input type="text" ng-disabled="0"></li>
      <li><input type="text" ng-readonly="1" value="angular"></li>
      <li><input type="checkbox" ng-checked="1">男</li>
      <li>
         <select name="" id="">
            <option value="">河北省</option>
            <option value="">山东省</option>
            <option value="" ng-selected="1">北京市</option>
         </select>
      </li>
   </ul>
   
   <script src="./libs/angular.min.js"></script>
   <script>
      
      // 创建模块
      var App = angular.module('App', []);

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

         // $scope

         $scope.name = 'itcast';

         $scope.path = './images/author.jpg';

         $scope.link = './main.css';

      }]);

   </script>
</body>
</html>
 

3.2
 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 自定义指令</title>
</head>
<body ng-app="App">
   
   <!-- <div tag></div> -->

   <!-- 元素 -->
   <!-- <tag></tag> -->

   <!-- <div class="tag"></div> -->

   <!-- directive:tag -->


   <script src="./libs/angular.min.js"></script>
   <script>

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

      // 通过模块实例对象的directive方法可以自定义指令
      App.directive('tag', function () {

         // 返回一个对象，这个对象就是自定义指令相关的内容
         return {
            // E element
            // A attribute
            // C class
            // M mark replace 必须为true
            restrict: 'ECMA',
            // template: '<ul><li>首页</li><li>列表</li></ul>',
            templateUrl: './list.html',
            // replace: true
         }

      });

   </script>
</body>
</html>
 

4.1
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 数据绑定</title>
</head>
<body ng-app="App">
    
    <ul ng-controller="DemoController">
        <li ng-bind="name"></li>
        <li ng-cloak>{{name}}{{age}}</li>
        <li ng-bind-template="{{name}}{{age}}"></li>
    </ul>

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

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

            // $scope 就是Model

            $scope.name = 'itcast';

            $scope.age = 10;

        }]);

    </script>
</body>
</html>
 

 
 
 

 

 
 
4.2
 
 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 数据绑定</title>
</head>
<body ng-app="App">
    
    <div ng-controller="DemoController">
        <!-- 要实现数据从视图向模型传递需要借助于表单元素 -->
        <input type="text" ng-model="msg">
        <h4>{{msg}}</h4>
        <button ng-click="show()">显示</button>
    </div>
    <script src="./libs/angular.min.js"></script>
    <script>
       
       var App = angular.module('App', []);

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

            // $scope Model

            $scope.show = function () {
                alert($scope.msg);
            }

        }]);

    </script>
</body>
</html>
 
 
4.3
 
 
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 数据绑定</title>
</head>
<body>

   <div ng-controller="DemoController" ng-init="name='itcast';age=10">
      <h1>{{name}}</h1>
      <h2>{{age}}</h2>
   </div>

   <script src="./libs/angular.min.js"></script>
   <script>

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

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

         // $scope.name = '';

      }])
   </script>
</body>
</html>
 
 
4.4
 
 
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 数据绑定</title>
   <style>
      ul {
         list-style: none;
      }
   </style>
</head>
<body>
   
   <div ng-controller="DemoController">
      <ul>
         <li><button ng-click="single()">单击</button></li>
         <li><button ng-dblclick="double()">双击</button></li>
         <li><input type="text" ng-blur="blur()"></li>
         <li ng-mouseout="mouseout()">一些内容</li>
      </ul>
   </div>
   
   <script src="./libs/angular.min.js"></script>
   <script>
      var App = angular.module('App', []);

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

         $scope.single = function () {
            alert('我被单击了');
         }

         $scope.double = function () {
            alert('我被双击了');
         }

         $scope.blur = function () {
            alert('失去焦点了');
         }

         $scope.mouseout = function () {
            alert('鼠标移出了');
         }

      }])

   </script>
</body>
</html>
 
 
4.5
 
 
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 数据绑定</title>
</head>
<body>
   
   <div ng-controller="DemoController">
      <!-- <ul>
         <li ng-repeat="(key, star) in stars">{{star.name}}{{star.age}}</li>
      </ul> -->

      <ul>
         <li ng-repeat="item in items" ng-switch="item">
            <span ng-switch-when="css">{{item}}</span>
         </li>
      </ul>
   </div>

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

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

         // $scope.stars = [
         //     {name: '刘德华', age: 60},
         //     {name: '周杰伦', age: 38},
         //     {name: '王力宏', age: 39}

         // ]

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

      }]);

      // switch(name) {
      //     case '':

      // }

   </script>
</body>
</html>
 
 
5.1 
 
 
<!DOCTYPE html>
<html lang="en" >
<head>
   <meta charset="UTF-8">
   <title>AngularJS 根作用域</title>
</head>
<body ng-app="App" ng-init="name='顺治'">
   
   <div class="parent" ng-controller="ParentController">
      
      <h1>{{name}}</h1>

      <div class="child" ng-controller="ChildController">
         <h2>{{name}}</h2>
      </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 = '雍正';

      }]);

      var name = '小明';

      // function () {

      //     var name = '小红';

      //     alert(name);

      //     function () {
      //        var name = '小黑';
      //     }
      // }

   </script>
</body>
</html>
 
 
 

 


                

        

        

    




    

      

        

            

              
                
                  王大强~
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
【荐】Angular官方代码风格指南

				
			

			

				

					野草园
				

				

					12-23
					
					1113
					
				

			

		

		

			
				
本文为笔者对Angular官网风格指南的整理版本，删除／增加了部分内容。另外，原文对每个规范都作出了原因的解释，个别还有示例，需要的请点击查看原文。原链接：英文文档  ／  中文文档单一职责单一文件
一个文件定义一样东西，比如一个组件、一个服务、一个管道、一个指令
每个文件最多不要超过400行
单一函数
定义功能单一的函数
一个函数最多不要超过75行
命名规范
文件名采用feature.type.*

			
		

	



                

              
                



	

		

			

				
					
Angular ng-class详解及实例代码

				
			

			

				

					09-01
				

			

		

		

			
				
本篇文章将详细解释`ng-class`的使用方法，并通过实例代码来演示其功能。  首先，我们来看一下`ng-class`的基本语法。`ng-class`接受三种不同的值类型：  1. **字符串数组形式**：适用于简单的类切换，通常涉及到两...

			
		

	



                


  
              

                


	

		

			

				
					
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代码高亮代码

				
			

			

				

					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-...第一步：先完成指令的封装 我会在 js/directives/pagedir 此文件下完成指令的编写 pagedir.html(指令页面模板)

			
		

	





	

		

			

				
					
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文档等。然而，根据提供的描述，该组件可能已被废弃，并且...

			
		

	





	

		

			

				
					
angularjs Web页面框架 jsp源码

				
			

			

				

					04-13
				

			

		

		

			
				
angularjs Web页面框架 v13.3.0

			
		

	





	

		

			

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

				
			

			

				

					web_q的博客
				

				

					03-16
					
					369
					
				

			

		

		

			
				
5.1作用域

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

			
		

	





	

		

			

				
					
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项目都是由一个又一个的组件组合起来的。文件也需要先了解一下。

			
		

	





	

		

			

				
					
Angular 项目理解

				
			

			

				

					耕耘虫
				

				

					02-20
					
					849
					
				

			

		

		

			
				
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 如何引进 @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、付费专栏及课程。

              

            

          

      

      余额充值