AngularJS 基础教程一：

一：了解AngularJS

　　AngularJS是一款非常优秀的前端高级 JS 框架，由 Misko Hevery 等人创建 2009 年被 Google 收购，用于其多款产品有一个全职的开发团队继续开发和维护这个库有了这一类框架就可以轻松构建 SPA 应用程序 single page web application 通过指令扩展了 HTML，通过表达式绑定数据到 HTML。

二：AngularJS的优势

　　1.更少的代码，实现更强劲的功能

　　2.带领前端进入MVC时代

　　（mvc模式：Model（模型）是应用程序的核心，指的是程序在数据库中存储数据。

　　　　　　　　 View（视图）是应用的界面，将数据库里的数据展现出来，展现给程序的使用者。

　　　　　　　　 Controller（控制器）处理用户的交互行为，程序使用者更改数据，由控制器接受并发送给模型。）

三：AngularJS的特性

　　1.MVC

　　2.模块化

　　3.自动化双向数据绑定使用{{ }}对动态数据绑定，绑定到元素的innerHTML

　　4.指令系统 ng-

　　5.表单验证

　　6.HTML组件化

　　7.Angular 在构建增加、查询、修改、删除的页面应用时能发挥最大优势。CRUD

四：AngularJS语法特点

　　1.Angular 最大程度的减少了页面上的 DOM 操作；

　　2.让 JavaScript 中专注业务逻辑的代码；

　　3.通过简单的指令结合页面结构与逻辑数据；

　　4.通过自定义指令实现组件化编程；

　　5.代码结构更合理；

　　6.维护成本更低；

　　7.Angular 解放了传统 JavaScript 中频繁的 DOM 操作

五：AngularJS的用法

　　1.编写第一个Angular应用

　　当网页加载完毕，AngularJS 自动开始执行； HTML 页面中 ng-xxx 的属性称之为指令（Directive）； ng-app 指令告诉 AngularJS，<html> 元素是 AngularJS 应用程序管理的边界； {{ }} 双花括号里面的叫做数据绑定表达式，可以是任何有效的JavaScript值、变量或语句。而在页面上显示的是表达式计算后的结果值。 | 管道符号可以给表达式添加过滤器，如 | number:2， |currency

<html ng-app>
  <head></head>
  <body>
     {{"现在开始学习Angular"}}
  </body>
</html>

　　2.Module.controller() 控制器

　　　　第二行代码创建了一个名为userCtrl的控制器，以及一个控制器函数控制器函数接受一个名为$scope的参数

var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例
app.controller(“userCtrl” ,function($scope){  //userCtrl是控制器的名字
	$scope.name= “赵敏”; //$scope用来保存数据，定义方法
});

　　3.ng-指令用法

　　（1）ng-model

　　　　ng-model 指令把文本框的值绑定到变量 name 上； {{ name }} 表达式就是把应用程序变量 name 绑定到某个dom元素的innerHTML

例：请输入你的名字：<input type="text" id="username" ng-model="name"> 你的名字是： <span>{{name}}</span>

　　（2）ng-bind指令

　　　　ng-bind 指令将指定变量或表达式的值显示在元素的innerHTML 如果给定的变量或表达式修改了，指定元素的 innerHTML 也会修改。

例： <input type="text" ng-model="text"> --将文本框的值绑定到text变量你输入的值是:

　　<span ng-bind="text"></span> --动态显示text变量的值

　　（3）ng-init 指令

　　　　初始化应用时创建一个变量，并给变量赋值 ng-init 执行给定的表达式建议用controller代替

例： <div ng-app="" ng-init="myText='Hello World!'">

　　 <h1>{{myText}}</h1>

　　（4）ng-click指令

　　　　Angular的点击事件处理器，给元素通过click事件绑定$scope对象的方法

例： <input type="text" ng-model="text"> <button ng-click="show()">显示输入值</button>

　　　　　　　　$scope.show = function(){ alert("您输入的内容是：" + $scope.text); }

　　（5）ng-repeat 指令

　　根据绑定数组成员的数量，复制被绑定的元素在ng-repeat指令复制元素的过程中，还提供了几个专有变量：

　　 $index 返回当前对象或属性的下标

　　 $first 当前对象为集合中的第一个对象时返回true

　　$last 当前对象为集合中的最后一个对象时返回true

　　$middle 当前对象既不是集合中第一个对象又不是最后一个对象返回true

　　$even 集合中的偶数编号返回true

　　 $odd 集合中的奇数编号返回true ng-repeat-startng-repeat-end 重复生成多个顶层元素

　　（6）ng-class 指令

　　给元素添加CSS类:不能直接添加类名，需通过以下三种方式添加：

　　1. 直接绑定值为CSS类名的$scope对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body ng-app="myApp">
<div ng-controller="listController">
    <span ng-class="red1">曹总</span>
</div>

<script src="../../script/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("listController", function($scope) {
        $scope.red1='red';
    });
