初识 Angular 体会
一句话描述:一个前端的类似MVC框架的JS库
刚接触2天,刚一看感觉和asp.net mvc能实现的功能有点重复.
虽然asp.net的表单验证,Razor语法使其在前端开发有较大提升,但要实现比较高级复杂效果还是要
客户端JS来实现,服务端更多是提供和保存数据的角色.
如果只是简单的CURD应用,用原始Mvc的功能会效率更高也够用.
很多前端js框架注重的是UI表现.而angular注重的是如何管理和表现数据.
angular本身不提供样式和控件,是一个管理数据,控制输出的JS库.
虽然很多控件库对于复杂控件都支持绑定json数据.但没有angular这么方便好用自由全面.
适用:CURD应用,富客户端,重客户端/轻服务端的应用(对数据处理较复杂)
不适合:高度灵活自由的,游戏类,过于简单的.
标签属性介绍(网上复制,经过一点加工):
ng-app 类似命名空间,区分不同控制器.
var app = angular.module('AppName', []);
ng-controller 声明一个新的控制器的名字.
app.controller('ControllName', function($scope) {
$scope.Property=...
}); 实例化控制器,第二个参数控制器构造函数.可以给控制器属性,方法赋值. 这些值就是Model. $scope就是每个控制器的Model.作用域:当前控制器及其子Dom.
AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数
app.controller('customersCtrl',
function($scope, $http) {
$http.get("http://xxx.php")
.success(function(response) {$scope.names = response.records;});
});
ng-model 将当前Dom输入值或值绑定到指定Model(即保存数据的变量)
这种绑定是双向的(如果Model值改变了,这个Dom对象的值也会跟着变)
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div> 可以通过(valid:合法, dirty:值是否改变了, touched:是否触屏点击, error)来获取所绑定Dom对象的状态. <form ng-app="" name="myForm" ng-init="myText = 'test@123.com'">
<input type="email" name="myAddress" ng-model="myText"required></p>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
</form>
绑定的Dom对象的状态相关的css样式
background-color:
lightblue;
}
ng-init 指令初始化应用程序数据。
<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p> </div>
ng-repeat 指令会重复一个 HTML 元素:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>
表格:
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
其他常用指令
ng-disabled bool 对应 Dom 的 disabled 属性。
ng-show bool 显示和隐藏
ng-click function/Expression onclick事件执行代码
初识 Angular 体会的更多相关文章
- 初识Angular
一.AngularJs简介 1.AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识 ...
- 带你初识Angular中MVC模型
简介 MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳,比如,后端框架(Struts.Spring MVC等).前端框 ...
- 集腋成裘-05-angularJS -初识angular
私以为angular的最大特点是:只关注数据 1.1 angular之:双向绑定 <!DOCTYPE html> <html ng-app=""> < ...
- 简话Angular 01 初识Angular 数据绑定
1. Angular有哪些突出优点 1) MVC 基于Html-Javascript 2) 依赖注入 3) 数据双向绑定,响应式页面设计 4) 模块化,自定义指令 2. 简话数据绑定 1) 代码: & ...
- Angular权威指南学习笔记(转)
http://www.cnblogs.com/lzhp/p/4000741.html 第一章. 初识Angular——Angular是MVW的Js框架. 第二章. 数据绑定 ...
- Angular权威指南学习笔记
第一章. 初识Angular--Angular是MVW的Js框架. 第二章. 数据绑定--ViewModel中不仅可以含有变量,还可以还有事件.可以通过事件来控制变量的值改 ...
- angular.js快速入门 hello world
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...
- 关于 angular cookie 设置的坑
初识Angular,才知道掉进了这么一个各种大坑的坑. 先说下对于$cookie.put 这几个方法,只有1.4以上版本才可以用,其余低于版本请使用 $cookieStore: 下面举例下使用方法: ...
- 二识angularJS
前言:记得三月份时下定决心说每天要更新一篇博客,学习点新东西,实践下来发现太不现实,生活中的事情很多,再喜欢也不能让它一件占据生活的全部吧,所以呢,以后顺其自然吧.之前有一篇'初识angular'因为 ...
随机推荐
- [BZOJ 1025] [SCOI2009] 游戏 【DP】
题目链接:BZOJ - 1025 题目分析 显然的是,题目所要求的是所有置换的每个循环节长度最小公倍数的可能的种类数. 一个置换,可以看成是一个有向图,每个点的出度和入度都是1,这样整个图就是由若干个 ...
- 【HDU3341】 Lost's revenge (AC自动机+状压DP)
Lost's revenge Time Limit: 5000MS Memory Limit: 65535KB 64bit IO Format: %I64d & %I64u Descripti ...
- struts2 集成webservice 的方法
由于项目需求的需要,要在原来用Struts2的框架之上集成webservice,因为之前单单做webservice的时候没有多大问题,使用 Spring 和 Xfire就可以轻松地发布服务,但是,当和 ...
- 启用VSFTPD日志及其解读
启用vsftpd日志及其解读(转贴)在vsftpd.conf中有如下内容定义了日志的记录方式:# 表明FTP服务器记录上传下载的情况xferlog_enable=YES# 表明将记录的上传下载情况写在 ...
- Java多线程(四)之ConcurrentSkipListMap深入分析
一.前言 concurrentHashMap与ConcurrentSkipListMap性能测试 在4线程1.6万数据的条件下,ConcurrentHashMap 存取速度是ConcurrentSki ...
- (转载)MySQL BETWEEN 用法
(转载)http://www.5idev.com/p-php_mysql_between.shtml MySQL BETWEEN 语法 BETWEEN 运算符用于 WHERE 表达式中,选取介于两个值 ...
- maya绝招(41--60)
第41招 捕捉和旋转 从MAYA5开始,双击工具箱中的移动缩放旋转工具,马上就可以调出工具属性栏.以旋转为例,将Snap Rotate勾选,并设置Step Size数值,就可以旋转特定的数值了 第42 ...
- sql2005如何附加数据库
1.首先把mdf(数据库主文件)和ldf(数据库日志文件)放到C:\Program Files (x86)\Microsoft SQL Server\MSSQL.1\MSSQL\Data 2.登陆sq ...
- Google的一些功能和软件
本博文的主要内容有 .Google的一些功能和软件 Google的一些功能和软件 1. iGoogle 2. Google Earth 3. Google Talk http://www.goo ...
- Cocos2d-x CCActionInterval
第一部分:CCActionInterval家族(持续动作) 持续动作,顾名思义,就是该动作的执行将持续一段时间.因此持续动作的静态生成函数,往往附带一个时间值Duration.例如: CCAction ...