我爱编程

Angular.js基础手册

2018-08-05  本文已影响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/

MVC、MVVM框架介绍

1、MVC框架

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

mvc框架.png

2、AngularJS中的MVC

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>

2、AngularJS的构成元素

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>

应用解析：

2、控制器的作用域范围

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

AngularJS模块

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

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

1、模块定义

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

angular.module(name,requires, configFn)

<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对象，可以在作用域对象中增加属性和方法。

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>

1、内置指令

（1）n-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
<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）定义指令
<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）调用指令

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

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

猜你喜欢

热点阅读