Angular 简介
什么是 AngularJS
- 一款非常优秀的前端高级 JS 框架
- 最早由 Misko Hevery 等人创建
- 2009 年被 Google 公式收购，用于其多款产品
- 目前有一个全职的开发团队继续开发和维护这个库
- 有了这一类框架就可以轻松构建 SPA 应用程序
- 轻松构建 SPA（单一页面应用程序）
- 单一页面应用程序：
- 只有一个页面（整个应用的一个载体）
- 内容全部是由AJAX方式呈现出啦的
- 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。
为什么使用 AngularJS
- 更少的代码，实现更强劲的功能
- 将一些以前在后台开发中使用的思想带入前端开发
- 带领当前市面上的框架走向模式化或者架构化
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 的包
- 使用 CDN 上的 Angular.js
- 使用 Bower 安装
bower install angular - 使用 NPM 安装
npm install angular - 每种方式安装包，本质都是将angular的库下载到当前文件夹中
简单示例
<!--
所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
ng-app是ng的入口，表示当前元素的所有指令都会被angular管理（对每一个指令进行分析和操作）
-->
<div ng-app ng-init="user.name='world'">
<h1>使用NG实现双边数据绑定</h1>
<input type="text"
placeholder="请输入你的姓名"
ng-model="user.name">
<p>hello <strong>{{user.name}}</strong></p>
</div>
-
angular中最重要的概念是指令（directive）
-
ng-model 是双向数据绑定的指令，效果就是将当前元素的value属性和模型中的user.name建立绑定关系
分析 Angular 示例
<body>
<div ng-app="myApp" ng-controller="DemoController">
<h1>使用NG实现双边数据绑定</h1>
<input type="text" placeholder="请输入你的姓名" ng-model="user.name">
<p>hello <strong>{{user.name}}</strong></p>
<input type="button" ng-click="show()">
</div>
<script src="bower_components/angular/angular.js"></script>
<script>
// 注册模块 通过module函数，
// 第一个参数是这个模块的名字
// !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数，如果没有传递第二个参数，angular.module就不是创建一个模块
// angular.module 返回 刚刚创建的模块对象
var app= angular.module('myApp',[]);
// app.controller 方法用于创建一个控制器，所创建的控制器属于myApp模块
// app.controller('DemoController');
// 控制器函数的参数中有一个$scope
// angular.module('myApp').controller('DemoController', function($scope) {
// // 当控制器执行时会自动执行的函数
// $scope.user = {};
// $scope.user.name = '张三';
// // $scope不仅仅可以往视图中暴露数据，还可以暴露行为
// $scope.show = function() {
// console.log($scope.user);
// };
// });
// 由于压缩代码会改变参数名称，注册控制的标准方式就是通过第二个参数传递数组的方式（数组的成员最后一个就是原本的控制器函数，前面的成员都是需要注入的对象名称）
app.controller('DemoController', ['$scope','$http', function(a,b) {
// 官方的API中提供了一个$scope.$watch方法，
a.$watch('user.name', function(now, old) {
// 当user.name发生变化时触发这个函数
// console.log('now is ' + now);
// console.log('old is ' + old);
});
}]);
</script>
</body>
Angular 基础概念
MVC 思想
什么是 MVC 思想
- 将应用程序的组成划分为三个部分：Model View Controller
- 控制器的作用就是初始化模型用的；
- 模型就是用于存储数据的;
- 视图用于展现数据
- 登陆案例:
- 模型
- 我们数据库中所有用户的信息
- 接受控制器传来的用户名和密码进行校验的业务逻辑并返回true/false
- 控制器
- 接受用户在界面上填写的用户名和密码
- 将用户名和密码交给模型
- 视图
- 给用户呈现一个表单
- 接受用户输入内容，并将其提交给控制器
- 根据控制器返回的数据，响应用户页面
模块（Module）
- 划分应用程序结构
- 我们可以通过angular.module创建一个模块
- angular.module方法传递两个参数才是创建模块，一个参数是获取模块
控制器（Controller）
- 控制器的三种主要职责：
- 为应用中的模型设置初始状态
- 通过$scope对象把数据模型或函数行为暴露给视图
- 监视模型的变化，做出相应的动作
视图模型（$scope）
- 视图和控制器之间的桥梁
- 用于在视图和控制器之间传递数据
- 利用$scope暴露数据模型（数据，行为）
表达式（Expression）
- 作用：
- 使用 表达式 把数据绑定到 HTML。
- 语法：
- 表达式写在双大括号内：{{ expression }}。
- 比较：
- 表达式作用类似于ng-bind指令
- 建议更多的使用指令
- 数字 {{ 100 + 100 }}
- 字符串 {{ 'hello' + 'angular' }}
- 对象 {{ zhangsan.name }}
- 数组 {{ students[10] }}
- 注意：
- AngularJS 表达式可以写在 HTML 中。
- AngularJS 表达式不支持条件判断，循环及异常。
- AngularJS 表达式支持过滤器。
网友评论