devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web前端学习笔记——AngularJS入门_angularjs学习

作者：煮酒与君饮 | 2024-08-20 13:58:32

赞

踩

angularjs学习

目录

什么是 AngularJS

为什么使用 AngularJS

AngularJS 的核心特性

相关链接

Angular 上手

安装 Angular

简单示例

案例解析

使用总结

Angular 基础概念

MVC 思想

模型

控制器

 

视图模型（$scope）

表达式（Expression）

对比 JavaScript 表达式

单向数据绑定

双向数据绑定

Angular 指令系统（Directive）

指令属性小提示

ng-app 指令

ng-bind指令

ng-bind-html指令

ng-repeat 指令

ng-class 指令

ng-show/ng-hide 指令

 ng-cloak指令

ng-link/ng-src 指令

 ng-switch指令

其他常用指令

自定义指令

todomvc-app-template案例

什么是 AngularJS

  • 一款非常优秀的前端高级 JS 框架
  • 最早由 Misko Hevery 等人创建
  • 2009 年被 Google 公式收购，用于其多款产品
  • 目前有一个全职的开发团队继续开发和维护这个库
  • 有了这一类框架就可以轻松构建 SPA 应用程序
  • 轻松构建 SPA（单一页面应用程序）
  • 单一页面应用程序：
    • 只有一个页面（整个应用的一个载体）
    • 内容全部是由AJAX方式呈现出啦的
  • 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。

为什么使用 AngularJS

  • 更少的代码，实现更强劲的功能
  • 将一些以前在后台开发中使用的思想带入前端开发
  • 带领当前市面上的框架走向模式化或者架构化

以前我们是这样的：

以后将会是这样的：

传统方式实现加法运算

Angular实现加法运算

传统方式实现数据列表呈现

Angular实现数据列表呈现

AngularJS 的核心特性

  • MVC
  • 模块化
  • 自动化双向数据绑定
  • 指令系统

相关链接

  • http://www.apjs.net/
  • http://www.angularjs.cn/
  • http://docs.angularjs.cn/api
  • https://material.angularjs.org
  • http://angular-ui.github.io/

Angular 上手

安装 Angular

  • 下载 Angular.js 的包
    • https://github.com/angular/angular.js/releases
  • 使用 CDN 上的 Angular.js
    • http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js
  • 使用 Bower 安装 bash bower install angular
  • 使用 NPM 安装 bash npm install angular
  • 每种方式安装包，本质都是将angular的库下载到当前文件夹中

简单示例

Hello world

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>第一个AngularJS示例</title>
  7. </head>
  8.  
  9. <body>
  10.   <div ng-app ng-init="name='zhangsan'">
  11.     <p>在输入框中尝试输入：</p>
  12.     <p>姓名：
  13.       <input type="text" ng-model="name">
  14.     </p>
  15.     <p>{{name}}</p>
  16.   </div>
  17.   <script src="../bower_components/angular/angular.js"></script>
  18. </body>
  19.  
  20. </html>

案例解析

  • 当网页加载完毕，AngularJS 自动开始执行；
  • HTML 页面中 ng-xxx 的属性称之为指令（Directive）；
  • ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序管理的边界；
  • ng-model 指令把文本框的值绑定到变量 name 上；
  • {{ name }} 表达式就是把应用程序变量 name 绑定到某个段落的 innerHTML。

使用总结

  • Angular 最大程度的减少了页面上的 DOM 操作；
  • 让 JavaScript 中专注业务逻辑的代码；
  • 通过简单的指令结合页面结构与逻辑数据；
  • 通过自定义指令实现组件化编程；
  • 代码结构更合理；
  • 维护成本更低；
  • Angular 解放了传统 JavaScript 中频繁的 DOM 操作
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Angular Hello world</title>
  7. </head>
  8. <!--
  9. 所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
  10. ng-app是ng的入口，表示当前元素的所有指令都会被angular管理（对每一个指令进行分析和操作）
  11. -->
  12. <body>
  13.   <div ng-app ng-init="user.name='world'">
  14.     <h1>使用NG实现双边数据绑定</h1>
  15.     <input type="text"
  16.       placeholder="请输入你的姓名"
  17.       ng-model="user.name">
  18.     <p>hello <strong>{{user.name}}</strong></p>
  19.   </div>
  20.   <script src="bower_components/angular/angular.js"></script>
  21. </body>
  22.  
  23. </html>

 

Angular 基础概念

MVC 思想

什么是 MVC 思想

  • MVC 是一种应用程序的开发思想，不是设计模式
  • 主要目的是为了解决应用程序展示结构，业务逻辑之间的紧耦合关系
  • 使应用程序的组成分为三个部件，每个部件有自己明确的职责，相互之间没有依赖
  • 将应用程序的组成划分为三个部分：Model View Controller
  • 控制器的作用就是初始化模型用的；
  • 模型就是用于存储数据的

  • 视图用于展现数据

