Angular.js基础手册

作者: 鱼鱼吃猫猫 | 来源:发表于2018-08-05 16:40 被阅读24次

AngularJS简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。AngularJS是一款开放源代码的javaScript框架，完全使用javascript编写客户端的技术，同其他历史悠久的Web前端技术（例如HTML、CSS等）配合使用，使得Web开发变得更简单、更高效。

AngularJS以HTML作为模板语言并扩展HTML元素及属性，使得应用组件开发保持高度清晰、一致。AngularJS 是以一个JavaScript 文件形式发布的，可通过 script 标签添加到网页中： <script src="./js/angular.min.js"</script>

各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

直接引用网址：http://www.angularjs.net.cn/download/

引入百度CDN：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
bootcdn：<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>

MVC、MVVM框架介绍

1、MVC框架

MVC是一种软件架构模式，独立于任何一门语言，于1970年起源于Smalltalk语言，之后广泛应用于桌面应用开发中。MVC分别是Model（模型）、View（视图）、Controller（控制器）。MVC的核心思想是把数据的管理、业务逻辑控制和数据的展示分离开来，使程序的逻辑性和可维护性更强。

Model（模型）：为程序的模型数据，是控制器与视图之间传递信息的载体。
View（视图）：为用户可操作的软件界面，用户通过视图与程序进行交互，在视图中触发不同的事件，将触发控制器执行相应的业务逻辑处理。
Controller（控制器）：主要用于响应用户的请求，在控制器中可操作模型数据，进行业务逻辑处理，根据处理结果分发到不同的视图。

mvc框架.png

2、AngularJS中的MVC

Model（模型）：作用域对象$scope中的属性。
View（视图）：DOM元素，就是HTML页面
Controller（控制器）：用户自定义的构造方法，作用域中的模型数据可以通过依赖注入的方式注入容器中。

3、MVVM框架

MVVM：早期的AngularJS框架比较接近于MVC，而随着新版本的重构与API的改进，$scope对象可以认为是有一个方法（Controller）包装后的ViewModel，看上去接近于MVVM（Model-View-ViewModel），也称为MVW（Model-View-Whatever）。

Angular第一个项目

1、项目代码

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./angular-1.5.5/angular.js"></script>
</head>
<body>
    <div> {{"hello world!"}} </div>
    <div> {{"Hello AngularJS"}} </div>
</body>
</html>

ng-app是AngularJS的一个内置指令，可以出现在任何位置，用来启动AngularJS框架，并告诉AngularJS框架管理ng-app指令所在的标签中所有DOM元素。此例中表示AngularJS管理整个HTML页面。
{{ }}是AngularJS的表达式形式，由两个大括号构成，中间是表达式的内容，AngularJS会解析表达式的内容，并将表达式的结果输出到浏览器。

2、AngularJS的构成元素

模型（Model）
视图（View）
控制器（Controller）
作用域（Scope）
指令（Directives）
表达式（Expressions）
模板（Template）

Angular表达式

AngularJS表达式写在双大括号内：{{ expression }}，用于把数据绑定到 HTML并在表达式的位置"输出"数据。AngularJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

1、数字

<div ng-app="" ng-init="a=1;b=2">
    <p>积为： {{a * b}}   </p> //表达式
</div>

2、字符串

<div ng-app="" ng-init="firstName='hidi'; lastName='tao'">
    <p>名字为： {{firstName + "." + lastName}}   </p>  //表达式
</div>

3、对象

<div ng-app="" ng-init="person={firstName:'hidi', lastName:'tao'}">
   <p>名字为： {{person.firstName+"."+person.lastName}} </p>//表达式
</div>

4、数组

<div ng-app="" ng-init="array=[1,2,3,4,5]">
    <p>下标为1的值为： {{array[1]}}</p>    //表达式
</div>

AngularJS双向数据绑定

数据绑定是AngularJS框架在视图（DOM元素）与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中。

作用域可以被视为一个容器，里面有一些基于key-value的数据。

为了建立数据绑定，我们需要使用ng-model指令和ng-bind指令。

1、ng-model指令

该指令只能作用于表单元素上

<div>
    用户名：<input  type='text' ng-model='username' />
    <p>  {{username}}  </p>
</div>

在input输入框中添加ng-model指令后，AngularJS框架会在对应的作用域中创建一个username属性与该输入框进行绑定

2、ng-bind指令

