`

AngularJS基本特性介绍

阅读更多
Hello World
使用AngularJS非常简单,如下:
<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>


以指令ng-app定义AngularJS的作用域,然后引入angular-1.0.1.min.js,这就是AngularJS的Hello World,简单但是无用。

HTML执行表达式(Expressions)
AngularJS允许在HTML直接执行表达式,如下:
1+2 = {{1+2}}!  #页面会显示 1+2 = 3!

一样的简单,同样的无用,因为在HTML直接写表达式会让代码一团糟,这样的功能最好不要用。

Directives(指令)
这个特性非常有用,这个特性扩展HTML的表现能力,通过为DOM对象增加新的属性指令为DOM对象定制行为。使用这个特性可以以更少的代码构建更加优雅的页面结构。AngularJS本身内置了一些指令,下面来看一个例子,使用了内置的ng-repeat
<div ng-init="students = [
      {name:'John', age:25, gender:'boy'},
      {name:'Joy', age:15, gender:'girl'},
      {name:'Mary', age:28, gender:'girl'},
      {name:'Sebastian', age:10, gender:'boy'},
      {name:'Samantha', age:16, gender:'girl'}
    ]">

    <div data-ng-repeat="student in students">
        <h3>{{student.name}}:{{student.age}}</h3>
    </div>
</div>

上例中,首先通过ng-init指令创建了一个students的对象数组, 然后使用ng-repeat指令打印出所有学生的名字和年龄。还可以使用ng-show过滤重复值,只显示boy:
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'">
        <h3>{{student.name}}:{{student.age}}</h3>
</div> 

或者使用ng-switch做一些更复杂的控制,年满18岁打印ADULT。
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"
         data-ng-switch="student.age >18">
        <h3>{{student.name}}:{{student.age}}</h3>
        <p data-ng-switch-when="true">ADULT</p>
    </div>

这个特性比较杀手级,它为开发人员省了很多代码,对定义Web Page Structure非常有帮助。而且除了本身自带的Directives满足大部分群众的需要, 还支持定制Directive满足你的奇葩需求。

数据绑定(Data Binding)
在AngularJS中,只需要简单的使用ng-model就可以实现model和view的双向绑定,任何在view上的修改马上反应到Model,任何在Model数据上的修改马上反应到View的展示上。如下:
<div data-ng-repeat="student in students">
        <h3>{{student.name}}:{{student.age}}</h3>
        Edit Name: <input type="text" data-ng-model="student.name">
    </div>

过滤器(Filters)
AngularJS通过Filters提供了改变数据展现形式的方法或者过滤部分数据,实现形式就是以‘|’字符分割expression: {{expression|filter1|filter2}}.例如:把student的名字全部展示为大写:
 <div data-ng-repeat="student in students">
        <h3>{{student.name|uppercase}}:{{student.age}}</h3>
 </div>

和Directive一样,Filter同样支持定制:http://docs.angularjs.org/guide/filter。  

模块化(Modules)
在AngularJs中,应用可以拆分为一个个的小模块,模块之间可以相互依赖,这样各个功能可以非常方便重用和测试。在HTML中使用ng-app指令即可定义一个Module:
<html ng-app=“AngularJSSample”>

然后在javascript中,可以非常简单的获取到这个Module,
var AngularJSSample = angular.module('AngularJSSample', []);

之后,你可以为这个Module了添加你想要得东西了,比方说我们前面提到的定制filter和Directive等。例如为定义一个Greet Filter:
var AngularJSSample = angular.module('AngularJSSample', []);
AngularJSSample.filter('greet', function() {
    return function(name) {
        return 'Hello, ' + name + '!';
    };
});


另外angular.module方法的第二个参数是用来指定该模块依赖哪个模块的。

零件视图(Partial Views)
AngularJS除了通过ng-app可以把一个应用拆成小模块,在模块中,还可以通过ngView定义的页面模板,然后和Route配合显示对应的View,这个特性对想写Single Page Application的同学非常有用。

依赖注入(Dependency Injection)
AngularJS中提供了config操作为一个Module注入依赖的Service,例如我想注入一个“$routeProvider"这个路由服务:
AngularJSSample.config(['$routeProvider', function($routeProvider){
}]) ;

路由(Routes)
AngularJS中,可以直接用javascript定义可用的路由,页面的跳转再也不用到服务器去走一圈了
AngularJSSample.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/students', {
        templateUrl: 'views/students.html',
        controller: 'studentsController'
    }).otherwise(
        {
            templateUrl: 'views/greeting.html'
        })
}]);


控制器(Controllers)
上面的例子中,使用了一个studentController, AngularJS中在module上使用controller操作可以为module定义一个Controller,Controller定义了一个操作的具体行为。Controller通过依赖注入的服务完成各种操作,然后通过$scope服把view需要的数据传递过去。为保证隔离性,在Controller中一定不要有任何与DOM相关的代码。 定义一个controller如下:
AngularJSSample.controller(['studentController', function ($scope) {
}]);	


Scope
Scope就是用来给Controller和View之间做数据传递的,Controller往scope中添加的任何数据,View都可以访问到。
AngularJSSample.controller(['studentController', function ($scope) {
    $scope.students = [
        {name: 'John', age: 25, gender: 'boy'},
        {name: 'Joy', age: 15, gender: 'girl'},
        {name: 'Mary', age: 28, gender: 'girl'},
        {name: 'Sebastian', age: 10, gender: 'boy'},
        {name: 'Samantha', age: 16, gender: 'girl'}
    ];
}]);


小结
AngularJS自己定义一整套完整的逻辑,其对前端代码的规范性很有帮助,另外,内置的各种Directive会极大的减少开发人员的代码量;未来AngularJS + Restful Service可能会大行其道。

对AngualarJS的槽点有2个,第一,所有逻辑知识都暴露在JavaScript中,是否会导致一些安全问题,第二,官方的文档可用性极差啊。

   
  
2
4
分享到:
评论

相关推荐

    AngularJs基本特性解析(一)

    这些特性使得 AngularJS 能够简化前端开发,提高代码复用和可维护性。 1. 数据绑定:AngularJS 的数据绑定功能允许开发者轻松地将数据模型与 UI 元素关联起来。表达式,如 `{{ expression }}`,用于在 HTML 中展示...

    angularjs基本概念全

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

    angularJs demo 各种基本用法

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

    AngularJS Bootstrap详细介绍及实例代码

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

    angularJS基本框架

    总的来说,"angularJS基本框架"项目为开发者提供了一个初始化的AngularJS开发环境,通过理解其结构和工作原理,可以快速搭建自己的应用,并进一步深入学习和掌握AngularJS的高级特性和最佳实践。

    Angularjs_in_action

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

    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开发ASP.NET MVC

    - **AngularJS的基本概念(如数据绑定、指令等)** - **如何在ASP.NET MVC项目中引入AngularJS** #### AngularJS与ASP.NET MVC结合的优势 AngularJS作为一种前端框架,在单页面应用(SPA)的开发上具有独特的优势。...

    angularjs 書籍

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

    angularjs-webpack:angularJs基本框架

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

    AngularJS学习总结&详细介绍

    AngularJS提供了scopes、module和controller三种基本概念: * scopes:用于存储应用程序的状态和行为。 * module:用于定义应用程序的模块。 * controller:用于处理用户交互和业务逻辑。 ### 依赖注入 ...

    angularJS_学习资料

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

    精通AngularJS (美)

    这本书详细介绍了AngularJS的核心概念和技术,包括: 1. **双向数据绑定**:AngularJS的核心特性之一,它使得视图和模型之间的数据保持同步,减少了手动更新视图或模型的需要。 2. **依赖注入**(Dependency ...

    AngularJS入门小Demo

    在这个“AngularJS 入门小 Demo”中,我们将探讨 AngularJS 的基本概念和核心功能。 1. **数据绑定**:AngularJS 的核心特性之一是双向数据绑定。这意味着视图(View)和模型(Model)之间的数据会自动保持同步。在...

    AngularJS_in_Depth_v5_MEAP

    本书将详细介绍依赖注入的基本原理,以及如何在AngularJS项目中有效地使用这一特性。 - **双向数据绑定**:双向数据绑定是AngularJS最吸引人的特性之一。本书不仅会解释这一特性的基本工作原理,还会探讨其背后的...

Global site tag (gtag.js) - Google Analytics