模型

  • AngularJS很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分

  1. // 创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖那些模块
  2. var myApp = angular.module("MyApp", []);
  • 也可以将重复使用的指令或过滤器之类的做成模块便于复用
  • 注意必须指定第二个参数，否则变成找到已经定义的模块
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Angular 模块</title>
  7. </head>
  8.  
  9. <body>
  10.   <div ng-app="myApp" ng-controller="DemoController">
  11.     <h1>使用NG实现双边数据绑定</h1>
  12.     <input type="text" placeholder="请输入你的姓名" ng-model="user.name">
  13.     <p>hello <strong>{{user.name}}</strong></p>
  14.     <input type="button" ng-click="show()">
  15.   </div>
  16.   <script src="bower_components/angular/angular.js"></script>
  17.   <script>
  18.     // 注册模块 通过module函数，
  19.     // 第一个参数是这个模块的名字
  20.     // !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数，如果没有传递第二个参数，angular.module就不是创建一个模块
  21.     // angular.module 返回 刚刚创建的模块对象
  22.    var app=  angular.module('myApp',[]);
  23.     // app.controller 方法用于创建一个控制器，所创建的控制器属于myApp模块
  24.     // app.controller('DemoCtrl');
  25.     // 控制器函数的参数中有一个$scope
  26.     // angular.module('myApp').controller('DemoController', function($scope) {
  27.     //   // 当控制器执行时会自动执行的函数
  28.     //   $scope.user = {};
  29.     //   $scope.user.name = '张三';
  30.     //   // $scope不仅仅可以往视图中暴露数据，还可以暴露行为
  31.     //   $scope.show = function() {
  32.     //     console.log($scope.user);
  33.     //   };
  34.     // });
  35.   </script>
  36. </body>
  37.  
  38. </html>

控制器

  • 调度逻辑的集合

  1. angular.module('OneApp', [])
  2.     .controller('HelloController', [
  3.         '$scope',
  4.         function($scope) {
  5.             $scope.p = {
  6.                 name: 'zhangsan'
  7.             };
  8.         }
  9.     ]);
  • 控制器的三种主要职责：
  1. –为应用中的模型设置初始状态
  2. –通过$scope对象把数据模型或函数行为暴露给视图
  3. –监视模型的变化，做出相应的动作
  1. // 监视购物车内容变化，计算最新结果
  2. $scope.$watch(‘totalCart’, calculateDiscount);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Angular Controller</title>
  7. </head>
  8.  
  9. <body ng-app="myModule" ng-controller="HelloController">
  10.   <script src="bower_components/angular/angular.js"></script>
  11.   <script>
  12.     // 由于控制器是必须出现在某个模块下的，想创建一个控制器必须先创建模块
  13.     var module = angular.module('myModule', []); // 返回的就是模块对象
  14.  
  15.     // angular在执行控制器函数时，
  16.     // 会根据参数的名字（$scope）去自动的注入对象
  17.     // 根据参数名称传递对应对象，所以必须要写正确的参数名称
  18.     // module.controller('HelloController', function($scope) {
  19.     //   console.log($scope);
  20.     // });
  21.     //
  22.     // 由于压缩代码会改变参数名称，注册控制的标准方式就是通过第二个参数传递数组的方式（数组的成员最后一个就是原本的控制器函数，前面的成员都是需要注入的对象名称）
  23.     module.controller('HelloController', ['$scope','$http', function(a,b) {
  24.       console.log(a);
  25.     }]);
  26.   </script>
  27. </body>
  28.  
  29. </html>
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="HelloApp">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6. </head>
  7.  
  8. <body>
  9.   <table border="1" ng-controller="WorldController">
  10.     <tr>
  11.       <td>用户名</td>
  12.       <td>
  13.         <input type="text" ng-model="user.username">
  14.       </td>
  15.     </tr>
  16.     <tr>
  17.       <td>密码</td>
  18.       <td>
  19.         <input type="password" ng-model="user.password">
  20.       </td>
  21.     </tr>
  22.     <tr>
  23.       <td></td>
  24.       <td>
  25.         <input type="button" ng-click="login()" value="登陆">
  26.       </td>
  27.     </tr>
  28.     <tr>
  29.       <td></td>
  30.       <td>{{message}}</td>
  31.     </tr>
  32.   </table>
  33.   <script src="bower_components/angular/angular.js"></script>
  34.   <script>
  35.     // 创建一个模块
  36.     var app = angular.module('HelloApp', []);
  37.     // 为这个模块创建一个控制器
  38.     app.controller('WorldController', ['$scope', function($scope) {
  39.  
  40.       // 数据
  41.       $scope.user = {
  42.         username: '',
  43.         password: ''
  44.       };
  45.       $scope.demo = '';
  46.  
  47.       // 行为数据
  48.       $scope.login = function() {
  49.         // 因为数据的变化时双向的同步，所以界面上的值变化会同步到$scope.user上
  50.         console.log($scope.user);
  51.       };
  52.  
  53.  
  54.       // 请输入用户名  输入格式不合法
  55.       $scope.message = '请输入用户名';
  56.       // $scope.message取决于$scope.user
  57.  
  58.       // 官方的API中提供了一个$scope.$watch方法，
  59.       $scope.$watch('user.username', function(now, old) {
  60.         // 当user.username发生变化时触发这个函数
  61.         // console.log('now is ' + now);
  62.         // console.log('old is ' + old);
  63.         if (now) {
  64.           if (now.length < 7) {
  65.             $scope.message = '输入格式不合法';
  66.           } else {
  67.             $scope.message = '';
  68.           }
  69.         } else {
  70.           $scope.message = '请输入用户名';
  71.         }
  72.       });
  73.  
  74.       // angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite
  75.       //
  76.       // angular.element('body')
  77.     }]);
  78.   </script>
  79. </body>
  80.  
  81. </html>

 