实现作用域到视图的单向数据绑定，和表达式的功能类似，可用于向界面输出作用域中的数据。

<div>
    用户名：<input  type='text' ng-model='username' />
    <p>  {{username}}  </p>
    <p ng-bind='username'></p>
    <p class='ng-bind:username'></p>
</div>

不同的是，在使用AngularJS表达式{{name}}时，如果遇到网络问题，就会导致AngularJS加载缓慢，我们会看到浏览器直接将AngularJS表达式当做字符串渲染到页面中。而ng-bind指令需要等到AngularJS加载完毕才会执行。

AngularJS控制器

1、控制器的使用

AngularJS 应用程序被控制器控制。

使用ng-controller 指令定义应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

<div ng-app="myApp" ng-controller="myCtrl">
    姓名:  <input type="text" ng-model="name"><br>
    显示姓名: {{name}}
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "John";
    });
</script>

应用解析：

ng-app启动AngularJS框架。应用程序在 <div> 内运行。
ng-controller用于定义一个控制器。
ng-model 指令绑定输入域到控制器的属性（name）
AngularJS 使用 $scope** 对象来调用控制器。控制器的**$ scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了一个属性 (name)。
在HTML（视图）中使用AngularJS表达式显示作用域中的属性（name）。

2、控制器的作用域范围

在同一个页面中可以使用多个ng-controller指令来实例化不同的控制器对象，但每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。

AngularJS模块

在实际项目中，随着项目的进展代码会越来越多，我们需要以一种更加合理的方式组织这些代码。应用模块划分能够使程序结构良好、提高代码的可维护性，同时可以避免命名冲突问题。

模块定义了一个应用程序，是应用程序中不同部分的容器，控制器通常属于一个模块。

1、模块定义

可以调用angular对象的module()方法来返回一个模块实例，该方法接收3个参数，语法如下：

angular.module(name,requires, configFn)

name：模块的名称
requires：是一个数组，用于指定该模块依赖的模块名称。如果不需要依赖其他的模块，则传递一个空数组即可。
configFn：为可选参数，该参数接收一个方法，用于对模块进行配置，作用与config()方法相同。

<script>
    //定义一个无依赖模块
     angular.module('app', []);  
    //定义一个依赖module1、module2的模块
     angular.module('app', ['module1', 'module2']);
</script>

在得到一个模块实例对象后，可以调用该对象的controller()、directive()、filter()等方法向模块中添加控制器、指令、过滤器等其他组件。

模块定义完毕后，使用ng-app指令指定模块名称即可。如：<html ng-app='appModule'>

2、AngularJS模块解决命名冲突

假定现在有两个HTML页面，分别为登录页面和注册页面，在两个页面中引入一个公共的common.js文件，该文件中定义了控制器，当两个页面定义的控制器名称相同时就会产生命名冲突。现在使用模块来解决这个问题。

<!-- 登录页面login.html -->
<html ng-app="loginModule">
<head>
    <meta charset="UTF-8"> 
    <title>登录页面</title>
    <script src="/angular-1.5.5/angular.js"></script>
    <script src="common.js"></script>
</head>
<body>
    <div ng-controller="UserController">
        <div>用户名：<input type="text" ng-model="uname" placeholder="用户名"/>
        </div><br/>
        <div>密　码：<input type="password" ng-model="pword" placeholder="密码"/>
        </div><br/>
        <div><button ng-click="submit()">登录</button></div>
    </div>
</body>
</html>

<!-- 注册页面register.html -->
<html ng-app="registerModule">
<head>
    <meta charset="UTF-8"> 
    <title>注册页面</title>
    <script src="/angular-1.5.5/angular.js"></script>
    <script src="common.js"></script>
</head>
<body>
    <div ng-controller="UserController">
        <div>用户名：<input type="text" ng-model="uname" placeholder="用户名"/>
        </div><br/>
        <div>密　码：<input type="password" ng-model="pword" placeholder="密码"/>
        </div><br/>
        <div><button ng-click="submit()">注册</button></div>
    </div>
</body>
</html>

<script>
    var loginModule = angular.module("loginModule",[]);//登录模块
    loginModule.controller("UserController",function($scope,$log){
        $scope.uname = "login";
        $scope.pword = "admin";
        $scope.submit = function() {
            alert("登录模块：UserController");
        }
    });

    var registerModule = angular.module("registerModule",[]);//注册模块
    registerModule.controller("UserController",function($scope,$log){
        $scope.uname = "register";
        $scope.pword = "admin";
        $scope.submit = function() {
            alert("注册模块：UserController");
        }
    });
