angular初体验
所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
ng-app是ng的入口，表示当前元素的所有指令都会被angular管理（对每一个指令进行分析和操作）
利用angular实现双向绑定：
<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>
模块：
<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，angular控制器：
<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>
控制器2：
<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>
4.angular表达式：
<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>
angular初体验的更多相关文章
- Angular 初体验
事情起源当初一个简单的截屏然后推流出去的工具,这个工具当初我用winform简单实现了下,然后因公司业余,添加许多程序包,需要自动管理这些程序包,包含下载更新上传等,以及与后台交互,学生老师提醒,自动 ...
- 【Knockout.js 学习体验之旅】（1）ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- angularJs初体验，实现双向数据绑定！使用体会：比较爽
使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- .NET Core 初体验
.NET Core 作为微软的开源项目,neter 们对之的期待还是挺大的. 以前也看过,接触过,摸索建了几个示例项目,今天就罗列下自己的初体验. .NET Core 安装.帮助等 安装的话,直接官网 ...
- day21—AngularJS学习初体验
转行学开发,代码100天——2018-04-06 今天按照学习计划安排,开始AngularJS的学习. 关于AngularJS,在菜鸟教程上这样介绍 好吧,Angular学习起来非常简单,哈哈,现在就 ...
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...
随机推荐
- LaTex 制作表格 合并行\multirow 合并列\multicolumn
在latex文件最前面用这个包\usepackage{multirow} multirow 宏包提供了 \multirow 命令可以在表格中排版横跨两行以上的文本.命令的格式如下: \multirow ...
- Java：Maven依赖包下载
Maven依赖的包可以到Maven的中心仓库 http://search.maven.org/#browse 进行查找下载 例如需要MyBatis的依赖包,搜索mybatis,然后选择正确的路径,复制 ...
- ORCU浅析之安装和作用
众所周知,在安装Oracle BIEE之前需要安装Oracle RCU(Oracle Repository Creation Utility),美其名曰资料档案库.如果单单的从名称上来说,那就是我们实 ...
- UVA11402 - Ahoy, Pirates!(线段树)
UVA11402 - Ahoy, Pirates!(线段树) option=com_onlinejudge&Itemid=8&category=24&page=show_pro ...
- Apache多站点配置教程
看见这个版关于网络程序方面的文章还比较少,下面来一发~实践证明,本教程适用于Apache 2.2.22,其他版本相差应该不大 我的博客:http://wislab.net/,希望跟大家多多交流噢 Ap ...
- iOS子线程操作检测版本更新，有新版本通知用户更新, CheckVersion
iOS子线程操作检测版本更新,有新版本通知用户更新 CheckVersion 一:如何使用: #import "CheckVersion.h" //输入你的app在appStore ...
- Android调用系统拍照裁剪和选图功能
最近项目中用到修改用户头像的功能,基本上都是模板代码,现在简单记录一下. 调用系统拍照 private fun openCamera() { //调用相机拍照 // 创建File对象,用于存储拍照后的 ...
- 记一发Hive on tez的配置（Hive 3.1.1, Hadoop 3.0.3, Tez 0.9.1）
直接下载Tez的binary包部署安装是有问题的,因为默认支持hadoop版本为2.7,2.7以上的就需要手动编译了. 下载Tez源码 CD到源码文件夹,mvn install -Dhadoop.ve ...
- 高阶函数简述 js
1.简述 高阶函数似乎是一种先进编程的的技术.然而,并不是. 高阶函数其实就是将函数作为参数或者返回值的函数.其中作为参数的函数一般是回调函数. 2.例子 (1)最简单的例子 大家都熟悉数组的sort ...
- Python 命令行输出的颜色设置
Console上运行的python程序,有没有办法让print输出的文本可以显示不同的颜色? 这个其实跟python无关,跟具体所用console的类型有关系,不同的类型对应不同的控制码,如果是ans ...