首页 > 代码库 > 带你走近AngularJS - 基本功能介绍

带你走近AngularJS - 基本功能介绍

2024-07-25 09:35:06   223人阅读

带你走近AngularJS系列：

  1. 带你走近AngularJS - 基本功能介绍
  2. 带你走近AngularJS - 体验指令实例
  3. 带你走近AngularJS - 创建自己定义指令

------------------------------------------------------------------------------------------------

AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好而且可扩展的服务，包括数据绑定、DOM操作、MVC设计模式和模块载入等。本文专注于AngularJS 指令的使用，在我们进入主题之前，我们将高速浏览AngularJS的基本用法。

AngularJS 不不过一个类库，而是提供了一个完整的框架。它避免了您和多个类库交互，须要熟悉多套接口的繁琐工作。它由Google Chrome的开发者设计，引领着下一代Web应用开发。或许我们5年或10年后不会使用AngularJS，可是它的设计精髓将会一直被沿用。

了解AngularJS的开发者，你肯定会为AngularJS自己定义指令（它的功能相当于.NET 平台下的自己定义控件）功能感到兴奋。自己定义指令同意你扩展HTML标签和特性。指令能够复用而且能够跨项目使用。

自己定义指令已经得到了广泛的应用，当中值得一提的是-Wijmo控件集。它包括了近50款基于AngularJS 控件。Wijmo是用于创建桌面和移动Web应用程序的HTML5前端控件集。从交互式图表到强大的表格控件，Wijmo差点儿包括了我们所须要的一切。能够从官网了解Wijmo的很多其他信息。所以，Wijmo是学习AngularJS非常好的參考演示样例：

image

 

创建自己定义指令是非常easy的。指令能够測试、维护而且在多个项目中复用。

使用AngularJS, 须要在HTML页面引用脚本文件，给HTML或Body标签加入ng-app 特性。以下是一个使用AngularJS的简单实例：

<html>
  <head>
    <script src=http://www.mamicode.com/"http://code.angularjs.org/angular-1.0.1.js"></script>
  </head>
  <body ng-app ng-init="msg = ‘葡萄城控件团队博客‘">
    <input ng-model="msg" />
    <p>{{msg}}</p>
  </body>
</html>

 

当AngularJS 载入后，它会在文档中搜索ng-app 特性。这个标签通常被设置给项目的主要模块。一旦发现，Angular 就会对文档进行操作。

在这个样例中，ng-init 特性初始化了一个msg 变量“葡萄城控件团队博客”， ng-model 特性把它和input 控件进行了双向绑定（注意：大括号是绑定的标记）。AngularJS 会解析这个标记，随着input值改变实时更新msg 文本值。能够从链接查看效果:点击进入

image

 

AngularJS 模块

模块能够说是AngularJS 的根本。它包括配置、控制、过滤、工厂模式、指令及其他模块。

假设你熟悉.NET平台，但初步学习Angular。以下的表格是一个简要的对照，帮助你理解Angular中的角色扮演情况：

AngularJS

.NET

摘要

module

Assembly

应用开发模块

controller

ViewModel

控制器，启到不同层面间的组织作用

scope

DataContext

为视图提供绑定数据

filter

ValueConverter

传输数据到视图之前改动数据

directive

Component

可复用的UI元素，也能够理解为前端插件

factory, service

Utility classes

为其他模块元素提供服务

比如，以下的代码使用控制器、过滤器和指令创建了一个模块：

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
    $scope.msg = "grapecity team blog";
});

// add a filter
myApp.filter("myUpperFilter", function() {
    return function(input) {
        return input.toUpperCase();
    }
});

// add a directive
myApp.directive("myDctv", function() {
    return function(scope, element, attrs) {
        element.bind("mouseenter", function() {
            element.css("background", "yellow");
        });            
        element.bind("mouseleave", function() {
            element.css("background", "none");
        });            
    }
});

 

