`
weitao1026
  • 浏览: 1034370 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

angularjs的基本功能介绍

 
阅读更多

带你走近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很好的参考示例：AngularJS Directive Gallery

image

 

创建自定义指令是非常容易的。指令可以测试、维护并且在多个项目中复用。

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

复制代码
<html>
  <head>
    <script src="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开发人员最常犯的10个错误
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    angularjs基本概念全

    **AngularJS基本概念详解** AngularJS，作为一款强大的前端JavaScript框架，由Google维护，主要用于构建动态Web应用。它通过提供MVC（Model-View-Controller）架构和丰富的指令集，简化了网页开发的过程，实现了...

    angularJs demo 各种基本用法

    在"angularJs demo 各种基本用法"中，我们可以深入探讨以下几个关键概念：路由（router）、过滤器（filter）、服务（service）以及指令（diractive）。 **路由（Router）**： AngularJS的路由功能允许我们根据URL来...

    AngularJs基本特性解析(一)

    1. 数据绑定：AngularJS 的数据绑定功能允许开发者轻松地将数据模型与 UI 元素关联起来。表达式，如 `{{ expression }}`，用于在 HTML 中展示和更新数据。例如，`&lt;p&gt;name: {{ person.name }}&lt;/p&gt;` 将自动显示并同步 ...

    AngularJS Bootstrap详细介绍及实例代码

    下面将详细介绍AngularJS Bootstrap的使用方法和知识点。 首先，AngularJS是一个由Google维护的开源JavaScript框架，它使得动态的Web应用程序更容易开发。AngularJS通过HTML模板和双向数据绑定来实现一个富互联网...

    angularJS基本框架

    这个开源项目，"angularJS基本框架"，是一个AngularJS的种子项目，它提供了一个基础的开发结构，帮助开发者快速上手并遵循最佳实践。 1. **AngularJS核心概念**： - **双括号绑定**：AngularJS的核心特性之一是...

    Angularjs_in_action

    这一部分主要介绍了AngularJS的基本概念，包括如何设置开发环境、AngularJS的工作原理以及基本的开发流程。 - **第1章**：“Hello AngularJS”。通过一个简单的“Hello World”示例，介绍了如何开始使用AngularJS。...

    angularjs_angularjs_

    同时，为了进行开发，还需要设置HTML环境，引入AngularJS库，并创建一个基本的AngularJS应用。 二、路由配置 AngularJS的路由系统允许我们在单页应用（SPA）中实现页面导航。通过`ngRoute`模块，我们可以定义不同的...

    angularJs权威和精通angularjs

    通过阅读《精通AngularJS》和《AngularJS权威指南》这两本书，你将不仅了解AngularJS的基本用法，还能深入学习其实战技巧，提升自己的前端开发技能。同时，《基于MVC的JavaScript+Web富应用开发》可能还会提供关于...

    AngularJS学习 chm 文件

    通过"AngularJS学习笔记.chm"文件，你可以系统地学习AngularJS的基本概念、核心特性和实践技巧。文件中的章节可能包括AngularJS的安装与设置、基础语法、指令详解、服务的使用、数据绑定的深入理解、模块和路由的...

    angularJS理论与实战.ppt

    二、AngularJS基本用法 1. 初始化应用：通过ng-app指令定义一个AngularJS应用的范围。 2. 控制器创建：使用ng-controller指令定义控制器，存放业务逻辑。 3. 数据绑定：通过双大括号{{}}实现数据绑定，将模型数据...

    angularjs-webpack:angularJs基本框架

    在标题"angularjs-webpack:angularJs基本框架"中，提到的是如何使用Webpack来构建AngularJS项目。Webpack的引入主要是为了优化开发流程，提高代码的组织和管理效率，同时也能更好地实现模块化和代码分割，提高应用的...

    学习AngularJS-1.x.pdf

    二、AngularJS基本概念 * 模块（Module）：AngularJS应用程序的基本结构单元 * 控制器（Controller）：处理用户输入和业务逻辑 * 视图（View）：显示数据的HTML模板 * 服务（Service）：提供业务逻辑和数据访问 * ...

    angularJS_学习资料

    它将详细介绍数据绑定和指令的基本用法，以及如何使用AngularJS进行简单的路由配置。此外，教程还会讲解如何利用$http服务进行异步数据获取，以及如何进行单元测试。 ### 四、AngularJs学习笔记 学习笔记通常包含...

    Professional AngularJS 电子书

    - **AngularJS基础语法**：介绍AngularJS的基本语法结构，包括数据绑定、指令等。 - **项目搭建**：指导如何搭建一个AngularJS项目，包括环境配置、文件结构组织等内容。 - **简单应用示例**：通过一个或多个简单的...

    angularjs 書籍

    这本书可能会介绍如何在ASP.NET环境中集成AngularJS，以及如何利用AngularJS的特性来改善.NET应用的前端体验。 "AngularJS UI Development.pdf"聚焦于AngularJS的用户界面开发，讲解如何利用AngularJS的模块化和...

    angularjs -plugin

    4. **Sublime Text AngularJS Package**：Sublime Text文本编辑器的AngularJS插件，提供基本的AngularJS语法高亮和代码提示。 **三、如何安装和使用AngularJS插件** 1. **Visual Studio Code**：在市场中搜索...

Magicbox
Global site tag (gtag.js) - Google Analytics