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， 元素是 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
例： 请输入你的名字： 你的名字是： {{name}}
（2）ng-bind指令
ng-bind 指令将指定变量或表达式的值显示在元素的innerHTML 如果给定的变量或表达式修改了，指定元素的 innerHTML 也会修改。
例： --将文本框的值绑定到text变量 你输入的值是:
--动态显示text变量的值
（3）ng-init 指令
初始化应用时创建一个变量，并给变量赋值 ng-init 执行给定的表达式 建议用controller代替
例：
{{myText}}
（4）ng-click指令
Angular的点击事件处理器，给元素通过click事件绑定$scope对象的方法
例：
$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对象属性
曹总</span>
</div>
3. 通过key/value对象的方式添加多个CSS类 ng-class=”{style1:true,style2:false}”o.startsWith(‘D’); indexOf() contains() ng-class-odd 绑定奇数行样式 ng-class-even 绑定偶数行样式。
- {{ item }} </li>
</ul>
</div>
今天是星期几？
今天是{{ today }}
明天是{{ tommorrow }}</p>
</div>
</body>
</html>
手机扫一扫
移动阅读更方便
你可能感兴趣的文章