<!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. mysql和oracle 分页查询（转）

    最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一). mysql的分页查询 mysql的分页查询是最简单的,借 ...

  2. mysql查询昨天本周上周上月

    昨天 $yestoday = date("Y-m-d 00:00:00",strtotime('-1day'));$today = date("Y-m-d 00:00:0 ...

  3. 取消svn关联

    把下面这段文字保存成一个reg文件 Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\sh ...

  4. Prism&MEF构建开发框架 （一）

    Shell框架XECA shell.xaml主要起到是一个容器或壳的作用 <Window x:Class="XECA.Shell"      xmlns="http ...

  5. (leetcode)Missing Number

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  6. HTML-003-模拟IDE代码展开收起功能简单示例

    当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.

  7. Selenium2学习-035-WebUI自动化实战实例-033-页面快照截图应用之三 -- 区域截图（专业版）

    之前有写过两篇博文讲述了 WebUI 自动化测试脚本中常用的截图方法,敬请参阅如下所示链接: 浏览器显示区域截图 浏览器指定区域截图 那么当需要截取的区域不在浏览器显示窗口范围之内时,之前的方法显然无 ...

  8. mongoDB命令

    . getLastError db.runCommand({getLastError:}) . buildInfo //返回mongoDB的服务器版本号和操作系统类型 db.runCommand({} ...

  9. 关于action script与js相互调用的Security Error问题

    大家都知道,as和js相互调用可以通过ExternalInterface.call和ExternalInterface.addCallback来进行. 比较好的做法是使用之前通过ExternalInt ...

  10. imx6 kernel clock

    前段时间查看了uboot的时钟,kernel的也稍微了解了下,记录于此,以后再来补充完善. board-mx6q_sabresd.c MACHINE_START(MX6Q_SABRESD, " ...