Web前端学习笔记——AngularJS入门
目录
什么是 AngularJS
为什么使用 AngularJS
AngularJS 的核心特性
相关链接
Angular 上手
安装 Angular
简单示例
案例解析
使用总结
Angular 基础概念
MVC 思想
模型
控制器
视图模型（$scope）
表达式（Expression）
对比 JavaScript 表达式
单向数据绑定
双向数据绑定
Angular 指令系统（Directive）
指令属性小提示
ng-app 指令
ng-bind指令
ng-bind-html指令
ng-repeat 指令
ng-class 指令
ng-show/ng-hide 指令
ng-cloak指令
ng-link/ng-src 指令
ng-switch指令
其他常用指令
自定义指令
todomvc-app-template案例
什么是 AngularJS
- 一款非常优秀的前端高级 JS 框架
- 最早由 Misko Hevery 等人创建
- 2009 年被 Google 公式收购，用于其多款产品
- 目前有一个全职的开发团队继续开发和维护这个库
- 有了这一类框架就可以轻松构建 SPA 应用程序
- 轻松构建 SPA（单一页面应用程序）
- 单一页面应用程序：
- 只有一个页面（整个应用的一个载体）
- 内容全部是由AJAX方式呈现出啦的
- 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。
为什么使用 AngularJS
- 更少的代码，实现更强劲的功能
- 将一些以前在后台开发中使用的思想带入前端开发
- 带领当前市面上的框架走向模式化或者架构化
以前我们是这样的：
以后将会是这样的：
传统方式实现加法运算
Angular实现加法运算
传统方式实现数据列表呈现
Angular实现数据列表呈现
AngularJS 的核心特性
- MVC
- 模块化
- 自动化双向数据绑定
- 指令系统
相关链接
- http://www.apjs.net/
- http://www.angularjs.cn/
- http://docs.angularjs.cn/api
- https://material.angularjs.org
- http://angular-ui.github.io/
Angular 上手
安装 Angular
- 下载 Angular.js 的包
- https://github.com/angular/angular.js/releases
- 使用 CDN 上的 Angular.js
- http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js
- 使用 Bower 安装
bash bower install angular - 使用 NPM 安装
bash npm install angular - 每种方式安装包，本质都是将angular的库下载到当前文件夹中
简单示例
Hello world
第一个AngularJS示例
在输入框中尝试输入：
姓名：
{{name}}
案例解析
- 当网页加载完毕，AngularJS 自动开始执行；
- HTML 页面中 ng-xxx 的属性称之为指令（Directive）；
- ng-app 指令告诉 AngularJS，元素是 AngularJS 应用程序管理的边界；
- ng-model 指令把文本框的值绑定到变量 name 上；
- {{ name }} 表达式就是把应用程序变量 name 绑定到某个段落的 innerHTML。
使用总结
- Angular 最大程度的减少了页面上的 DOM 操作；
- 让 JavaScript 中专注业务逻辑的代码；
- 通过简单的指令结合页面结构与逻辑数据；
- 通过自定义指令实现组件化编程；
- 代码结构更合理；
- 维护成本更低；
- Angular 解放了传统 JavaScript 中频繁的 DOM 操作
Angular Hello world 使用NG实现双边数据绑定
hello {{user.name}}
Angular 基础概念
MVC 思想
什么是 MVC 思想
- MVC 是一种应用程序的开发思想，不是设计模式
- 主要目的是为了解决应用程序展示结构，业务逻辑之间的紧耦合关系
- 使应用程序的组成分为三个部件，每个部件有自己明确的职责，相互之间没有依赖
- 将应用程序的组成划分为三个部分：Model View Controller
- 控制器的作用就是初始化模型用的；
- 模型就是用于存储数据的
-
视图用于展现数据
模型
-
AngularJS很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分
// 创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖那些模块 var myApp = angular.module("MyApp", []);- 也可以将重复使用的指令或过滤器之类的做成模块便于复用
- 注意必须指定第二个参数，否则变成找到已经定义的模块
Angular 模块 使用NG实现双边数据绑定
hello {{user.name}}
控制器
-
调度逻辑的集合
angular.module('OneApp', []) .controller('HelloController', [ '$scope', function($scope) { $scope.p = { name: 'zhangsan' }; } ]);- 控制器的三种主要职责：
- –为应用中的模型设置初始状态
- –通过$scope对象把数据模型或函数行为暴露给视图
- –监视模型的变化，做出相应的动作
// 监视购物车内容变化，计算最新结果 $scope.$watch(‘totalCart’, calculateDiscount);Angular Controller 用户名 密码 {{message}} 视图模型（$scope）
- 视图和控制器之间的桥梁
- 用于在视图和控制器之间传递数据
- 利用$scope暴露数据模型（数据，行为）
表达式（Expression）
- 作用：
- –使用 表达式 把数据绑定到 HTML。
- 语法：
- –表达式写在双大括号内：{{ expression }}。
- 比较：
- –表达式作用类似于ng-bind指令
- –建议更多的使用指令
- AngularJS表达式很像JavaScript表达式
- 它们可以包含文字、运算符和变量
- 如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }}
- 数字 {{ 100 + 100 }}
- 字符串 {{ 'hello' + 'angular' }}
- 对象 {{ zhangsan.name }}
- 数组 {{ students[10] }}
Angular 表达式 {{ true ? 'true':'false' }}对比 JavaScript 表达式
- 相同点：
- –AngularJS 表达式可以包含字母，操作符，变量。
- 不同点：
- –AngularJS 表达式可以写在 HTML 中。
- –AngularJS 表达式不支持条件判断，循环及异常。
- –AngularJS 表达式支持过滤器。
单向数据绑定
•模型变化过后，自动同步到界面上；
•一般纯展示型的数据会用到单项数据绑定；
•使用表达式的方式都是单向的
双向数据绑定
•两个方向的数据自动同步：
•模型发生变化自动同步到视图上；
•视图上的数据发生变化过后自动同步到模型上；
Angular 指令系统（Directive）
- AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集
- 在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行
- 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
- 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作
指令属性小提示
- HTML5 允许扩展的（自制的）属性，以 data- 开头。
- AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
- 二者效果相同。
ng-app 指令
- ng-app指令用来标明一个AngularJS应用程序
- 标记在一个AngularJS的作用范围的根对象上
- 系统执行时会自动的执行根对象范围内的其他指令
- 可以在同一个页面创建多个ng-app节点
ng-app 指令 ng-app 指令 ng-bind指令
ng-bind 指令 ng-bind-html指令
ng-bind-html 指令 ng-repeat 指令
- ng-repeat指令用来编译一个数组重复创建当前元素，如
ng-repeat 指令 - {{$first?'开始':''}} {{item.name}} {{item.age}} {{$last?'没有了':''}}
ng-class 指令
- ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名
ng-repeat 指令 - {{item.name}} {{item.age}}
ng-repeat 指令 ng-repeat 指令 - {{name}}
ng-show/ng-hide 指令
- ng-show/ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素
ng-class 指令 aaaaaaaaaaaaaaloading...ng-cloak指令
ng-cloak 指令 {{'hello angular'}}- ng-if是指是否存在DOM元素
ng-link/ng-src 指令
- ng-link/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG，如
ng-src 跳转到图片
ng-switch指令
ng-switch 指令 你选择的是1你选择的是2你选择的是3你什么都没选其他常用指令
- ng-model
- ng-class
- ng-show/ng-hide/ng-if
- ng-click
- ng-link/ng-src
ng-xxx 其他指令 全选/取消全选
- 选项01
- 选项02
- 选项03
- 选项04
- 选项05
自定义指令
- AngularJS中可以通过代码自定义指令：
myModule.directive('hello', function() { return { restrict: 'E', template: 'Hello world
', replace: true }; }); myApp.directive("ngHover", function() { return function(scope, element, attrs) { element.bind("mouseenter", function() { element.css("background", "yellow"); }); element.bind("mouseleave", function() { element.css("background", "none"); }); } });Document Document 封装一个面包屑导航 todomvc-app-template案例
Template • TodoMVC todos
<--!app.js--> (function(angular) { 'use strict'; /** * MyTodoMvc Module * * 应用程序的主要的模块 */ var myApp = angular.module('MyTodoMvc', []); // 注册一个主要的控制器 myApp.controller('MainController', ['$scope', function($scope) { // [1,2,3,4,5] function getId() { var id = Math.random(); // 1 2 for (var i = 0; i < $scope.todos.length; i++) { if ($scope.todos[i].id === id) { id = getId(); break; } } return id; } // 文本框需要一个模型 $scope.text = ''; // 任务列表也需要一个 // 每一个任务的结构 { id: 1, text: '学习', completed: true } $scope.todos = [{ id: 0.123, text: '学习', completed: false }, { id: 0.22, text: '睡觉', completed: false }, { id: 0.232, text: '打豆豆', completed: true }, ]; // 添加todo $scope.add = function() { if(!$scope.text){ return; } $scope.todos.push({ // 自动增长？ id: getId(), // 由于$scope.text是双向绑定的，add同时肯定可以同他拿到界面上的输入 text: $scope.text, completed: false }); // 清空文本框 $scope.text = ''; }; // 处理删除 $scope.remove = function(id) { // 删除谁 for (var i = 0; i < $scope.todos.length; i++) { if ($scope.todos[i].id === id) { $scope.todos.splice(i, 1); break; } } // $scope.todos }; // 清空已完成 $scope.clear = function() { var result = []; for (var i = 0; i < $scope.todos.length; i++) { if (!$scope.todos[i].completed) { result.push($scope.todos[i]); } } $scope.todos = result; }; // 是否有已经完成的 $scope.existCompleted = function() { // 该函数一定要有返回值 for (var i = 0; i < $scope.todos.length; i++) { if ($scope.todos[i].completed) { return true; } } return false; }; // 当前编辑哪个元素 $scope.currentEditingId = -1; $scope.editing = function(id) { $scope.currentEditingId = id; }; $scope.save = function() { $scope.currentEditingId = -1; }; // $scope.checkall = false; // $scope.$watch('checkall', function(now, old) { // for (var i = 0; i < $scope.todos.length; i++) { // $scope.todos[i].completed = now; // } // }); var now = true; $scope.toggleAll = function() { for (var i = 0; i < $scope.todos.length; i++) { $scope.todos[i].completed = now; } now = !now; } }]); })(angular);