视图模型（$scope）

  • 视图和控制器之间的桥梁
  • 用于在视图和控制器之间传递数据
  • 利用$scope暴露数据模型（数据，行为）

表达式（Expression）

  • 作用：
  1. –使用 表达式 把数据绑定到 HTML。
  • 语法：
  1. –表达式写在双大括号内：{{ expression }}。
  • 比较：
  1. –表达式作用类似于ng-bind指令
  2. –建议更多的使用指令
  • AngularJS表达式很像JavaScript表达式
  • 它们可以包含文字、运算符和变量
  • 如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }}
  • 数字  {{ 100 + 100 }}
  • 字符串  {{ 'hello' + 'angular' }}
  • 对象  {{ zhangsan.name }}
  • 数组  {{ students[10] }}
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Angular 表达式</title>
  7.   <style>
  8.     /* ng-cloak指令就是在NG执行完毕过后自动移除 */
  9.  
  10.     [ng-cloak],
  11.     .ng-cloak {
  12.       display: none;
  13.     }
  14.   </style>
  15. </head>
  16.  
  17. <body ng-app class="ng-cloak">
  18.   {{ true ? 'true':'false' }}
  19.   <script src="bower_components/angular/angular.js"></script>
  20. </body>
  21.  
  22. </html>

对比 JavaScript 表达式

  • 相同点：
  1. –AngularJS 表达式可以包含字母，操作符，变量。
  • 不同点：
  1. –AngularJS 表达式可以写在 HTML 中。
  2. –AngularJS 表达式不支持条件判断，循环及异常。
  3. –AngularJS 表达式支持过滤器。

单向数据绑定

•模型变化过后，自动同步到界面上；

•一般纯展示型的数据会用到单项数据绑定；

•使用表达式的方式都是单向的

双向数据绑定

•两个方向的数据自动同步：

•模型发生变化自动同步到视图上；

•视图上的数据发生变化过后自动同步到模型上；

Angular 指令系统（Directive）

  • AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集
  • 在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行
  • 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
  • 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作

指令属性小提示

  • HTML5 允许扩展的（自制的）属性，以 data- 开头。
  • AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
  • 二者效果相同。

ng-app 指令

  • ng-app指令用来标明一个AngularJS应用程序
  • 标记在一个AngularJS的作用范围的根对象上
  • 系统执行时会自动的执行根对象范围内的其他指令
  • 可以在同一个页面创建多个ng-app节点
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-app 指令</title>
  7. </head>
  8.  
  9. <body>
  10.   <!-- angular找到第一个ng-app过后就不会再找 -->
  11.   <div ng-app="myApp1" ng-controller="App1Controller">
  12.     <input type="button" value="按钮1" ng-click="do1()">
  13.   </div>
  14.   <div ng-app="myApp2" ng-controller="App2Controller">
  15.     <input type="button" value="按钮2" ng-click="do2()">
  16.   </div>
  17.   <script src="bower_components/angular/angular.js"></script>
  18.   <script>
  19.     /**
  20.      * myApp1 Module
  21.      *
  22.      * Description
  23.      */
  24.     var myApp1 = angular.module('myApp1', []);
  25.     myApp1.controller('App1Controller', ['$scope', function($scope) {
  26.       $scope.do1 = function() {
  27.         console.log(11111);
  28.       };
  29.     }]);
  30.  
  31.     var myApp2 = angular.module('myApp2', []);
  32.     myApp2.controller('App2Controller', ['$scope', function($scope) {
  33.       $scope.do2 = function() {
  34.         console.log(22222);
  35.       };
  36.     }]);
  37.     // 手动的让第二个div被myApp2管理
  38.     angular.bootstrap(document.querySelector('[ng-app="myApp2"]'),['myApp2']);
  39.   </script>
  40. </body>
  41.  
  42. </html>

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-app 指令</title>
  7. </head>
  8.  
  9. <body ng-app="myApp">
  10.   <!-- angular找到第一个ng-app过后就不会再找 -->
  11.   <div ng-controller="App1Controller">
  12.     <input type="button" value="按钮1" ng-click="do1()">
  13.   </div>
  14.   <div ng-controller="App2Controller">
  15.     <input type="button" value="按钮2" ng-click="do2()">
  16.   </div>
  17.   <script src="bower_components/angular/angular.js"></script>
  18.   <script>
  19.     // 零件1
  20.     var myApp1 = angular.module('myApp1', []);
  21.     myApp1.controller('App1Controller', ['$scope', function($scope) {
  22.       $scope.do1 = function() {
  23.         console.log(11111);
  24.       };
  25.     }]);
  26.     // 零件2
  27.     var myApp2 = angular.module('myApp2', []);
  28.     myApp2.controller('App2Controller', ['$scope', function($scope) {
  29.       $scope.do2 = function() {
  30.         console.log(22222);
  31.       };
  32.     }]);
  33.  
  34.     /**
  35.      * myApp Module
  36.      *
  37.      * Description
  38.      */
  39.     angular.module('myApp', ['myApp1', 'myApp2']);
  40.   </script>
  41. </body>
  42.  
  43. </html>

