AngularJs Test demo &front end MVVM implementation conjecture and argue.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/angular.js"></script>
</head>
<body ng-app="app" ng-controller="cur">
how are you!
<div>
<input type="text" ng-model="name" />
{{name}}
<button ng-click="pop(this)">pop</button>
</div>
<ul>
<li ng-repeat="num in list">{{num}}</li>
</ul>
<select>
<option ng-repeat="no in select" value="{{no}}">{{no}}</option>
</select>
<div ng-show="show()">ng show test</div>
<div ng-show="show1">ng show test boolean</div>
<script>
var app = angular.module('app', []);
app.controller('cur', function ($scope) {
$scope.name = 'test';
$scope.list = [1, 2, 3, 4];
$scope.select = [4, 3, 2, 1];
$scope.pop = function (obj) {
//alert(obj);
alert($scope.name);
}
$scope.show = function () {
return false;
};
$scope.show1 = true;
});
</script>
</body>
</html>
mark 前端MVVM的实现方案：
整个scope内部的模型，统一由pipe的property change事件来处理，每次触发捕获的change等事件时对比原有scope的data,发现不相同即重新刷新data。 每次执行，均执行整个scope模块init,内部事件全部采用捕获的方式，事件全部绑定在scope最外层。
实现起来与后端mvvm是一致的，如wpf....
自动替换：添加事件检测，捕获change等事件，change之后重新init整个scope.
==section 2016.7.15 deeper practice!
<!DOCTYPE html>
<html>
<head>
<title>calos practising angular!</title>
<meta charset="utf-8" />
<script src="scripts/angular.js"></script>
</head>
<body ng-app="app" ng-controller="cur">
how are you!
<div>
<input type="text" ng-model="name" />
{{name}}
<button ng-disabled="!btndisable" ng-click="pop(this)">pop</button>
<button ng-disabled="btndisable" ng-click="pop(this)">pop</button>
</div>
<ul>
<li ng-repeat="num in list">{{num}}</li>
</ul>
<select ng-model="nameselected" ng-change="changename(this)">
<option ng-repeat="no in select" value="{{no}}">{{no}}</option>
</select>
<div ng-show="show()">ng show test</div>
<div ng-show="show1">ng show test boolean</div>
<div ng-include="'/partials/partial1.html'">
<!--how to use partial: remember to add sing quotation!
like this. but these words will not be displayed!-->
</div>
<a href="#/">/ will show by default!</a>
<a href="#/page1">Nav to page1 under pages folder!</a>
<a href="#/showinfo">Nav to page1 under pages folder!</a>
<a href="#/home">embeded page!</a>
<div ng-view>
<!-- this is a placeholder for routed pages to present! must have the tag ng-view="" -->
</div>
<script type="text/ng-template" id="embeded.home.html">
<h1> Home </h1>
</script> <script src="scripts/angular-route.js"></script>
<script>
var app = angular.module('app', ['ngRoute']) //#region infrastructure this is controllers region before configuring routes
app.controller('cur', function ($scope, $http, $timeout, $interval) {
//there should be a argument name validation in this controller
//injection function, so, 1st name must be $scope, but can use alias inner!
var a = $scope;
a.btndisable = true;
a.name = 'test';
a.list = [1, 2, 3, 4];
a.nameselected = '请选择';
a.select = [4, 3, 2, 1];
a.select = ['请选择'].concat(a.select);
a.pop = function (obj) {
//alert(obj);
alert(a.name);
//below for $http.get practice!
$http.get('/jsons/json.json').success(function (response) {
a.name = response.name;
a.btndisable = (a.btndisable === true ? false : true);
}).then(function (ret) {//the data returned has a wapper including data!
a.name = ret.data.name;
});
}
a.show = function () {
return false;
};
a.changename = function (obj) {
console.log(obj);
a.name = a.name + 'reissue!'
}
a.show1 = true; //$timeout(function () { alert('timeout!') }, 5000);
//$interval(function () { alert('interval') }, 2000);
});
app.controller('page1', function ($scope, $http) {
$scope.name = 'page1 controller';
});
//#endregion app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', { template: 'Welcome!' })
.when('/page1', { templateUrl: 'pages/page1.html', controller: 'page1' })
.when('/showinfo', { template: 'show pure text!' })
.when('/home', { templateUrl: 'embeded.home.html' })
.otherwise({ redirectTo: '/' });
}]);
</script>
</body>
</html>
match:!
sendRequest($http, api.userGet).success(function (response) {
a.name = response.name;
a.btndisable = (a.btndisable === true ? false : true);
});
AngularJs Test demo &front end MVVM implementation conjecture and argue.的更多相关文章
- AngularJS入门-demo
双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...
- AngularJS +HTML Demo
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- AngularJS学习笔记(一) 关于MVVM和双向绑定
写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...
- AngularJS入门Demo
1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...
- angularjs transclude demo
<!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...
- angularjs ngRoute demo
<!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...
- angularjs $watch demo
<!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...
- AngularJS 下拉列表demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- AngularJS 中文资料+工具+库+Demo 大搜集
中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的 ...
随机推荐
- 【php学习】字符串操作
关于字符串的处理,基本上就是那几种操作:字符串长度.查找子字符串的位置.替换字符串.截取字符串.拆分合并字符串 ... 字符串的定义:直接 $str = "abcd"; 或者 $s ...
- （转）常用的js设计模式
模式是解决或者避免一些问题的方案. 在JavaScript中,会用到一些常用的编码模式.下面就列出了一些常用的JavaScript编码模式,有的模式是为了解决特定的问题,有的则是帮助我们避免一些Jav ...
- ADO.NET连接到数据库（oracle）
本文摘抄于http://www.cnblogs.com/luluping/archive/2009/10/13/1582737.html,如有侵权,请联系博主. OracleConnection 对象 ...
- HTML5 拖拽功能
本地文件拖动到页面实例:(支持IE) <script> var DragFile = function (goalId) { var g = document.getElementById ...
- PM2的使用
PM2 是一个带有负载均衡功能的 Node 应用的进程管理器. 安装 npm install -g pm2 启动程序:pm2 start <app_name|id|all> 列举进程:pm ...
- .NET：OrderBy和ThenBy
.NET中OrderBy和ThenBy的语义是不同的,如:list.OrderBy(x=>x.A).OrderBy(x=>x.B),那么最终只会根据B进行排序:list.OrderBy(x ...
- Sql server中左连接语句
数据库中学生表和课程表如下: 左连接sql语句: select a.studentName,a.studentAge,b.courseName from student a left join cou ...
- jquery在线手册
开发时用到jquery,有几个函数想不起来怎么用,找了一下jquery在线手册. 记录一下,下回有需要再看看. 链接:http://www.chenfahui.cn/jq/
- js保留n位小数
1.功能:将浮点数四舍五入,取小数点后2位 function toDecimal(num) { var f = parseFloat(num); if (isNaN(f)) { return; } f ...
- 官方教程：教你用好微信JS-SDK接口
微信开放JS-SDK接口,开发者和行业用户可谓是欢欣鼓舞.奔走相告,目测将激起一大波第三方开发商的创新产品!真真是H5开发者的利好!但也有用户表示,还不了解JS-SDK接口到底是啥,究竟怎么用.现在, ...