Angular.js框架

最新推荐文章于 2024-07-11 15:59:35 发布

彭于晏爱编程

最新推荐文章于 2024-07-11 15:59:35 发布

阅读量2.6k

点赞数 1

分类专栏： AngularJS 文章标签： angular.js mvc 前端

本文链接：https://blog.csdn.net/m0_59708269/article/details/125089432

版权

本文深入探讨Angular.js框架，从入门笔记开始，逐步解析四个重要概念、四个关键对象及三种页面语法。通过jQuery实现，展示首个Angular程序，并重点讲解双向数据绑定和依赖注入机制。此外，还详细阐述了作用域、控制器、模块的功能，以及一系列常用指令的应用，是Angular初学者的实用教程。

摘要由CSDN通过智能技术生成

Angular.js

一.angularjs入门笔记

1. AngularJS是什么?
	* Google开源的 前端JS 结构化 框架
	* 动态展示页面数据, 并与用户进行交互
	* AngularJS特性(优点)
		* 双向数据绑定
		* 声明式依赖注入
		* 解耦应用逻辑, 数据模型和视图
		* 完善的页面指令
		* 定制表单验证
		* Ajax封装
2. HelloWorld
	* 导入angular.js, 并在页面中引入
	* 在<html><body>中ng-app指令
	* 定义ng-model='xxx'/{
   {
   xxx}}

二.四个重要概念

1. **双向数据绑定**
	* View（视图）： 页面（标签、指令，表达式）
	* Model(模型) ：作用域对象（属性、方法）
	* 数据绑定： 数据从一个位置自动流向另一个位置
		* View-->Model
		* Model-->View
	* 单向数据绑定： 只支持一个方向
		* View-->Model  ： ng-init
		* Model-->View  : {
   {
   name}}
	* 双向数据绑定
		* Model<-->View  : ng-model
	* angular是支持双向数据绑定的
2. **依赖注入**
	* 依赖的对象被别人(调用者)自动注入进入
	* 注入的方式;
		* 内部自建：不动态 
		* 全局变量：污染全局环境
		* 形参：这种最好
	* angualr就是通过声明式依赖注入， 来得到作用域对象 
	* 形参名不能随便定义（只是针对当前这种写法）
3. ** MVC模式**
  * **M: Model, 即模型**, 在angular中: 
    * 为scope
    * 储存数据的容器
    * 提供操作数据的方法
  * **V: View, 即视图**, 在angular中:
    * 为页面
    * 包括: html/css/directive/expression
    * 显示Model的数据
    * 将数据同步到Model
    * 与用户交互
  * **C: Controller, 即控制器**, 在angular中:
    * 为angular的Controller
    * 初始化Model数据
    * 为Model添加行为方法
4. **MVVM模式**
  * M: Model, 即数据模型, 在angular中:
    * 为scope中的各个数据对象
  * V: View, 即视图, 在angular中:
    * 为页面
  * VM: ViewModel, 即视图模型, 在angular中:
    * 为scope对象
  * 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层

三.四个重要对象

1. **作用域**
	* 是一个js实例对象
	* 这个对象的属性、方法， 页面都可以直接引用、操作
	* ng-app指令： 内部创建一个根作用域（$rootScope）, 是所有其它作用域的父对象
2. **控制器**
	* 也是一个对象，是我们View与Model之间的桥梁
	* 当我们使用了ng-controller指令， 内部就会创建控制器对象
	* 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）
	* 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象。
3. **模块**
	* 也是一个对象
	* 创建模块对象： angular.module('模块名', [依赖的模块])
	* 通过模块添加控制器：
	    * module.controller('MyController', function($scope){
   //操作$scope的语句})
	* angular的整体设计也是多模块的
		* 核心模块： angular.js
		* 扩展模块： angular-router.js, angular-message.js, angular-animate.js

四.三个页面语法

1. **表达式**
	* {
   {
   js表达式}}
	* 从作用域对象中读取对应的属性数据来显示数据
	* 不支持if/for/while
	* 支持三目表达式
2. **指令**
	* 什么指令 ： 自定义标签属性/标签
	* 常用的指令：
		* ng-app: 指定模块名，angular管理的区域
		* ng-model： 双向绑定，输入相关标签
		* ng-init： 初始化数据
		* ng-click： 调用作用域对象的方法（点击时）
		  可以传$event
		* ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
		* ng-bind： 解决使用{
   {
   }}显示数据闪屏（在很短时间内显示{
   {
   }}）
		* ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
			* $index, $first, $last, $middle, $odd, $even
		* ng-show: 布尔类型， 如果为true才显示
		* ng-hide: 布尔类型， 如果为true就隐藏
		* ng-class: 动态引用定义的样式  {
   aClass:true, bClass:false}
    * ng-style: 动态引用通过js指定的样式对象   {
   color:'red', background:'blue'}
    * ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
    * ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
3. **过滤器**
	* 作用: 在显示数据时可以对数据进行格式化或过滤
		* 单个--->格式化（将别的类型的数据转换为特定格式的字符串）
		* 多个----》格式化/过滤
		* 不会真正改变被操作数据
	* {
   {
   express | 过滤器名：补充说明}}
	* 常用过滤器：
		* currency 货币格式化(文本)
		* number数值格式化(文本)
		* date 将日期对象格式化(文本)
		* json: 将js对象格式化为json(文本)
		* lowercase : 将字符串格式化为全小写(文本)
		* uppercase : 将字符串格式化全大写(文本)

		* limitTo 从一个数组或字符串中过滤出一个新的数组或字符串
			* limitTo : 3  limitTo : -3
		* orderBy : 根据指定作用域属性对数组进行排序
			* {
   {
   [2,1,4,3] | orderBy}}  升序
			* {
   {
   [2,1,4,3] | orderBy：‘-’}}  降序
			* {
   {
   [{
   id:2,price:3}, {
   id:1, price:4}] | orderBy:'id'}  id升序
			* {
   {
   [{
   id:2,price:3}, {
   id:1, price:4}] | orderBy:'-price'} price降序
		* filter : 从数组中过滤返回一个新数组
			* {
   {
   [{
   id:22,price:35}, {
   id:23, price:45}] | filter:{
   id:'3'}} //根据id过滤
			* {
   {
   [{
   id:22,price:35}, {
   id:23, price:45}] | filter:{
   $:'3'}} //根据所有字段过滤

五.jQuery实现

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<input type="text" id="name">
<p>您输入的内容是：<span id="contentSpan"></span></p>

<script type="text/javascript" src="../../js/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript">
  $(function () {
   
      $('#name').keyup(function () {
   
          var name = this.value;
          $('#contentSpan').html(name);
      })
  })
</script>
</body>
</html>