</script>

AngularJS作用域

1、作用域概念

AngularJS作用域本质上就是一个普通的javascript对象，可以在作用域对象中增加属性和方法。

属性：$scope.属性名称 = ‘属性值’
方法：$scope.方法名称 = function() { }

AngularJS中不需要手动创建作用域对象，当HTML页面中出现ng-app、ng-controller指令时，AngularJS框架会自动创建作用域对象，我们只需将其注入即可。

AngularJS程序中作用域的主要功能是存放模型数据，在控制器中可以修改作用域的模型数据，在视图中使用AngularJS表达式或者ng-bind显示数据。

AngularJS中使用$scope表示作用域，通过为其属性赋值，可以传递数据给模板渲染。

2、$scope使用

创建控制器时，将** $scope**对象当做一个参数传递，当在控制器中添加$ scope对象时，视图（HTML）可获取这些属性值。视图中直接访问属性名称即可。

 <body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h1> {{myValue}} </h1>  <!--使用模型中的数据:变量-->
        <p>{{show()}}</p> <!-- 使用模型中的数据：方法 -->
    </div>
 </body>
 <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
          $scope.myValue = "你好，世界";
          $scope.show = function() {
            return '你好'
        }
      })
</script>

3、各种语言或框架中的函数及变量定义

//java语言：
void show() {   }
int a = 100;

//javascript
function show() {  }
var a = 100;

//微信小程序
show: function() {  }
a: 100

//react
show(){  }
var a = 100;

//vue
show: function() {  }
a: 100

//angular
$scope.show = function() {   }
$scope.a = 100;

AngularJS指令

AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。指令带有前缀 ng-。

完整的内置指令可参考：http://www.runoob.com/angularjs/angularjs-reference.html

<div ng-app="" ng-init="name='Rose'">
    <p>名字为： <input type="text" ng-model='name'/></p>
    <p ng-bind="name"></p>
</div>

ng-app：初始化一个 AngularJS 应用程序，启动AngularJS框架
ng-init：初始化应用程序数据
ng-model：绑定元素值（比如输入域的值）到应用程序
ng-bind：绑定 HTML 元素到应用程序数据

1、内置指令

（1）n-app

ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；
ng-app可以出现在html文档的任何一个元素上。
ng-app的值可以为空（练习），但项目中一定要赋值，后面所说的模块。

<html lang="en" ng-app=""></html>

（2）ng-init

ng-init 指令为 AngularJS 应用程序定义了初始值，可以出现在任何HTML元素中。通常情况下，不使用 ng-init。将使用一个控制器或模块来代替它。

<div ng-init="name='Rose'">
    <p>{{name}}</p>
</div>

（3）ng-model

ng-model 指令绑定 HTML 元素到应用程序数据。
ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（invalid、dirty、touched、error）。
- 为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "John Doe";
    });
</script>

（4）ng-repeat

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素

<div ng-app="" ng-init="array=['abc', 'www', 'baidu', 'com']">
    <ul>
        <li ng-repeat="x in array" ng-bind="x"> </li> <br /><br />
    </ul>
</div>

2、自定义指令

（1）定义指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
可以使用 .directive() 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，如：myDirective, 但在使用它时需要以 短横线 - 分割, 如：runoob-directive

<body ng-app="myApp">
    <my-directive></my-directive>  //调用自定义指令
    <script>
        var app = angular.module("myApp", []);
        app.directive("myDirective", function() {
            return {  
                template : "<h1>自定义指令!</h1>"};
            }
        );
    </script>
</body>

（2）调用指令

AngularJS可以通过4种方式来调用自定义指令:
- 元素名：<runoob-directive></runoob-directive>
- 属性：<div runoob-directive></div>
- 类名：<div class="runoob-directive"></div>
- 注释：，需要在定义指令时指定replace的值为true，否则不可见。注意：指令左右要有空格

可以限制指令必须通过特定的方式调用，只需要为restrict设置特定的值即可。restrict 值可以是以下几种:
- E element作为元素名使用
- A attribute作为属性使用
- C class作为类名使用
- M mark作为注释使用restrict

默认值为 EA, 即可以通过元素名和属性名来调用指令。

<script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>