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

最新推荐文章于 2024-05-13 14:54:25 发布
最新推荐文章于 2024-05-13 14:54:25 发布
阅读量945 收藏 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
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
angularjs Web页面框架 jsp源码

				
			

			

				

					04-13
				

			

		

		

			
				
angularjs Web页面框架 v13.3.0

			
		

	



                

              
                



	

		

			

				
					
单页web应用是什么？它又会给传统网站带来哪些好处?

					
热门推荐

				
			

			

				

					zuoninger的专栏
				

				

					08-26
					
					4万+
					
				

			

		

		

			
				
什么是单页应用？


单页应用是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。




单页应用给传统网站带来的好处？

相对于传统网站，我们认为单页应用的主要好处是：



它提供了更加吸引人的用户体验。单页应用可以做到一举

			
		

	



                


  
              

                


	

		

			

				
					
AngularJS指令

					
最新发布

				
			

			

				

					Thewei666的博客
				

				

					05-13
					
					483
					
				

			

		

		

			
				
AngularJS中使用模块的 directive() 函数来自定义指令app.directive('指令名称',function(){return{template,replace ,restrict,...})

			
		

	





	

		

			

				
					
angularjs项目的知识点

				
			

			

				

					泠泠似水
				

				

					11-20
					
					303
					
				

			

		

		

			
				
AngularJS通过$location获取及改变当前页面的URLhttp://blog.csdn.net/u010977147/article/details/59626999

			
		

	



		

			
		



	

		

			

				
					
课设系统名单08

				
			

			

				

					u011140401的博客
				

				

					03-20
					
					441
					
				

			

		

		

			
				
包含论文，源码，数据库，亲测可用！如有需要联系QQ:346310294
1.jsp码头船只出行及配套货柜码放管理系统的设计与实现
2.超市积分管理系统
3.基于java的保险业务管理系统的设计与实现
4.基于JAVA的机场航班起降与协调管理系统
5.基于Java的敬老院管理系统的设计和实现
6.基于Java的银行排号系统的设计与实现
7.基于jsp的健身俱乐部会员系统
8.基于Web停车场管理系统...

			
		

	





	

		

			

				
					
html5混合app原理,HTML5混合App开发

				
			

			

				

					weixin_32237761的博客
				

				

					05-31
					
					894
					
				

			

		

		

			
				
内容简介在竞争激烈的移动互联网环境下，HTML5技术一直备受关注。HTML5混合App开发与原生App开发模式之间也争议不断。相对于原生App来说，HTML5混合App开发的成本更低、周期更短，而且随着移动设备的硬件支持越来越好，HTML5混合App的性能也越来越好，很多企业都觉得使用HTML5混合App开发更合适。本书围绕HTML5混合App开发进行了详细讲解，全书共分为12个章节，其中，第1章...

			
		

	





	

		

			

				
					
Angular ng-class详解及实例代码

				
			

			

				

					09-01
				

			

		

		

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

			
		

	





	

		

			

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

			
		

	





	

		

			

				
					
angular项目代码

				
			

			

				

					07-23
				

			

		

		

			
				
angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码

			
		

	





	

		

			

				
					
Angular实战项目（1）

				
			

			

				

					程序员哆啦A梦，蓝胖子
				

				

					07-24
					
					1649
					
				

			

		

		

			
				
Angular 打造企业级协作平台
[外链图片转存失败(img-J0HrPiEG-1563902660799)(https://upload-images.jianshu.io/upload_images/11158618-485991cdaec3c55e?imageMogr2/auto-orient/strip)]
环境搭建，Material UI，动画，Angular核心概念，RxJS操作符，...

			
		

	





	

		

			

				
					
简单描述一个最简化的Angular项目代码

				
			

			

				

					Dominic_W的博客
				

				

					03-20
					
					794
					
				

			

		

		

			
				
一个使用NgModule装饰器修饰的类，通常就是一个模块，NgModule为一系列组件声明了编译的上下文环境，通常我会把几个业务逻辑关联比较紧密的组件放在一个模块中，形成一个功能单元。的值是angular cli创建当前组建时，根据组件所在的路径以及组件名称定义的一个唯一标识符，如果我们后续要在项目中的其他地方引用当前这个组件时，可以使用这个标识符。按照官方的说法，组件是angular的主要构造块，说白了，整个angular项目都是由一个又一个的组件组合起来的。文件也需要先了解一下。

			
		

	





	

		

			

				
					
AngularJS源码研究

				
			

			

				

					brokenkay的博客
				

				

					02-21
					
					699
					
				

			

		

		

			
				
前言
AngularJS虽然已经慢慢退出了淡出了历史舞台,但它作为第一代MVVM框架,为后来其他框架的诞生和发展提供了很多功能设计的参考.比如响应式状态,依赖注入以及模块化开发.
AngularJS源码非常难以阅读,并非是因为它的代码写的不好,而是内部功能大量使用了函数式编程进行层层抽象和封装,导致大部分功能嵌套的函数层级过深,往往需要埋头调试跟踪一大轮才能真正窥探到底层的做法.
本文将抽离出框架的核心逻辑进行讲解,顺着自上而下的流程从整体上把握框架是如何设计和实现的.从AngularJS的实现流程里我们也

			
		

	





	

		

			

				
					
AngularJS实例，含源码

				
			

			

				

					GothaM24的博客
				

				

					12-02
					
					362
					
				

			

		

		

			
				
实现功能：
①AngularJS内置服务filter完成模糊搜索
②AngularJS ng-model+ng-checked+ng-change实现单、全、反选
③基于css3的伪类before+after完成checkbox美化
④依赖注入ng-layer实现AngularJS+LayerJS传参
源码地址：https://download.csdn.net/download/qq_35593...

			
		

	





	

		

			

				
					
angularjs2进阶教程2-建立一个主/详细页面的英雄名单

				
			

			

				

					孟繁洋的专栏
				

				

					03-03
					
					398
					
				

			

		

		

			
				
还是 angularjs2入门1-文件结构分析 的源码，将app名称tutorial-step2-masterDetail
1.根据上一节的类，创建英雄数组，这个数组先从模拟数据吧，等后面再介绍怎么从网络服务器获取
const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' 

			
		

	





	

		

			

				
					
AngularJS实战项目（Ⅰ）--含源码

				
			

			

				

					weixin_34356310的博客
				

				

					11-12
					
					634
					
				

			

		

		

			
				
前言

钻研ABP框架的日子，遇到了很多新的知识，因为对自己而言是新知识，所以经常卡在很多地方，迟迟不能有所突破，作为一个稍有上进心的程序员，内心绝对是不服输的，也绝对是不畏困难的，心底必然有这样一股力量“I must conquer it!”。比如，以前没用过AutoMapper,那我就去学，最后将学到的写成了博客，和大家一起分享，争取让那些还没接触的人少走弯路。现在，在前端设计时，ABP很...

			
		

	





	

		

			

				
					
Anggular 框架做的小案例-邀请案例

				
			

			

				

					iteye_9274的博客
				

				

					08-27
					
					356
					
				

			

		

		

			
				




    人员姓名:
    电话号码:
    添加

    
    
        姓名
        电话号
        邀请状态
        按钮

    
    
        
        {{user.phone}}
        {{user.state}}
        
            
 ...

			
		

	





	

		

			

				
					
新一代Web开发指南：NG-book第五版详解

				
			

			

				

					
				

			

		

		

			
				
NG-book第五版是一本由Nate Murray、Felipe Coury、Ari Lerner和Carlos Taborda共同撰写的关于Angular领域的里程碑式著作。该书全面详尽地介绍了新一代Web开发的核心概念和技术，旨在帮助读者轻松掌握Angular框架。...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值