AngularJS基本概念

版本：

AngularJs 1.x：https://angularjs.org/

AngularJs 2+：https://angular.io/ 或 https://angular.cn/

实现语言：

Angular 1.x：使用ES(avaScript)编写，可直接在浏览器中运行。

Angular 2+：基于TypeScript，需要经过编译后才能在浏览器中运行【需要引入很多第三方依赖】，因此需要使用构建工具。

适用场景：

Angular 1.x：在设计之初主要是针对PC端的，但有衍生框架支持如 ionic。

Angular 2+：目标是原生移动，支持I0S和Andriod

技术细节：

Angular 1.x 中的控制器在 Angular 2+ 中不再使用，也可以说控制器在 Angular 2中被 Component 组件所替代

1、模块与控制器

1.1 模块

AngularJS程序通过模块(module)来组织、实例化、启动应用程序，其作用为：

• 存储一组Angularjs功能组件(如类、函数、变量等)
• 目的隐藏每个模块的实现细节，从而降低开发难度
• 可以与其他模块产生互相依赖的关系;

1）声明模块：

var app = angular.module('moduleName',[]);

参数1（name）：定义模块的名称

参数2（ [ ] ）：“[ ]”代表一个数组，用来存放模块所依赖的其他模块的名称，如果数组为空，则表示模块没有依赖

2）绑定模块：ng-app

<div ng-app="moduleName"></div>

ng-app指令作用：

1. 让AngularJS框架在指定的标签上启动，并载入这个模块
2. 载入该模块后，在标签内部就可以使用该模块上的各种AngularJS功能组件，如控制器

1.2 控制器 

控制器的最大作用就是把作用域($scope)和模板上的HTML标签绑定到一起，然后在这个标签中的Angulans表达式就可以依附于该作用域执行。

一个模块可以有多个控制器。

1）控制器创建：

var app= angular.module('myApp',[]);
//$scope用到了依赖注入
app.controller('ControllerName',function($scope){
    //TOD0:为$scope准备各种数据
});

参数1（ControllerName）：控制器名称
参数2：回调函数 function($scope){}

• scope(作用域)是应用在 HTML(视图)和JavaScript(控制器)之间的纽带
• scope 是一个JavaScript对象，有可用的方法和属性
• scope 可应用在视图和控制器上

2）控制器绑定：ng-controller

 <div ng-controller='mycontroller'></div>

2、AngularjS作用域

一个 module 可以有多个 controller，每个 controller 中定义的数据(变量、函数...)应当有特定的作用范围

AngularJS是一个MVC(Model View Controller)框架，使用作用域(scope)来管理控制器(controller)和视图(view)之间的数据交互。在AngularS中，每个控制器都有一个作用域(scope)，它是一个纯JavaScript对象，用于在控制器和视图之间传递数据。

作用域($scope)，可以理解释为“数据仓库”，是一个JavaScript对象，包含属性和函数

作用域中定义的属性和方法，可以在【视图】和【控制器】 中使用

1）作用域中定义属性和函数：

app.controller('ControllerName',function($scope){
    // 定义属性name
    $scope.name = "lucy";
    // 定义函数say()
    $scope.say=function(){
        $scope.welcome ='welcome:'+ $scope.name +'!';
    };
});

2）根作用域($rootscope)：

• AngularJS中，所有应用都有一个根作用域($rootscope)
• $rootScope用个各个控制器这间共享数据
• $rootScope的作用范围，ng-app所指定的范围

创建格式：

<script>
var app=angular.module('myApp',[]);
app.controller('mycontroller',function($scope,$rootscope){
    // todo
});
</script>

3）作用域间的嵌套
AngularJS巧妙的使用了JavaScript原型链，实现了作用域的嵌套关系;
使用规则：

• 优先使用当前作用域
• 下级可以使用上级作用域
• 上级不能作用下级作用域

3、AngularJS表达式

1）插值表达式语法格式：

{{ expression }}

2）过滤器

使用格式：

{{value | fiterl | filter2 ...}}

3）自定义过滤器

语法：

app.filter('过滤器名',function(){
    //在返回的这个函数中，还实现具体功能
    return function(待过滤数据,参数....){
        ....
        return 已过滤数据
    }; 
});

举例：

<script>
    var myApp=angular.module('myApp',[]);
    myApp.filter('scoreFilter',function(){
    return function(score){
        if(score >= 90) return'优秀'
        if(score >= 80) return'良好'
        if(score >= 70) return'中等'
        if(score >= 60) return'及格'
        return'不及格';
    }
});
</script>