ng-bind指令

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>ng-bind 指令</title>
  6. </head>
  7. <body ng-app ng-init="username='<h1>shit</h1>'">
  8.   <!-- <strong>{{username}}</strong> -->
  9.   <!-- ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击） -->
  10.   <strong ng-bind="username"></strong>
  11.   <script src="bower_components/angular/angular.js"></script>
  12. </body>
  13. </html>

ng-bind-html指令

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-bind-html 指令</title>
  7. </head>
  8.  
  9. <body ng-app="myApp" ng-init="username='<h1>shit</h1>'">
  10.   <!-- <strong>{{username}}</strong> -->
  11.   <!-- ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击） -->
  12.   <strong ng-bind-html="username"></strong>
  13.   <script src="bower_components/angular/angular.js"></script>
  14.   <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  15.   <script>
  16.     // 使用自定义的模块才可以依赖别的包里面定义模块，angular定义的默认模块没有依赖任何
  17.     angular.module('myApp', ['ngSanitize']);
  18.   </script>
  19. </body>
  20.  
  21. </html>

ng-repeat 指令

  • ng-repeat指令用来编译一个数组重复创建当前元素，如
  1. <ul class="messages">
  2.     <li ng-repeat="item in messages track by $index">
  3.         {{item}}
  4.     </li>
  5. </ul>

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-repeat 指令</title>
  7. </head>
  8.  
  9. <body ng-app="myApp">
  10.  
  11. <ul ng-controller="ListController">
  12.   <!-- ng-repeat 会遍历数组中每一个元素，分别创建li -->
  13.   <li ng-repeat="item in xiaoheishenghuo" data-id="{{item.id}}">
  14.     <span>{{$first?'开始':''}}</span>
  15.     <strong>{{item.name}}</strong>
  16.     &nbsp;&nbsp;&nbsp;&nbsp;
  17.     <span>{{item.age}}</span>
  18.     <span>{{$last?'没有了':''}}</span>
  19.   </li>
  20. </ul>
  21.  
  22.   <script src="bower_components/angular/angular.js"></script>
  23.   <script>
  24.     angular.module('myApp', [])
  25.       .controller('ListController', ['$scope', function($scope) {
  26.  
  27.  
  28.         $scope.xiaoheishenghuo = [];
  29.  
  30.         for (var i = 1; i < 10; i++) {
  31.           $scope.xiaoheishenghuo[$scope.xiaoheishenghuo.length] = {
  32.             id: i,
  33.             name: '赵小黑的小' + i,
  34.             age: 20 + i
  35.           };
  36.         }
  37.  
  38.  
  39.       }]);
  40.   </script>
  41. </body>
  42.  
  43. </html>

