您的位置：首页 > Web前端 > AngularJS

AngularJs Test demo &front end MVVM implementation conjecture and argue.

2016-07-14 14:11 507 查看

<!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>

View Code
match:!

sendRequest($http, api.userGet).success(function (response) {
a.name = response.name;
a.btndisable = (a.btndisable === true ? false : true);
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航