##Angular

最新推荐文章于 2023-11-12 18:01:21 发布

慢腾腾的急性子

最新推荐文章于 2023-11-12 18:01:21 发布

阅读量731

点赞数

分类专栏： angularjs 文章标签： angular

本文链接：https://blog.csdn.net/yujie0716006/article/details/77321539

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Angular

基础：

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

单页面应用(SPA)：single page application

1、所有的活动都局限于一个页面中
2、当页面有数据发生变化的时候不会刷新整个页面(局部刷新)
3、ajax技术进行数据的收发

基础知识点

ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建$rootScope 根作用域对象
ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性（ng-model=”username”，表示作用域中的对象的属性username)
{{ }} (表达式) : 显示数据,从作用域对象的指定属性名上取
表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算
语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。
区别：语句用分号结尾，有些语句我们没有加封号，比如console.log虽然我们没有加封号，但也是语句，因为js引擎会自动解析并且加上封号。
js引擎在解析的时候会自动的加上封号
特例：if语句，就不用加封号可也是完整的语句。

Angular指令

* Angular为HTML页面扩展的: 自定义标签属性或标签
* 与Angular的作用域对象(scope)交互,扩展页面的动态表现力

常用指令(一)

ng-app: 指定模块名，angular管理的区域
ng-model：双向绑定，输入相关标签
他表示将使用该语句的值关联到当前作用域的指定属性上
ng-init：初始化数据
ng-click：调用作用域对象的方法（点击时）
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-click: 点击监听, 值为函数调用, 可以传$event
ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event

属性绑定

数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成
双向数据绑定: 数据可以从View(视图层)流向Model（模型）, 也可以从Model流向View
- 视图(View): 也就是我们的页面(主要是Andular指令和表达式)
- 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法
- 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令数据从View==>Model
- 当Model域对象的属性发生改变时, 页面对应数据随之更新: {{}}表达式数据从Model==>View
- ng-model是双向数据绑定, 而{{}}是单向数据绑定
  3.ng-init 用来初始化当前作用域变量。

依赖对象

依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。
angular的 ‘ $scope’对象就是依赖对象，并且是依赖注入的形式进行使用。！！！形参必须是特定的名称（$ scope), 否则Angular无法注入抛异常
回调函数的event的就是依赖对象
回调函数有形参就是依赖注入

声明式和命令式的区别

声明式
- 更加注重的执行的结果
- 声明式是对命令式的局部包装
- 更像填空题，选择题
- arr.map()将一些代码封装到这个函数的底层中，使用时直接调用就行
命令式
- 更加注重的执行的过程
- 更像简答题
- for()就像是for语句一样，在使用时都是一步一步执行的。

作用域和控制器

作用域对象 :

一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
它的属性和方法与页面中的指令或表达式是关联的

控制器:

用来控制AngularJS应用数据的 实例对象
ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象
同时Angular还有创建一个新的域对象 $scope, 它是$rootScope的子对象
在控制器函数中声明$scope形参, Angular会自动将$scope传入

模块

* 也是一个对象
* 创建模块对象： angular.module('模块名', [依赖的模块])
* 通过模块添加控制器：
    * module.controller('MyController', function($scope){//操作$scope的语句})
    * 当控制器较多时我们通常使用简化的代码。使用链式操作。
    * angular.module("myApp",[]).constroller("myConstroller",["$scope",function($scope){
    //操作$scope的语句
    }])
    $scope会代替函数形参中的$scope。

一般的样式模板

<body ng-app="MyApp">
<div ng-controller="MyCtrl">
  <input type="text" ng-model="empName">
  <p>员工名:{{empName}}</p>
</div>
<script>
    angular.module('MyApp',[])
            .controller('MyCtrl',['$scope',function ($scope) {
                $scope.empName = 'tom'
            }])
</script>

MVC模式

好处：MVC页面与数据完全分离

慢腾腾的急性子

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
##Angular

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

扫一扫

专栏目录