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 翻译的 ...
随机推荐
- Python中什么是set、更新、遍历set和set的特点
dict的作用是建立一组 key 和一组 value 的映射关系,dict的key是不能重复的. 有的时候,我们只想要 dict 的 key,不关心 key 对应的 value,目的就是保证这个集合的 ...
- jquery全选+下拉+单选+事件+挂事件
1.全选 <body> <input type="checkbox" id="qx" /> 全选 <input type=&quo ...
- idea控制台乱码
打开File->Settings->Editer->File Encoding,将IDE Encoding 和 Project Encoding 都改为UTF-8
- Linux学习之CentOS(十)--虚拟机下的CentOS如何上网
原地址:http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/05/3001148.html 这篇随笔应该说跟CentOS的学习关系不是很大, ...
- Android Lint简介（转）
转载自原文:http://blog.csdn.net/hudashi/article/details/8333349,感谢原作者. 英文原文:http://tools.android.com/tips ...
- ArcGIS API for Silverlight 地图元素点闪烁，线流动显示的处理方式
原文:ArcGIS API for Silverlight 地图元素点闪烁,线流动显示的处理方式 <Grid x:Name="LayoutRoot" Background=& ...
- ASP.NET MVC 利用ActionFilterAttribute来做权限等
ActionFilterAttribute是Action过滤类,该属于会在执行一个action之前先执行.而ActionFilterAttribute是 MVC的一个专门处理action过滤的类.基于 ...
- proxy解析
知其所以然 本文不是教程向,倾向于分析科学上网的一些原理.知其所以然,才能更好地使用工具,也可以创作出自己的工具. 科学上网的工具很多,八仙过海,各显神通,而且综合了各种技术.尝试从以下四个方面来解析 ...
- TCP connection status
A TCP connection progresses through a series of states during its lifetime. The following diagram il ...
- JS之call/apply/bind
测试代码: var a = 1; var obj = { a = 2; } function test(a){ alert(a); alert(this.a); } 1.test(3); 结果:3,1 ...