ng-class 指令

  • ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名
  1. <ul class="messages">
  2.     <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
  3.         {{item.content}}
  4.     </li>
  5. </ul>

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-repeat 指令</title>
  7.   <style>
  8.     .red {
  9.       color: red;
  10.     }
  11.  
  12.     .green {
  13.       color: green;
  14.     }
  15.   </style>
  16. </head>
  17.  
  18. <body ng-app="myApp">
  19.   <ul ng-controller="ListController">
  20.     <!-- class="{{$even?'red':'green'}}" -->
  21.     <!-- ng-class会根据当前设置对象的属性和属性值决定是否添加特定类名 -->
  22.     <li ng-repeat="item in xiaoheishenghuo" ng-class="{red:$even,green:$odd}" data-id="{{item.id}}">
  23.       <strong>{{item.name}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;
  24.       <span>{{item.age}}</span>
  25.     </li>
  26.   </ul>
  27.   <script src="bower_components/angular/angular.js"></script>
  28.   <script>
  29.     angular.module('myApp', [])
  30.       .controller('ListController', ['$scope', function($scope) {
  31.  
  32.  
  33.         $scope.xiaoheishenghuo = [];
  34.  
  35.         for (var i = 1; i < 10; i++) {
  36.           $scope.xiaoheishenghuo[$scope.xiaoheishenghuo.length] = {
  37.             id: i,
  38.             name: '赵小黑的小' + i,
  39.             age: 20 + i
  40.           };
  41.         }
  42.  
  43.  
  44.       }]);
  45.   </script>
  46. </body>
  47.  
  48. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-repeat 指令</title>
  7.   <style>
  8.     .red {
  9.       background-color: red;
  10.     }
  11.  
  12.     .green {
  13.       background-color: green;
  14.     }
  15.  
  16.     #box {
  17.       height: 200px;
  18.       width: 200px;
  19.       transition:background-color 1s ease;
  20.     }
  21.   </style>
  22. </head>
  23.  
  24. <body ng-app>
  25.   <select ng-model="style">
  26.     <option value="red">红色</option>
  27.     <option value="green">绿色</option>
  28.   </select>
  29.   <!-- <div id="box" ng-class="style"></div> -->
  30.   <div id="box" ng-class="{red:style=='red', green:style=='green'}"></div>
  31.   <script src="bower_components/angular/angular.js"></script>
  32. </body>
  33.  
  34. </html>

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-repeat 指令</title>
  7.   <style>
  8.     .red {
  9.       color: red;
  10.     }
  11.  
  12.     .green {
  13.       color: green;
  14.     }
  15.   </style>
  16. </head>
  17.  
  18. <body ng-app="myApp">
  19.   <input type="text" ng-model="lastname">
  20.   <ul ng-controller="ListController">
  21.     <li ng-repeat="name in students track by $id($index)" ng-class="{red:lastname!=''&&name.startsWith(lastname)}">{{name}}</li>
  22.   </ul>
  23.   <script src="bower_components/angular/angular.js"></script>
  24.   <script>
  25.     angular.module('myApp', [])
  26.       .controller('ListController', ['$scope', function($scope) {
  27.  
  28.  
  29.         $scope.students = ['胡shit', '赵四', '网商务', '李三', '李三', '李三'];
  30.  
  31.  
  32.       }]);
  33.   </script>
  34. </body>
  35.  
  36. </html>

ng-show/ng-hide 指令

  • ng-show/ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素
  1. <ul class="messages">
  2.     <li ng-repeat="item in messages track by $index" ng-show="item.read">
  3.         {{item.content}}
  4.     </li>
  5. </ul>
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-class 指令</title>
  7.   <style>
  8.     .tips {
  9.       position: absolute;
  10.       top: 0;
  11.       left: 0;
  12.       right: 0;
  13.       bottom: 0;
  14.       background-color: rgba(100, 100, 100, .5);
  15.       font-size: 40px;
  16.       line-height: 100vh;
  17.       text-align: center;
  18.     }
  19.   </style>
  20. </head>
  21.  
  22. <body ng-controller="ListController">
  23.   <div>
  24.     aaaaaaaaaaaaaa
  25.   </div>
  26.   <!-- ng-show 决定是否显示 ng-hide 是否隐藏 ng-if 是否存在 -->
  27.   <div class="tips" ng-if="loading">
  28.     loading...
  29.   </div>
  30.   <script src="bower_components/angular/angular.js"></script>
  31.   <script>
  32.     angular.module('myApp', [])
  33.       .controller('ListController', ['$scope', '$timeout', function($scope, $timeout) {
  34.         $scope.loading = true;
  35.  
  36.         $timeout(function() {
  37.           $scope.loading = false;
  38.  
  39.           $timeout(function() {
  40.             $scope.loading = true;
  41.           }, 3000);
  42.  
  43.         }, 3000);
  44.       }]);
  45.   </script>
  46. </body>
  47.  
  48. </html>

 

 ng-cloak指令

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-cloak 指令</title>
  7.   <!-- <style>
  8.     [ng\:cloak],
  9.     [ng-cloak],
  10.     [data-ng-cloak],
  11.     [x-ng-cloak],
  12.     .ng-cloak,
  13.     .x-ng-cloak,
  14.     .ng-hide:not(.ng-hide-animate) {
  15.       display: none !important;
  16.     }
  17.  
  18.     ng\:form {
  19.       display: block;
  20.     }
  21.  
  22.     .ng-animate-shim {
  23.       visibility: hidden;
  24.     }
  25.  
  26.     .ng-anchor {
  27.       position: absolute;
  28.     }
  29.   </style> -->
  30.   <script src="bower_components/angular/angular.js"></script>
  31. </head>
  32.  
  33. <body ng-app ng-cloak>
  34.   <span>{{'hello angular'}}</span>
  35. </body>
  36.  
  37. </html>
  • ng-if是指是否存在DOM元素

