<!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.的更多相关文章

  1. AngularJS入门-demo

    双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...

  2. AngularJS +HTML Demo

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  3. AngularJS学习笔记(一) 关于MVVM和双向绑定

    写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...

  4. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  5. angularjs transclude demo

    <!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...

  6. angularjs ngRoute demo

    <!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...

  7. angularjs $watch demo

    <!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...

  8. AngularJS 下拉列表demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  9. AngularJS 中文资料+工具+库+Demo 大搜集

    中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html   翻译的 ...

随机推荐

  1. WIN7 64位系统下的服务程序更新失败问题解决

    自己用DELPHI做了个小的服务在后台运行,帮助自己做一些琐事,今天修改了一下代码结果重启服务的时候一直还是以前的状态,新加的代码没任何效果. 1.检查程序没问题呀 2.关闭SSD缓存硬盘问题仍旧 3 ...

  2. 发现了一个很好的Pasical编程软件Lazarus

    下载地址:http://www.lazarus.freepascal.org/ 中文社区:http://www.fpccn.com/ 该软件有几点如下特征: 1.跨平台.体积小(只有100多M) 2. ...

  3. XML xsd

    targetNamespace:表示本XSD中定义的元素和类型的名字空间都是http://exammpleOrder. xmlns:xsd:表示以前缀xsd开头的元素或则类型来自于http://www ...

  4. [have_fun] 好玩哒小游戏又来啦

    联机贪吃蛇,相互厮杀,试一下吧! http://splix.io/

  5. 删除win7中的库/收藏夹/家庭组/网络

    通过修改注册表删除库/收藏夹/家庭组/网络(还是不习惯库的这种管理方式, 导航里面又太占地方) 库:[HKEY_CLASSES_ROOT\CLSID\{031E4825-7B94-4dc3-B131- ...

  6. java JDK8 学习笔记——第18章 自定义泛型、枚举与注释

    第十八章 自定义泛型.枚举与注释 18.1 自定义泛型 泛型定义: (1)仅定义在方法上的泛型语法 (2)用来限制泛型可用类型的extends与super关键字(3)?类型通配字符的使用 18.1.1 ...

  7. the differences between function and procedure

    一.自定义函数: 1. 可以返回表变量 2. 限制颇多,包括 不能使用output参数: 不能用临时表: 函数内部的操作不能影响到外部环境: 不能通过select返回结果集: 不能update,del ...

  8. position定位的小问题

    css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...

  9. 1001 数组中和等于K的数对

    1001 数组中和等于K的数对 基准时间限制:1 秒 空间限制:131072 KB 给出一个整数K和一个无序数组A,A的元素为N个互不相同的整数,找出数组A中所有和等于K的数对.例如K = 8,数组A ...

  10. 7Z命令行

    7-Zip (A) 4.57 Copyright (c) 1999-2007 Igor Pavlov 2007-12-06 Usage: 7za <command> [<switch ...