一：了解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 指令是为了防止该问题的发生。 该指令没有参数。

　　　　<span ng-cloak>{{ 表达式 }}</span>

　　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>

AngularJS 基础教程一：的更多相关文章

  1. NGUI系列教程一

    NGUI是Unity的一个插件,使用它来制作你的游戏UI必定将事半功倍.为什么这么说呢?首先我们说说GUI与NGUI的区别,GUI是Unity自带的绘制界面工具,它的成像原理是基于表层的,所以执行效率 ...

  2. CRL快速开发框架系列教程一(Code First数据表不需再关心)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  3. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  4. OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务

    OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务   1.  OpenVAS基础知识 OpenVAS(Open Vulnerability Assessment Sys ...

  5. Python基础教程之List对象 转

    Python基础教程之List对象 时间:2014-01-19    来源:服务器之家    投稿:root   1.PyListObject对象typedef struct {    PyObjec ...

  6. Python基础教程之udp和tcp协议介绍

    Python基础教程之udp和tcp协议介绍 UDP介绍 UDP --- 用户数据报协议,是一个无连接的简单的面向数据报的运输层协议.UDP不提供可靠性,它只是把应用程序传给IP层的数据报发送出去,但 ...

  7. Linux入门基础教程之Linux下软件安装

    Linux入门基础教程之Linux下软件安装 一.在线安装: sudo apt-get install 即可安装 如果在安装完后无法用Tab键补全命令,可以执行: source ~/.zshrc AP ...

  8. Quartz教程一：使用quartz

    原文链接 | 译文链接 | 翻译:nkcoder | 校对:方腾飞 本系列教程由quartz-2.2.x官方文档翻译.整理而来,希望给同样对quartz感兴趣的朋友一些参考和帮助,有任何不当或错误之处 ...

  9. RabbitMQ基础教程之Spring&JavaConfig使用篇

    RabbitMQ基础教程之Spring使用篇 相关博文,推荐查看: RabbitMq基础教程之安装与测试 RabbitMq基础教程之基本概念 RabbitMQ基础教程之基本使用篇 RabbitMQ基础 ...

随机推荐

  1. Ubuntu常用命令速查手册-珍藏版-完整版

    sudo apt-get install 软件名 安装软件命令 sudo nautilus 打开文件(有root权限) su root 切换到“root” ls 列出当前目录文件(不包括隐含文件) l ...

  2. 在Visual Studio 2013中编译libssh2项目

     一. 下载需要的外部包,并解压,下面给出的链接如果无法访问,就google搜索下载一下: •下载openssl •下载zlib 二.修改libssh2项目配置: 1.C/C++->Gene ...

  3. chrome加载本地js

    通过chrome的扩展功能,可以执行一些本地脚本. 1.如何添加扩展程序 具体做法是:chrome -> 设置 -> 扩展程序 -> 加载正在开发的扩展程序 图(1.1) 图(1.2 ...

  4. 用c++编写一个不能被继承的类（但是可以在类外部定义该类的对象）

    据我们知道,我们只要把类的构造函数和析构函数定义为private类型,那么就不能够在外部建立给类的对象,也就不能以给类为基类进行继承,因为如果继承,建立对象的时候将要调用基类的构造函数,但是因为为pr ...

  5. 转：TestLink1.9.3测试用例：Excel转换XML工具<二>实现代码

    TestLink1.9.3测试用例:Excel转换XML工具<二>实现代码 http://blog.csdn.net/candle806/article/details/7490599 以 ...

  6. [原创作品] javascript 实现的web分页器原理

    很久没有写博客了,因为最近忙于一些杂七杂八的事情.不过,互联网的价值在于信息共享,因为共享,所以互联网才能飞快发展.博主建了一个技术共享qq群:164858883,因为目前人数还比较少,活跃度还不是很 ...

  7. JMeter Building a Database Test Plan

    Building a Database Test Plan In this section, you will learn how to create a basic Test Planto test ...

  8. 分享几个社交类网站常用并且也是最好用的jquery类库

    官网都有详细的文档说明,大家自行百度谷歌哈! artZoom:常用于微博,支持图片放大缩小旋转 AutoComplete:自动完成 BackTop:当内容多时出现“返回顶部” CFUpload:批量上 ...

  9. [Angular 2] Injecting a Service

    Using Services in Angular 2 is very simple. This lesson covers how to create a simple class as a Ser ...

  10. OpenWrt sscanf问题之于MT7620N与AR9341

    在MT7620N平台做好了wifidog的相关调试工作,除了eth驱动.wireless性能问题,其余的都能够基本正常. 依据实际须要要对已完毕的工作在AR9341平台上实现. 事实上也简单.基本功能 ...