<!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. ease of rerouting traffic in IP networks without readdressing every host

    https://en.wikipedia.org/wiki/Network_address_translation In the face of the foreseeable global IP a ...

  2. 处理PHP字符串的10个简单方法；mysql出现乱码：character_set_server=utf8

    PHP处理字符串的能力非常强大,方法也是多种多样,但有的时候你需要选择一种最简单且理想的解决方法.文章列举了10个PHP中常见的字符串处理案例,并提供了相对应的最理想的处理方法. 1.确定一个字符串的 ...

  3. Delphi XE5 与其他版本共存

    来源于http://www.board4allcz.eu 作者是gateway 如果你想使用Delphi诸如XE4.XE3.XE2.XE之类的版本跟Delphi XE5共存的话,在cglm.ini中简 ...

  4. Lambda 中如果构建一个查询条件，扔该Where返回我们需要的数据。

    有一个需求,比如所 省市县 这三个查询条件 都可能有可能没有,但是我们的查询条件怎么构建呢 首先需要看一下 Lambda中Where这个方法需要什么参数 public static IEnumerab ...

  5. XCode中的单元测试：编写测试类和方法（内容意译自苹果官方文档）

    当你在工程中通过测试导航栏添加了一个测试target之后, xcode会在测试导航栏中显示该target所属的测试类和方法. 这一章演示了怎么创建测试类,以及如何编写测试方法. 测试targets, ...

  6. Java中对象构造

    构造函数 作用:在构造对象的同时初始化对象.java强制要求对象 诞生同时被初始化,保证数据安全. 调用过程和机制:①申请内存,②执行构造函数的函数体,③返回对象的引用. 特点:与类同名,无返回类型, ...

  7. sort,ksort,asort的区别

    sort--对数组的val进行排序 ksort--对数组的key值进行排序 asort--对数组进行排序,键与值的对应关系不变 1.sort对数组排序 格式如下:bool sort(array &am ...

  8. [LeetCode] Jump Game II(贪婪算法)

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  9. 我的第一个WCF程序，很简单适合我等菜鸟

    1.首先我罗列一下网站搜索并经过自己理解的WCF的含义: 1)WCF:(WIndows Communication Foundation)是由微软是由微软发展的一组数据通信的应用开发接口,可以翻译为W ...

  10. 安装Sql server 2008时出现sql server 2005 express tools failed 怎么办？

    提示错误:Sql2005SsmsExpressFacet 检查是否安装了 SQL Server 2005 Express 工具. 失败,已安装 SQL Server 2005 Express 工具.若 ...