ng-link/ng-src 指令

  • ng-link/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG，如
  1. <!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->
  2. <img src="{{item.url}}">
  3. <!-- 可以使用ng-src解决该问题 -->
  4. <img ng-src="{{item.url}}">
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-src</title>
  7.   <script src="bower_components/angular/angular.js"></script>
  8. </head>
  9.  
  10. <body ng-app ng-init="imgUrl='22.png'" ng-cloak>
  11.   <img ng-src="{{imgUrl}}" alt="">
  12.  
  13.   <a ng-href="{{imgUrl}}">跳转到图片</a>
  14. </body>
  15.  
  16. </html>

 ng-switch指令

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>ng-switch 指令</title>
  6. </head>
  7. <body ng-app>
  8.   <select ng-model="selected">
  9.     <option value="1">1</option>
  10.     <option value="2">2</option>
  11.     <option value="3">3</option>
  12.   </select>
  13.   <div ng-switch="selected">
  14.     <div ng-switch-when="1">
  15.       你选择的是1
  16.     </div>
  17.     <div ng-switch-when="2">
  18.       你选择的是2
  19.     </div>
  20.     <div ng-switch-when="3">
  21.       你选择的是3
  22.     </div>
  23.     <div ng-switch-default>
  24.       你什么都没选
  25.     </div>
  26.   </div>
  27.  
  28.   <script src="bower_components/angular/angular.js"></script>
  29. </body>
  30. </html>

其他常用指令

  • ng-model
  • ng-class
  • ng-show/ng-hide/ng-if
  • ng-click
  • ng-link/ng-src
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>ng-xxx 其他指令</title>
  7. </head>
  8.  
  9. <body ng-app>
  10.   <p>
  11.     <input type="checkbox" ng-model="checked">全选/取消全选</p>
  12.   <ul>
  13.     <!-- ng-checked 和 ng-selected 只会做数据到视图的同步，不会做视图到数据的同步 -->
  14.     <li>选项01
  15.       <input type="checkbox" ng-checked="checked">
  16.     </li>
  17.     <li>选项02
  18.       <input type="checkbox" ng-checked="checked">
  19.     </li>
  20.     <li>选项03
  21.       <input type="checkbox" ng-checked="checked">
  22.     </li>
  23.     <li>选项04
  24.       <input type="checkbox" ng-checked="checked">
  25.     </li>
  26.     <li>选项05
  27.       <input type="checkbox" ng-checked="checked">
  28.     </li>
  29.   </ul>
  30.   <script src="bower_components/angular/angular.js"></script>
  31. </body>
  32.  
  33. </html>

