AngularJS 基础教程一:
Posted caozong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 指令是为了防止该问题的发生。 该指令没有参数。
<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 基础教程一:的主要内容,如果未能解决你的问题,请参考以下文章