第218天：Angular---模块和控制器
1、使用NG实现双边数据绑定
所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
ng-app是ng的入口，表示当前元素的所有指令都会被angular管理（对每一个指令进行分析和操作）
<body>
<div ng-app ng-init="user.name='world'">
<h1>使用NG实现双边数据绑定</h1>
<input type="text"
placeholder="请输入你的姓名"
ng-model="user.name">
<p>hello <strong>{{user.name}}</strong></p>
</div>
<script src="bower_components/angular/angular.js"></script>
</body>
2、模块
<body>
<div ng-app="myApp" ng-controller="DemoController">
<h1>使用NG实现双边数据绑定</h1>
<input type="text" placeholder="请输入你的姓名" ng-model="user.name">
<p>hello <strong>{{user.name}}</strong></p>
<input type="button" ng-click="show()">
</div>
<script src="bower_components/angular/angular.js"></script>
<script>
// 注册模块 通过module函数，
// 第一个参数是这个模块的名字
// !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数，如果没有传递第二个参数，angular.module就不是创建一个模块
// angular.module 返回 刚刚创建的模块对象
var app= angular.module('myApp',[]);
// app.controller 方法用于创建一个控制器，所创建的控制器属于myApp模块
// app.controller('DemoCtrl');
// 控制器函数的参数中有一个$scope
// angular.module('myApp').controller('DemoController', function($scope) {
// // 当控制器执行时会自动执行的函数
// $scope.user = {};
// $scope.user.name = '张三';
// // $scope不仅仅可以往视图中暴露数据，还可以暴露行为
// $scope.show = function() {
// console.log($scope.user);
// };
// });
</script>
</body>
3、控制器
<body ng-app="myModule" ng-controller="HelloController">
<script src="bower_components/angular/angular.js"></script>
<script>
// 由于控制器是必须出现在某个模块下的，想创建一个控制器必须先创建模块
var module = angular.module('myModule', []); // 返回的就是模块对象 // angular在执行控制器函数时，
// 会根据参数的名字（$scope）去自动的注入对象
// 根据参数名称传递对应对象，所以必须要写正确的参数名称
// module.controller('HelloController', function($scope) {
// console.log($scope);
// });
//
// 由于压缩代码会改变参数名称，注册控制的标准方式就是通过第二个参数传递数组的方式（数组的成员最后一个就是原本的控制器函数，前面的成员都是需要注入的对象名称）
module.controller('HelloController', ['$scope','$http', function(a,b) {
console.log(a);
}]);
</script>
</body>
4、注册登录的实现
<!DOCTYPE html>
<html lang="en" ng-app="HelloApp"> <head>
<meta charset="utf-8">
</head> <body>
<table border="1" ng-controller="WorldController">
<tr>
<td>用户名</td>
<td>
<input type="text" ng-model="user.username">
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" ng-model="user.password">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" ng-click="login()" value="登陆">
</td>
</tr>
<tr>
<td></td>
<td>{{message}}</td>
</tr>
</table>
<script src="bower_components/angular/angular.js"></script>
<script>
// 创建一个模块
var app = angular.module('HelloApp', []);
// 为这个模块创建一个控制器
app.controller('WorldController', ['$scope', function($scope) { // 数据
$scope.user = {
username: '',
password: ''
};
$scope.demo = ''; // 行为数据
$scope.login = function() {
// 因为数据的变化时双向的同步，所以界面上的值变化会同步到$scope.user上
console.log($scope.user);
}; // 请输入用户名 输入格式不合法
$scope.message = '请输入用户名';
// $scope.message取决于$scope.user // 官方的API中提供了一个$scope.$watch方法，
$scope.$watch('user.username', function(now, old) {
// 当user.username发生变化时触发这个函数
// console.log('now is ' + now);
// console.log('old is ' + old);
if (now) {
if (now.length < 7) {
$scope.message = '输入格式不合法';
} else {
$scope.message = '';
}
} else {
$scope.message = '请输入用户名';
}
}); // angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite
//
// angular.element('body')
}]);
</script>
</body> </html>
5、表达式（页面由表达式转为数据过程的隐藏）
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Angular 表达式</title>
<style>
/* ng-cloak指令就是在NG执行完毕过后自动移除 */ [ng-cloak],
.ng-cloak {
display: none;
}
</style>
</head> <body ng-app class="ng-cloak">
{{ true ? 'true':'false' }}
<script src="bower_components/angular/angular.js"></script>
</body> </html>
第218天：Angular---模块和控制器的更多相关文章
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
- 一个Angular模块中可以声明哪些组件？
一个Angular模块中可以声明哪些组件? (1) controller 控制器 (2) directive 指令 (3) function ...
- 03、AngularJs的模块与控制器
大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序.而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的.同时,模块允许声明来描述应用中依赖关系,以及如何进 ...
- 模块和控制器包含在JS文件中
在AngularJS应用程序中,通常是把模块和控制器包含在javascript文件中. <!DOCTYPE html><html><head><meta ht ...
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- iOS不得姐项目--推荐关注模块(一个控制器控制两个tableView),数据重复请求的问题,分页数据的加载,上拉下拉刷新(MJRefresh)
一.推荐关注模块(一个控制器控制两个tableView) -- 数据的显示 刚开始加载数据值得注意的有以下几点 导航控制器会自动调整scrollView的contentInset,最好是取消系统的设置 ...
- 使用路由延迟加载 Angular 模块
使用路由延迟加载 Angular 模块 Angular 非常模块化,模块化的一个非常有用的特性就是模块作为延迟加载点.延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源.这样 Angular ...
- Angular - 预加载 Angular 模块
Angular - 预加载延迟模块 在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块.但这需要一点时间.在用户第一次点击的时候,会有一点延 ...
- YII2中使用RBAC对模块，控制器，方法的权限控制以及规则的使用
在使用YII2中自带的RBAC时,需要先配置config/web.php: return [ // ... 'components' => [ 'authManager' => [ 'cl ...
- [开源]OSharpNS 步步为营系列 - 5. 添加前端Angular模块[完结]
什么是OSharp OSharpNS全称OSharp Framework with .NetStandard2.0,是一个基于.NetStandard2.0开发的一个.NetCore快速开发框架.这个 ...
随机推荐
- 闭包初体验 -《JavaScript面向对象编程指南》
下面是我对闭包的理解:(把他们整理出来,整理的过程也是在梳理) 参考<JavaScript面向对象编程指南> 1.首先,在理解闭包之前: 我们首先应该清楚下作用域和作用域链 作用域:每个函 ...
- Cloud Native Weekly | 华为云抢先发布Redis5.0，红帽宣布收购混合云提供商 NooBaa
1——华为云抢先发布Redis5.0 2——DigitalOcean K8s服务正式上线 3——红帽宣布收购混合云提供商 NooBaa 4——微软发布多项 Azure Kubernetes 服务更新 ...
- Ubuntu18.04安装Python3.6.8
Ubuntu18.04预装了Python3.6.5 终于不再预装Python2.7了 但是系统预装的Python分散安装在各个目录里 以后改起来非常不方便 所以本次安装Python3.6.8 Pyth ...
- AndroidStudio下使用 RecyclerView xml文件不显示预览条目并报错类似：NoClassDefFoundError 问题解决
在项目中使用RecyclerView是很普遍的,最近工作中遇到了这种情况: RecyclerView可以正常使用 不会报错 但是在layout中的xml文件中不显示并且报错,如下图:(报的错忘了截了, ...
- sql server sql查询数据库的表，字段，主键，自增，字段类型等信息
1.查询数据表的属性(名称.说明.是否主键.数据类型.是否自增) SELECT t1.name columnName,case when t4.id is null then 'false' else ...
- Java 浅拷贝 深拷贝
两者区别主要在于引用数据类型的属性,对于基本数据类型采用的是值传递,所以两者一样: 对于浅拷贝,引用数据类型只会进行引用传递,即复制一份引用值(内存地址)给新对象,一个对象的变化会影响到另一个的引用属 ...
- skipfish介绍
skipfish 开发语言:C语言 命令行扫描器 主动扫描web安全评估工具 谷歌开发 已经不再进行维护 重点关注web代码 通过两种方式进项扫描:1.字典枚举 2.递归爬网 优点:速度快.支持多路单 ...
- 高可用OpenStack（Queen版）集群-14.Openstack集成Ceph准备
参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...
- iOS中使用RNCryptor对资源文件加密（先加密后拖进项目中）
概述:IPA 在发布时,业务相关的敏感资源文件以明文的形式存储,由于没有加密保护,这些文件在应用发布后 可能被其他人获取,并结合其他漏洞和手段产生真实攻击.所以我们要 1.在设计.开发阶段,集合业务确 ...
- 硬件设计原理图Checklist 参考案例二 【转载】
类别 描述 检视规则 原理图需要进行检视,提交集体检视是需要完成自检,确保没有低级问题. 检视规则 原理图要和公司团队和可以邀请的专家一起进行检视. 检视规则 第一次原理图发出进行集体检视后所有的修改 ...