自定义指令

  • AngularJS中可以通过代码自定义指令：
  1. myModule.directive('hello', function() {
  2.     return {
  3.         restrict: 'E',
  4.         template: '<h1>Hello world</h1>',
  5.         replace: true
  6.     };
  7. });
  8. myApp.directive("ngHover", function() {
  9.     return function(scope, element, attrs) {
  10.         element.bind("mouseenter", function() {
  11.             element.css("background", "yellow");
  12.         });
  13.         element.bind("mouseleave", function() {
  14.             element.css("background", "none");
  15.         });
  16.     }
  17. });
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Document</title>
  7.   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  8. </head>
  9.  
  10. <body ng-app="demoApp">
  11.   <!-- <itcastButton></itcastButton> -->
  12.   <!-- <itcast-button></itcast-button> -->
  13.   <!-- <div itcastButton></div> -->
  14.   <btn-primary></btn-primary>
  15.   <btn-danger></btn-danger>
  16.   <script src="bower_components/angular/angular.js"></script>
  17.   <script>a
  18.     var demoApp = angular.module('demoApp', []);
  19.  
  20.     // 第一个参数是指令的名字，第二个参数任然应该使用一个数组，数组的最后一个元素是一个函数
  21.     // 定义指令的名字，应该使用驼峰命名法
  22.     demoApp.directive('itcastButton', [function() {
  23.       // 该函数应该返回一个指令对象
  24.       return {
  25.         template:'<input type="button" value="itcast" class="btn btn-lg btn-primary btn-block" />'
  26.       };
  27.     }]);
  28.  
  29.  
  30.     // demoApp.directive('btnPrimary', [function() {
  31.     //   return {
  32.     //     template:'<input type="button" value="itcast" class="btn btn-primary" />'
  33.     //   };
  34.     // }]);
  35.  
  36.     // demoApp.directive('btnDanger', [function() {
  37.     //   return {
  38.     //     template:'<input type="button" value="itcast" class="btn btn-danger" />'
  39.     //   };
  40.     // }]);
  41.  
  42.     // demoApp.directive('btnSuccess', [function() {
  43.     //   return {
  44.     //     template:'<input type="button" value="itcast" class="btn btn-success" />'
  45.     //   };
  46.     // }]);
  47.  
  48.     demoApp.controller('DemoController', ['$scope', function($scope) {
  49.       // $scope.xxxx=xxx;
  50.       // $scope.do=function() {
  51.  
  52.       // };
  53.       // $scope.$watch('',function(now,old) {
  54.  
  55.       // });
  56.     }]);
  57.   </script>
  58. </body>
  59.  
  60. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Document</title>
  7.   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  8. </head>
  9.  
  10. <body ng-app="demoApp">
  11.   <!-- <btn>itcast</btn> -->
  12.   <div breadcrumb></div>
  13.   <breadcrumb data=""></breadcrumb>
  14.   <script src="bower_components/angular/angular.js"></script>
  15.   <script>
  16.     var demoApp = angular.module('demoApp', []);
  17.  
  18.  
  19.     demoApp.directive('breadcrumb', [function() {
  20.       // Runs during compile
  21.       return {
  22.         // 指定当前指令的类型什么样的
  23.         // restrict: 'EA',
  24.         // // E = Element, A = Attribute, C = Class, M = Comment
  25.         // template: '', // 模版字符串
  26.         templateUrl: 'tmpls/breadcrumb.html',
  27.         replace: true,
  28.         // transclude: true,
  29.       };
  30.     }]);
  31.  
  32.     // demoApp.directive('btn', [function() {
  33.     //   return{
  34.     //     scope:{
  35.     //       primary:'@',
  36.     //       lg:'@',
  37.     //       block:'@',
  38.     //     },
  39.     //     template:'<button class="btn {{primary==\'true\'?\'btn-primary\':\'\'}}">button</button>'
  40.     //   }
  41.     // }]);
  42.  
  43.     // demoApp.directive('btn', [function() {
  44.     //   return {
  45.     //     // 指令对象的transclude必须设置为true才可以在模版中使用ng-transclude指令
  46.     //     transclude: true,
  47.     //     replace: true, // 替换指令在HTML中绑定的元素
  48.     //     template: '<button class="btn btn-primary btn-lg" ng-transclude></button>'
  49.     //   };
  50.     // }]);
  51.   </script>
  52. </body>
  53.  
  54. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>封装一个面包屑导航</title>
  7.   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  8. </head>
  9.  
  10. <body ng-app="myApp" ng-controller="DemoController">
  11.   <breadcrumb data="{{pathData1}}"></breadcrumb>
  12.   <breadcrumb data="{{pathData2}}"></breadcrumb>
  13.   <script src="bower_components/angular/angular.js"></script>
  14.   <script>
  15.     var myApp = angular.module('myApp', []);
  16.  
  17.     myApp.controller('DemoController', ['$scope', function($scope) {
  18.       $scope.pathData1 = {
  19.         home: '#',
  20.         itcast: '#',
  21.         itheima: '#',
  22.         bbs: '#'
  23.       };
  24.       $scope.pathData2 = {
  25.         home: '#',
  26.         library: '#',
  27.         data: '#'
  28.       };
  29.     }]);
  30.  
  31.     // 定义一个面包屑导航指令
  32.     myApp.directive('breadcrumb', [function() {
  33.       // 返回指令对象
  34.       return {
  35.         scope: {},
  36.         templateUrl: 'tmpls/breadcrumb.html',
  37.         replace: true,
  38.         link: function(scope, element, attributes) {
  39.           scope.data = JSON.parse(attributes.data);
  40.           // console.log(scope.data);
  41.         }
  42.       };
  43.     }]);
  44.   </script>
  45. </body>
  46.  
  47. </html>