</script>
</body>
</html>

　　2. 以字符串数组方式选择性添加CSS类表达式 ? ‘style1’:‘style2’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .style1 {
            height: 200px;
            width: 200px;
            background: salmon;
        }

        .style2 {
            background: violet;
        }
    </style>
</head>
<body>
<div ng-app ng-init="data={style1:true,style2:false}">
    <!--ng-class指令会根据设置对象的情况决定是否添加某些class类名-->
    <div ng-class="{style1:data.style1,style2:data.style2}"></div>
    <!--<div ng-class="style1:true,style2:false"></div>-->
    <input type="button" value="变化颜色" ng-click="data.style2 = !data.style2">
</div>
<script src="../../script/angular.min.js"></script>
    <script>
        var data = {
            style1:true,
            style2:false
        }
    </script>
</body>
</html>

　　3. 通过key/value对象的方式添加多个CSS类 ng-class=”{style1:true,style2:false}”o.startsWith(‘D’); indexOf() contains() ng-class-odd 绑定奇数行样式 ng-class-even 绑定偶数行样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <style>
        .red {
            color: red;
        }
        .green {
            color: greenyellow;
        }
    </style>
</head>
<body ng-app="myApp">
<div ng-controller="listController">
    <ul>
        <li ng-repeat = "item in datas" ng-class="{red:item.startsWith('张')">{{ item }}
        </li>
    </ul>
</div>

<script src="../../script/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("listController", function($scope) {
        $scope.datas = ["张三","李四","王五","赵六","张"];
    });
</script>
</body>
</html>

　　 （7）ng-style 指令

　　　　ng-style 指令为 HTML 元素添加 style 属性。 ng-style 属性值必须是对象，表达式返回的也是对象对象由 CSS 属性和值注册，即 key：value 。

　　　　ng-style=” {color: 'white'}”

　 （8）ng-show/ng-hide指令

　　　　ng-show 值为true或flase 显示或隐藏元素 ng-hide 值为true或flase 隐藏或显示元素

　 （9）ng-if指令

　　　　从DOM中添加和移除元素 ng-if=”true”时保留元素 ng-if=“false”时移除元素

　　（10）ng-swich指令

　　　　ng-switch-when =“” 值为指定value值的时候显示元素

　　　 ng-switch-default 没有匹配的value值时显示元素

　　（11）ng-link/ng-src指令

　　　　绑定元素的link或src地址 <img ng-src="{{item.url}}"> AngularJS 设置图片地址的指令：ng-src AngularJS 代码执行前不显示图片。

　　（12）ng-include指令

　　　　该指令从服务器获取一段HTML片段，编译并处理该片段中包含的任何angular指令，并添加到DOM元素中。

　　　　<ng-include src=" 'a.html' " ></ng-include>

　　　　src: 指定要加载内容的URL src的值必须为表达式 onload: 指定一个在内容被加载时调用的表达式 autoscroll:指定内容在加载时是否滚动到这部分视图所在的区域

　　（13）ng-cloak指令

　　　　使用一个CSS样式隐藏内联绑定表达式，(在文档第一次加载会短暂可见)。 ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。 AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生。该指令没有参数。

　　4.Module.directive自定义指令

　　指令是Angular最强大的特性，通过指令能扩展并增强HTML。当内置指令无法满足需求时，可以创建自定义指令。自定义指令是通过Module.directive方法创建的。 Module.directive() 方法接受两个参数，第一个是指令名，第二个是函数。该函数用return语句返回另一个指令函数，使用该自定义指令，Angular就会调用这个函数。指令函数接受三个参数，第一个scope，用于检查在视图中可用的数据。第二个参数element是一个jqLite对象，jqLite是Angular提供一个剪裁版本的jQuery 第三个参数是attrs。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <script src="../../script/angular.min.js"></script>
    <script>
        var m= angular.module("my", [])
        m.controller("ctr1", function ($scope) {
            $scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            $scope.today = $scope.dayNames[new Date().getDay()];
            //getDay星期是从0开始的，星期日的下标是0
        });
        m.controller("ctr2", function ($scope) {
            $scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            $scope.tommorrow = $scope.dayNames[(new Date().getDay() + 1) % 7];
        });
        m.directive('highlight', function () {
            return function (scope,element,attrs) {
                if(scope.today == attrs['highlight']){
                    element.css("color",'red');
                }else{
                    element.css("color",'green')
                }
            }
        })
    </script>
</head>
<body ng-app="my">
<div class="container">
    <h2>今天是星期几？</h2>
    <p ng-controller="ctr1" highlight="星期二">今天是{{ today }}</p>
    <p ng-controller="ctr2" highlight="星期一">明天是{{ tommorrow }}</p>
</div>
</body>
</html>

posted @ 2016-08-31 20:08 caozong 阅读(5403) 评论(0) 编辑收藏举报

刷新页面返回顶部

caozong

AngularJS 基础教程一：

公告