<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        input.ng-invalid { background-color: lightblue; }

    </style>

</head>

<body ng-app="myApp">

    <div>

        <!--ng-app指令告诉Angular应该管理页面中的哪一块,在整个页面中只能有一个

        ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

        ng-bind指令把应用程序数据绑定到 HTML 视图。-->

        <p>名字：</p><input type="text" ng-model="name" />

        <p ng-bind="name"></p><!--当angular未加载完时不会显示-->

        <p>{{name}}</p><!--当angular未加载完时会显示-->

        <p>p>{{1+1}}</</p> <!--在{{}}里面计算-->

        <!--ng-init指令初始化AngularJs应用程序变量,多个变量以“;”隔开-->

        <p ng-init="firstName='Jack';lastName='han'">

            姓名:{{firstName}} {{lastName}}

        </p>

        <!--HTML5 允许扩展的（自制的）属性，以 data- 开头。

        AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。-->

        <p data-ng-init="firstName='Jack'">

            姓名:<span data-ng-bind="firstName"></span>

        </p>

    </div>

    <div>

        <!--AngularJS 模块（Module） 定义了 AngularJS 应用。

        AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

        ng-app指令定义了应用, ng-controller 定义了控制器。-->

        <div ng-controller="myController">

            名: <input type="text" ng-model="firstName"><br>

            姓: <input type="text" ng-model="lastName"><br>

            <br>

            姓名: {{firstName + " " + lastName}}

        </div>

        <!--AngularJS 对象就像 JavaScript 对象-->

        <div ng-init="person={firstName:'Jack',lastName:'han'}">

            <p>姓名:{{person.firstName}} {{person.lastName}}</p>

        </div>

    </div>

    <div>

        <!--ng-repeat 指令会重复一个 HTML 元素：-->

        <div ng-init="names=['Jack','Peter','Lily']">

            <ul>

                <li ng-repeat="name in names">

                    {{name}}

                </li>

            </ul>

        </div>

        <!--ng-repeat 指令用在一个对象数组上：-->

        <div ng-init="persons=[{name:'Jack',age:18},{name:'Peter',age:19},{name:'Lily',age:15}]">

            <ul>

                <li ng-repeat="person in persons">

                    {{person.name+","+person.age}}

                </li>

            </ul>

        </div>

        <!-- 指令: my-directive --> <!--创建自定义的指令-->

        <!--你可以使用 .directive 函数来添加自定义的指令。

        要调用自定义指令，HTMl 元素上需要添加自定义指令名。

        使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive:

        你可以通过以下方式来调用指令：-->

        <!--元素名-->

        <my-directive></my-directive>

        <!--属性-->

        <div my-directive></div> <!--推荐使用-->

        <!--类名-->

        <div class="my-directive"></div>

        <!--注意： 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。

        注释

        注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。

        注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。-->

    </div>

    <div>

        <!--验证用户输入-->

        <form name="myForm" ng-init="myText='aa@qq.com'">

            Email:

            <input type="email" name="myEmail" ng-model="text" />

            <span ng-show="myForm.myEmail.$error.email">不是一个合法的邮箱地址</span>

            <!--应用状态-->

            <!--ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):-->

            <input type="email" name="myEmail1" ng-model="myText" required />

            <h1>状态</h1>

            {{myForm.myEmail1.$valid}}(如果输入的值是合法的则为 true)

            {{myForm.myEmail1.$dirty}}(如果值改变则为 true)。

            {{myForm.myEmail1.$touched}}(如果通过触屏点击则为 true)

            <!--ng-model 指令基于它们的状态为 HTML 元素提供了 CSS样式：

            input.ng-invalid {

            background-color: lightblue;

            }

            ng-model 指令根据表单域的状态添加/移除以下 CSS样式：

            ng-empty

            ng-not-empty

            ng-touched

            ng-untouched

            ng-valid

            ng-invalid

            ng-dirty

            ng-pending

            ng-pristine

            根作用域

            所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

            $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。-->

            <span>{{rootName}}</span>

        </form>

    </div>

    <div>

        AngularJS 过滤器

        AngularJS 过滤器可用于转换数据：

        过滤器 描述

        currency 格式化数字为货币格式。

        filter 从数组项中选择一个子集。

        lowercase 格式化字符串为小写。

        orderBy 根据某个表达式排列数组。orderBy:'age' 升序 orderBy:'-age' 降序

        uppercase 格式化字符串为大写。

        <div ng-init="lastName='abcd';firstName='ABCD';price=9.99;persons=[{name:'Jack',age:18},{name:'Peter',age:19},{name:'Lily',age:15}];">

            {{lastName | uppercase}}

            {{firstName | lowercase}}

            {{price | currency}}

            <ul>

                <li ng-repeat="person in persons | orderBy:'-age'">

                    {{person.name+","+person.age}}

                </li>

            </ul>

            <p>

                <input type="text" ng-model="search" />

            </p>

            <ul>

                <li ng-repeat="person in persons | filter:search | orderBy:'-age'">

                    {{person.name+","+person.age}}

                </li>

            </ul>

        </div>

    </div>

    <div>

        AngularJS $http

        AngularJS $http 是一个用于读取web服务器上数据的服务。

        $http.get(url) 是用于读取服务器数据的函数。

        <div ng-controller="myHttpController">

            <ul>

                <li ng-repeat="person in persons">

                    序号：{{$index+1}} {{person.name+","+person.sex}}

                    <span ng-if="$odd">偶数</span>

                    <span ng-if="$even">奇数</span>

                </li>

            </ul>

        </div>

    </div>

