AngularJS之旅(1)

AngularJS的神奇之旅！...



最近在学习AngularJS。

AngularJS是什么？它是由Google赞助和维护的开源javascript库。用来构建web应用,它本身具有可扩展，可维护,可测试，标准化的特点。他的这些特点给我们做开发的带来了开发效率的提升。因为在它出现之前前端程序员写完前端是要等到后台完成了才能进行动态测试。自从有了它后前端程序员再也不用受后台开发的进度影响了，它可以在结合Node.js后直接进行前端测试。

它的优点就不说了，上面说的都是它的功能特点，那它的技术特点呢？

从四个方面来讲:

1.AngularJS采用MVC设计模式(另一说法MVVM(Model-View-ViewModel))，

2.模块化

3.指令系统

4.双向数据绑定

今天就讲模块化和指令系统。

先上例子:

1.1模块化:AngularModule.html

{{greeting.text}}

1.2  AngularModule.js

//定义模块

var myModule=angular.module("AngularModule",[]);

//模块调用控制器方法

myModule.controller("ModuleController",['$scope',

function helo($scope){

$scope.greeting={

text:'RoseVorchid,好人吗?'

};

}

]);

上面咱写了一个js文件AngularModule.js

在该文件中，我们定义了一个模块(其实在中指定了该模块,然后我们在js中定义一下)，然后通过模块调用控制器进行参数($scope)的注入(这个以后讲)。可能细心的同学会发现中有个奇怪的指令ng-app，还有ng-controller。这个就是我们接下来要讲的AngularJS的指令系统。这个特点真实太高级了，为什么这样讲呢？不知道开发过java web应用的同学有没有写过类似这样的后台:

public class HelloWorld extends HttpServlet{

public void doGet(HttpServletRequest request,

HttpServletResponse response) throws IOException,ServletException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

String hello="Hello World";

out.println("");

out.println(""+hello+"");

out.println("");

out.close();

}

}

当然真正的项目肯定比这个复杂了，我这就是举个例子，说明如果采用java自动创建一个html的body需要写这么麻烦的代码，

但如果采用AngularJS的话就简单多了(如下):

2.1指令系统 AngularDirective.html

在该html中我们看到没有body标签，但多了陌生的标签。这能行吗？请看下面AngularDirective.js:

//定义模块

var myModule=angular.module("myModule",[]);

//模块调用这个方法,hello是指令的名称也是html中的标签名

myModule.directive("you",function(){

return{

restrict:'E',

template:'Hi RoseVorchid!',

replace:true

}

});

在这段代码里我们也是先定义一个模块，然后该模块延迟调用指令函数。该指令函数返回的是标签you的定义,看到这我们就清楚了标签you其实就是Hi RoseVorchid!的封装。

是不是很神奇？很像spring中自定义标签吧？由此，我们可以大胆的提一个问题：html的标签的是不是也是采用类似的方法实现的？

长按下面二维码即可关注

    关注 源码工作室