todomvc-app-template案例

  1. <!doctype html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  6. 		<title>Template • TodoMVC</title>
  7. 		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
  8. 		<!-- CSS overrides - remove if you don't need it -->
  9. 		<link rel="stylesheet" href="css/app.css">
  10. 	</head>
  11. 	<body ng-app="MyTodoMvc">
  12. 		<section class="todoapp" ng-controller="MainController">
  13. 			<header class="header">
  14. 				<h1>todos</h1>
  15. 				<form ng-submit="add()">
  16. 					<input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
  17. 				</form>
  18. 			</header>
  19. 			<section class="main">
  20. 				<input class="toggle-all" type="checkbox" ng-click="toggleAll()">
  21. 				<label for="toggle-all">Mark all as complete</label>
  22. 				<ul class="todo-list">
  23. 					<li ng-repeat="todo in todos" ng-class="{completed:todo.completed,editing:todo.id===currentEditingId}" data-id="{{todo.id}}">
  24. 						<div class="view">
  25. 							<input class="toggle" type="checkbox" ng-model="todo.completed">
  26. 							<label ng-dblclick="editing(todo.id)">{{todo.text}}</label>
  27. 							<button class="destroy" ng-click="remove(todo.id)"></button>
  28. 						</div>
  29. 						<form ng-submit="save()">
  30. 							<input class="edit" ng-model="todo.text" ng-blur="save()">
  31. 						</form>
  32. 					</li>
  33. 				</ul>
  34. 			</section>
  35. 			<!-- This footer should hidden by default and shown when there are todos -->
  36. 			<footer class="footer">
  37. 				<!-- This should be `0 items left` by default -->
  38. 				<span class="todo-count"><strong>{{todos.length}}</strong> item left</span>
  39. 				<!-- Remove this if you don't implement routing -->
  40. 				<ul class="filters">
  41. 					<li>
  42. 						<a class="selected" href="#/">All</a>
  43. 					</li>
  44. 					<li>
  45. 						<a href="#/active">Active</a>
  46. 					</li>
  47. 					<li>
  48. 						<a href="#/completed">Completed</a>
  49. 					</li>
  50. 				</ul>
  51. 				<!-- Hidden if no completed items are left ↓ -->
  52. 				<button class="clear-completed" ng-click="clear()" ng-show="existCompleted()">Clear completed</button>
  53. 			</footer>
  54. 		</section>
  55. 		<footer class="info">
  56. 			<p>Double-click to edit a todo</p>
  57. 			<!-- Remove the below line ↓ -->
  58. 			<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
  59. 			<!-- Change this out with your name and url ↓ -->
  60. 			<p>Created by <a href="http://todomvc.com">you</a></p>
  61. 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  62. 		</footer>
  63. 		<!-- Scripts here. Don't remove ↓ -->
  64. 		<script src="node_modules/angular/angular.js"></script>
  65. 		<script src="js/app.js"></script>
  66. 	</body>
  67. </html>
  1. <--!app.js-->
  2. (function(angular) {
  3.   'use strict';
  4.  
  5.   /**
  6.    * MyTodoMvc Module
  7.    *
  8.    * 应用程序的主要的模块
  9.    */
  10.   var myApp = angular.module('MyTodoMvc', []);
  11.  
  12.   // 注册一个主要的控制器
  13.   myApp.controller('MainController', ['$scope', function($scope) {
  14.     // [1,2,3,4,5]
  15.     function getId() {
  16.       var id = Math.random(); // 1 2
  17.       for (var i = 0; i < $scope.todos.length; i++) {
  18.         if ($scope.todos[i].id === id) {
  19.           id = getId();
  20.           break;
  21.         }
  22.       }
  23.       return id;
  24.     }
  25.  
  26.     // 文本框需要一个模型
  27.     $scope.text = '';
  28.  
  29.     // 任务列表也需要一个
  30.     // 每一个任务的结构 { id: 1, text: '学习', completed: true }
  31.     $scope.todos = [{
  32.       id: 0.123,
  33.       text: '学习',
  34.       completed: false
  35.     }, {
  36.       id: 0.22,
  37.       text: '睡觉',
  38.       completed: false
  39.     }, {
  40.       id: 0.232,
  41.       text: '打豆豆',
  42.       completed: true
  43.     }, ];
  44.  
  45.     // 添加todo
  46.     $scope.add = function() {
  47.     	if(!$scope.text){
  48.     		return;
  49.     	}
  50.       $scope.todos.push({
  51.         // 自动增长？
  52.         id: getId(),
  53.         // 由于$scope.text是双向绑定的，add同时肯定可以同他拿到界面上的输入
  54.         text: $scope.text,
  55.         completed: false
  56.       });
  57.       // 清空文本框
  58.       $scope.text = '';
  59.     };
  60.  
  61.  
  62.     // 处理删除
  63.     $scope.remove = function(id) {
  64.       // 删除谁
  65.       for (var i = 0; i < $scope.todos.length; i++) {
  66.         if ($scope.todos[i].id === id) {
  67.           $scope.todos.splice(i, 1);
  68.           break;
  69.         }
  70.       }
  71.       // $scope.todos
  72.     };
  73.  
  74.     // 清空已完成
  75.     $scope.clear = function() {
  76.       var result = [];
  77.       for (var i = 0; i < $scope.todos.length; i++) {
  78.         if (!$scope.todos[i].completed) {
  79.           result.push($scope.todos[i]);
  80.         }
  81.       }
  82.       $scope.todos = result;
  83.     };
  84.  
  85.     // 是否有已经完成的
  86.     $scope.existCompleted = function() {
  87.       // 该函数一定要有返回值
  88.       for (var i = 0; i < $scope.todos.length; i++) {
  89.         if ($scope.todos[i].completed) {
  90.           return true;
  91.         }
  92.       }
  93.       return false;
  94.     };
  95.  
  96.     // 当前编辑哪个元素
  97.     $scope.currentEditingId = -1;
  98.     $scope.editing = function(id) {
  99.       $scope.currentEditingId = id;
  100.     };
  101.     $scope.save = function() {
  102.       $scope.currentEditingId = -1;
  103.     };
  104.  
  105.     // $scope.checkall = false;
  106.     // $scope.$watch('checkall', function(now, old) {
  107.     //   for (var i = 0; i < $scope.todos.length; i++) {
  108.     //     $scope.todos[i].completed = now;
  109.     //   }
  110.     // });
  111.  
  112.     var now = true;
  113.     $scope.toggleAll = function() {
  114.       for (var i = 0; i < $scope.todos.length; i++) {
  115.         $scope.todos[i].completed = now;
  116.       }
  117.       now = !now;
  118.     }
  119.  
  120.   }]);
  121.  
  122. })(angular);

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/1007476
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号