上面演示样例中module 方法的第一个參数为模块的名称，第二个參数为它的依赖模块列表。我们创建了一个独立的模块，不依赖于其他模块。所以第二个參数为空数组（注意：即使它为空，我们也必须填写这个參数。否则，该方法回去检索之前的同名模块）。这部分我们将在兴许的文章中具体阐述。

controller 构造函数获取$scope 对象，用于存储全部controller 暴露的接口和方法。scope 由Angular 传递到视图和指令层。在这个样例中， controller 加入了msg 属性给scope对象。一个应用模块能够包括多个controller，每一个controller各司其职，控制一个或多个视图。

filter 构造函数返回一个方法用于更改input文本的显示方式。Angular 提供非常多内置的filter，同一时候，你也能够加入自己定义filter，操作方式Angular内置filter相同。在这个样例中，实现了小写到大写的转换。Filter不仅能够格式化文本值，还能够更改数组。AngularJS 内置的格式化Filter有number、date、currency、uppercase和lowercase。数组 filter有filter、orderBy和 limitTo。Filter须要设置參数，语法格式也是固定的：someValue |filterName:filterParameter1:filterParameter2....

directive 构造函数返回了一个方法，该方法用于传递一个元素，并根据scope中的參数对其进行改动。演示样例中我们绑定了mouseenter 和mouseleave 事件用于切换文本高亮显示。这是一个功能简单的指令，在兴许的章节将展示怎样创建一些复杂指令。

以下是使用模块构建的页面：

<body ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="msg" />
    <p my-dctv >
        {{msg | myUpperFilter }}
    </p>
</body>

 

能够从链接查看效果:点击进入

image

 

注意应用中module、controller和filter 作为特性值应用。它们代表JavaScript 对象，因此名称是区分大写和小写的。指令的名称相同也是属性值，它作为HTML标签被解析，所以也是区分大写和小写的。但AngularJS 会自己主动转换这些特性为小写，比如“myDctv" 指令变成"my-dctv" (就像内置的指令ngApp, ngController, 和ngModel会转换成 "ng-app", "ng-controller", 和"ng-model"。

 

项目组织结构

使用AngularJS 能够创建大型Web项目。你能够把项目拆分为多个模块，把一个模块拆分为多个模块文件。同一时候，能够依照你的使用习惯组织这些文件。

列举一个典型的项目结构：

Root
        default.html
        styles
               app.css
        partials
               home.html
               product.html
               store.html
        scripts
               app.js
               controllers
                       productCtrl.js
                       storeCtrl.js
               directives
                       gridDctv.js
                       chartDctv.js
               filters
                       formatFilter.js
               services
                       dataSvc.js
               vendor
                       angular.js
                       angular.min.js

假设假设你仅希望项目中使用一个模块，你能够如此定义：

// app.js

angular.module("appModule", []);

 

假设希望在模块中加入元素，你能够通过名称调用模块向当中加入。比如： formatFilter.js 文件包括以下元素：

// formatFilter.js
// 通过名称获取模块
var app = angular.module("appModule");

// 向模块中加入filter
app.filter("formatFilter", function() {
  return function(input, format) {
    return Globalize.format(input, format);
  }
}})

假设你的应用包括多个模块，注意在加入模块时加入其他模块的引用。比如，一个应用包括三个模块app、controls、和data ：

// app.js (名称为app的模块依赖于controls和data模块)
angular.module("app", [ "controls", "data"])

// controls.js (controls 模块依赖于data 模块)
angular.module("controls", [ "data" ])

// data.js (data 模块没有依赖项，数组为空)
angular.module("data", [])

应用的主页面中须要声明ng-app 指令， AngularJS 会自己主动加入须要的引用：

<html ng-app="app">
...
</html>

进行以上声明后，你就能够在全部的页面中使用其他三个模块声明的元素了。

这篇文章中我们了解了AngularJS的基本用法及结构。在下一个章节中，我们将阐述主要的指令概念，同一时候，会创建一些实例来帮助你加深指令作用的理解。

带你走近AngularJS - 基本功能介绍


联系
我们