<div>

    <div ng-init="enable=true;">

        <input type="button" value="点击" ng-disabled="!enable"/>

        <input type="checkbox" ng-model="enable"/>启用

    </div>

    <div>

        <p ng-show="true">我是可见的。</p>

        <p ng-show="false">我是不可见的。</p>

        <p ng-hide="true">我是不可见的。</p>

        <p ng-hide="false">我是可见的。</p>

    </div>

</div>

<div>

    <div ng-controller="myFormController">

        <form novalidate="" name="myValidForm">

            FirstName:<input type="text" ng-model="user.firstName" />

            <br/>

            LastName:<input type="text" ng-model="user.lastName"/><br/>

            Email:<input type="email" ng-model="user.email"/><br/>

            <input type="button" ng-click="submit()" value="提交"/>

        </form>

        <p>form = {{user}}</p>

        <p>master ={{master}}</p>

    </div>

</div>

<script src="../Scripts/angular.min.js"></script>

    <script>

        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope, $rootScope) {

            $scope.firstName = "peter";

            $scope.lastName = "han";

            $rootScope.rootName = "rootName";

        });

        app.directive("myDirective", function () {

            return {

                restrict: "AECM", //你可以限制你的指令只能通过特定的方式来调用。

                template: "<h1>我自定义的指令</h1>",

                replace: true

            };

        });

        //通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

        //restrict 值可以是以下几种:

        //E 只限元素名使用

        //A 只限属性使用

        //C 只限类名使用

        //M 只限注释使用

        //restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

        app.controller("myHttpController", function($scope, $http) {

            $http.jsonp("http://w3.open.yunshouyi.net/test/index?callback=JSON_CALLBACK").success(function(data) {

                $scope.persons = data.result; //{result:[{"name":"chopper","sex":"man"},{"name":"jack","sex":"man"}]}

                console.log($scope.persons);

            });

        });

        app.controller("myFormController", function($scope) {

            $scope.master = { firstName: "John", lastName: "Doe",email:"aa@qq.com" };

            $scope.submit = function() {

                $scope.user = angular.copy($scope.master);

            };

            $scope.submit();

        });

    </script>

</body>

</html>

AngularJs学习的更多相关文章

  1. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  2. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  3. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  4. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  5. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  6. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  7. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  8. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  9. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  10. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

随机推荐

  1. Android Auto开发之一《开始学习Auto 》

    共同学习,共同进步, 转载请注明出处.欢迎微信交流:sfssqs,申请注明"Android Car"字样 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...

  2. IOS-Hybrid（混合开发）

    http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...

  3. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  4. Excel—如何解决数组求和运算时行列不匹配产生的错误

    1.如下所示: 使用SUM对两个数组A1:B2,C1:E3进行运算时,由于行列不匹配返回了错误值. 2.可通过使用IFERROR进行解决. 对判断生成的错误值,通过用0替代进行解决. 3.除以上外,由 ...

  5. ASP.NET是否存在客户端控件?

    在很久很久以前,传说...在ASP.NET开发中,使用服务端控件,比客户端控件更加损耗性能... 那么ASP.NET中是否有客户端控件呢? 有些人就说了,打开VS,然后在左边,工具箱里,有个HTML部 ...

  6. vim的编译安装及其插件YouCompleteMe安装

    相关的环境: win 7 x64 vs2013 community python 2.7.10 AMD64 python 3.5 AMD64 LLVM 3.5 cmake 3.5   YouCompl ...

  7. 如何配置IIS处理多并发请求及存在的问题

    很多时候多线程能快速高效独立的计算数据,应用比较多. 但今天遇到的多进程下的问题更是让人觉得复杂 多进程下static变量都要失效,就目前的平台和产品static使用是很多的,各种session.ca ...

  8. iOS小知识：使UIButton中的图片和文字实现左对齐

    UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定,所以如果要几个这样有image有title的按钮纵向排列对 ...

  9. Ajax中get请求和post请求

    我们在使用Ajax向服务器发送数据时,可以采用Get方式请求服务器,也可以使用Post方式请求服务器,那么什么时候该采用Get方式,什么时候该采用Post方式呢? Get请求和Post请求的区别: 1 ...

  10. xml编辑器

    cstring转cha型方法在mfc中用过可行 int CstringToch(CString str, char *ch) { assert(ch); memset(ch, 0, sizeof(ch ...