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上找到了一个好方法. 简单 ...
随机推荐
- rqnoj-208-奥运火炬到厦门-dp
这道题目是把一个连续的串看成一个环. 那么除了原始的求最大字段和外. 还存在一种情况是前面的连续最大值,加上后面的连续最大值. #include<stdio.h> #include< ...
- C#创建word，操作、读写
要使用C#操作word,首先要添加引用: 1.添加引用->COM->Microsoft Word 11.0 Object Library 2.在.cs文件中添加 using Word;下面 ...
- PHP curl 抓取AJAX异步内容
其实抓ajax异步内容的页面和抓普通的页面区别不大.ajax只不过是做了一次异步的http请求,只要使用firebug类似的工具,找到请求的后端服务url和传值的参数,然后对该url传递参数进行抓取即 ...
- IIs 中运行asp程序出现“An error occurred on the server when processing the URL. Please contact the system administrator.”错误
在个人的win08系统上使用IIs运行 asp程序结果出现了以下错误 An error occurred on the server when processing the URL. Please c ...
- keepalived的脑裂问题
keepalived的脑裂问题 学习了:http://blog.51cto.com/10630401/2089847 split-brain 无HA不脑裂
- eclipse因为js validator无法通过导致build workspace失败
eclipse编译工程时时会validator js的errors和warnings,对于一些小型的项目,这当然没任何问题. 但是对于那些拥有大量js文件的web工程,js warnings通常会达到 ...
- 编译VLC for IOS
之前接触VLC是因为Winrt的项目,后来似乎ARM版本的始终搞不定(没有针对于ARM-COFF的GCC编译器),vlc for winrt的项目好久没有更新了,自己也没有深入研究.有一天跟同事聊,他 ...
- linux下vi编辑文件
vi 文件名.进入读文件模式 按i进入编辑模式 按g切光标换到第一行,按G光标切换到最后一行. 按Esc退出编辑模式 :q退出 :wq保存退出 以上命名后面加上!表示强制运行
- 数据库-IO系统性能之衡量性能的几个指标
转自http://storage.it168.com/a2011/0323/1169/000001169755_all.shtml 作为一个数据库管理员,关注系统的性能是日常最重要的工作之一,而在所关 ...
- IntelliJ IDEA类头注释和方法注释
The template is editable. Along with static text, code and comments, you can also use predefined var ...