第218天:Angular---模块和控制器
1、使用NG实现双边数据绑定
所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
ng-app是ng的入口,表示当前元素的所有指令都会被angular管理(对每一个指令进行分析和操作)
1 <body> 2 <div ng-app ng-init="user.name='world'"> 3 <h1>使用NG实现双边数据绑定</h1> 4 <input type="text" 5 placeholder="请输入你的姓名" 6 ng-model="user.name"> 7 <p>hello <strong>{{user.name}}</strong></p> 8 </div> 9 <script src="bower_components/angular/angular.js"></script> 10 </body>
2、模块
1 <body> 2 <div ng-app="myApp" ng-controller="DemoController"> 3 <h1>使用NG实现双边数据绑定</h1> 4 <input type="text" placeholder="请输入你的姓名" ng-model="user.name"> 5 <p>hello <strong>{{user.name}}</strong></p> 6 <input type="button" ng-click="show()"> 7 </div> 8 <script src="bower_components/angular/angular.js"></script> 9 <script> 10 // 注册模块 通过module函数, 11 // 第一个参数是这个模块的名字 12 // !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数,如果没有传递第二个参数,angular.module就不是创建一个模块 13 // angular.module 返回 刚刚创建的模块对象 14 var app= angular.module('myApp',[]); 15 // app.controller 方法用于创建一个控制器,所创建的控制器属于myApp模块 16 // app.controller('DemoCtrl'); 17 // 控制器函数的参数中有一个$scope 18 // angular.module('myApp').controller('DemoController', function($scope) {19 // // 当控制器执行时会自动执行的函数 20 // $scope.user = {}; 21 // $scope.user.name = '张三'; 22 // // $scope不仅仅可以往视图中暴露数据,还可以暴露行为 23 // $scope.show = function() {24 // console.log($scope.user); 25 // }; 26 // }); 27 </script> 28 </body>
3、控制器
1 <body ng-app="myModule" ng-controller="HelloController"> 2 <script src="bower_components/angular/angular.js"></script> 3 <script> 4 // 由于控制器是必须出现在某个模块下的,想创建一个控制器必须先创建模块 5 var module = angular.module('myModule', []); // 返回的就是模块对象 6 7 // angular在执行控制器函数时, 8 // 会根据参数的名字($scope)去自动的注入对象 9 // 根据参数名称传递对应对象,所以必须要写正确的参数名称 10 // module.controller('HelloController', function($scope) {11 // console.log($scope); 12 // }); 13 // 14 // 由于压缩代码会改变参数名称,注册控制的标准方式就是通过第二个参数传递数组的方式(数组的成员最后一个就是原本的控制器函数,前面的成员都是需要注入的对象名称) 15 module.controller('HelloController', ['$scope','$http', function(a,b) { 16 console.log(a); 17 }]); 18 </script> 19 </body>
4、注册登录的实现
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>
5、表达式(页面由表达式转为数据过程的隐藏)
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>
第218天:Angular---模块和控制器相关推荐
- angular 模块构建_通过构建全栈应用程序学习Angular 6
angular 模块构建 Angular 6 is out! The new features include better performance, new powerful CLI additio ...
- angular模块库开发实例
angular模块库开发实例 随着前端框架的诞生,也会随之出现一些组件库,方便日常业务开发.今天就聊聊angular4组件库开发流程. 下图是button组件的基础文件. nk-button.comp ...
- angular 模块构建_我如何在Angular 4和Magento上构建人力资源门户
angular 模块构建 Sometimes trying a new technology mashup works wonders. Both Magento 2 + Angular 4 are ...
- angular 模块构建_如何通过11个简单的步骤从头开始构建Angular 8应用
angular 模块构建 Angular is one of the three most popular frameworks for front-end development, alongsid ...
- 入口文件到控制器 php,tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析...
本文实例讲述了tp5.0框架隐藏index.php入口文件及模块和控制器的方法.分享给大家供大家参考,具体如下: 1. 隐藏入口文件: [ IIS ] 在IIS的高版本下面可以配置web.Config ...
- Angular7入门辅助教程(一)——Angular模块
如果有任何的非技术障碍,比如如何新建Angular项目,请先到我的"Angular7入门辅助教程"专栏参考这篇博客:Angular7入门辅助教程--前篇 NgModule 本篇博客 ...
- angular 模块构建_如何使用Angular和服务人员构建无需Internet即可运行的网站
angular 模块构建 by Tomiwa 通过Tomiwa 如何使用Angular和服务人员构建无需Internet即可运行的网站 (How to build websites that work ...
- Angular模块/服务/MVVM
angular 与 jquery 共同点 都是一个前端的JS文件而已 不同点: angular 是一个框架 我们写的代码由框架调用,我们必须要按照特定的规则编写代码 jquery是一个库 我们调用库预 ...
- RequireJs按需要加载angular模块和依赖,并且用r.js压缩打包js和css文件实现加载优化(图文)。
RequireJS 是一个JavaScript模块加载器,使用RequireJS加载模块化脚本将提高代码的加载速度和质量.而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路 ...
- php怎么创建控制器类,php ci下添加一个创建常用的模块和控制器方法
我这么写是非常不好的 ,这些都可以写在lirbraries里面 (ci就是这么干的) 我这里是自己用 大概一个模型 没那么多讲究 现在core/CodeIgniter.php 文件 if($modle ...
最新文章
- 一个新游戏的思路;大家来说说看,觉得好的话,我做成游戏
- Redis Manager 主要功能介绍
- CCNP之BSCI实验6:EIGRP验证
- 什么时候用activity什么时候用fragment
- python内函数名加括号和不加括号的区别,python中 函数名加括号与不加括号
- int输出%f浮点值是0,double/float 浮点数%d输出0的原因
- 5.2 Zend_Log_Formatters
- 《Google Go: A Primer》学习笔记
- Git 与 GitHub 速成教程
- centos7搭建radius认证服务器
- AE弹簧弹球动画表达式
- c语言图片渐入代码_如何用c语言读取图片
- 微信怎么关闭微信朋友圈及点赞提醒通知?
- Oracle ASM存储Spfile解析
- 今天来聊聊函数function func()
- 皮革行业经销商在线系统:简化采购审批流程,轻松管控代理商
- 华擎主板的instant flash功能问题
- 西湖论剑2022-misc-wp
- Go语言实现AI五子棋智能算法
- 联想企业网盘携手宇通客车,助力传统制造业技术和经济效益双赢