AngularJS基础

AngularJS简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购，是一款优秀的前端JS框架。 —-参考百度百科

AngularJS特性

1. MVC
遵循mvc模式，将视图，模型，和控制器分离实现前端解耦合，提高代码的复用性，层次清晰，便于管理和维护，降低开发难度
2. 模块化
AngularJS采用模块化的方式，通过模块来定义AngularJS应用，一个应用可以包含多个模块，每个模块可以有不同的实现功能的代码
并且AngularJS支持模块命名空间
3. 依赖注入
//待补充
4. 双向绑定
模型和视图之间实现双向绑定
5. 语义化标签（指令）
有丰富的内置指令，并且支持自定义指令

AngularJS基本概念

1. AngularJS模块
- 如何定义一个模块 angular.module('模块名',[]);
- 依赖 angular.module('模块名',['依赖的模块名']);
- 获取 angular.module('模块名');
- 一个模块类似于一个main方法
2. $scope作用域
- $$scope就是一个javascript对象
- 作用：提供AngularJS表达式运行环境
- $rootScope根作用域,是所有$scope的父对象
- $scope的继承性，子$scope会继承父$scope上的属性和方法，类似于javascript的原型继承
- 获取DOM元素上的$scope属性angular.element("css选择器").scope();
- ng-controller,ng-repeat,ng-switch,ng-view,ng-include会自动创建一个子作用域$scope
3. 控制器
- 控制器就是javascript的一个函数
- 是数据和视图之间的一个桥梁
- 可以实现业务逻辑
- 可以初始化对象属性
- 可以添加时间
- 创建控制器的同时会创建一个子作用域$scope
- 通过myApp.controller('控制器名称',function(){ })创建控制器
- html页面通过ng-controller =”控制器名称”来绑定控制器
4. 表达式
- 是javascript的代码片段，，位于html片段，用于数据绑定，{{表达式}}
- 属性表达式对应当前作用域
- 允许未定义值
- 没有控制结构
- 支持过滤器
- 使用{{}}获取$scope作用域的变脸 -$scope.$eval()方法，可以解析javascript表达式
5. 过滤器
- 一个格式
- 格式化数据
- “表达式|过滤器”html
- 如果需要传递参数给过滤器，只要在过滤器名字后面加冒号，冒号后面写参数，多个冒号多个参数，如果有多个过滤器，可以用“|”分割多个过滤器
- 使用$filter服务调用过滤器，通过依赖注入的方式将$filter注入到控制器，$filter(‘filterName’)(表达式，参数)
appModule.filter('filterName', function(){
return function(表达式，参数){
//过滤逻辑
}
})

6. 内置指令
元素类:a,form,input
属性类:ng-app,ng-controller,ng-model,ng-ng-bind
事件类:ng-click,ng-keyup,ng-mouseover,ng-focus
样式类:ng-class,ng-style
显示类:ng-show,ng-hide,ng-if
其他:ng-repeat
https://docs.angularsjs-org/api/ng/directive
html:采用中划线形式将指令卸载标签属性上
js:通过$scope设置对应的值