Angularjs简介

　　很久没有系统学习一个新技术了，angularjs将会比较系统的讲解这个技术的语法、应用。次类型的博客将会持续更新，博主也是一个初学者，如果有问题欢迎留言讨论。

　　angularjs简介。

　　angularjs在创建优质的web应用的方面有着令人难以置信的能力。你将会用到一些概念，这个概念将会贯穿整个应用。并非杜撰了这些概念，而只是从其他开发环境中大量地借用了这些比较成功的习惯用语，然后以适合HTML、浏览区一起其他常见的web标准的方式来实现了这些概念。

　　多页面的应用会在服务端创建HTML，把HTML和数据装配并混合起来，然后把生成的页面发送到浏览器中。在某种程度上，大部分单页应用也叫作AJAX应用，也会做同样的事情。在这一方面。Angularjs在处理方式完全不同，模版和数据都会发送到浏览器中，然后客户端进行专配。这样一来，服务器的角色就是仅仅为这些模版提供一些静态资源，然后为这些模版提供所需的正确的数据。

　　我们能来看一个例子，看看angular是如何把数据和模版进行装配的。我们会例行公事的写一个“Hello World!”，但是不会把“Hello world！”写成一个完整的字符串打印出来。

　　为了实现这一功能，我把模版放在hello.html中：

　　

 1 <!DOCTYPE html>
 2 <html ng-app="hello">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World!</title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/controller.js" type="text/javascript"></script>
 8 </head>
 9 <body ng-controller="HelloController">
10 <p>{{greeting.text}},world</p>
11 </body>
12 </html>
View Code

　　

1 !(function (){
2     var app= angular.module('hello',[]);
3     app.controller('HelloController', function ($scope) {
4         $scope.greeting = {text: "Hello"};
5     });
6 }());
View Code

 

　　使用任意的浏览器打开hello.html,你会看到如下效果:

　　

　　与之前广泛的应用相比，这里有些非常有趣的东西需要注意：

　　1、HTML里没有ID或者class来定义事件和监听器。

　　2、当把HelloController中的greeting.text设置成其他的文本的时候，我们没有必要设置任何的监听事件和回调函数

　　3、HelloController只是一个普通的javascript类，并没有继承任何angularjs类

　　4、HelloController可以获取到它的$scope类，而没有必要去创建它

　　5、没有必要去自己调用HelloController的构造方法，或者指定合适调用它

　　

　　数据绑定

　　 当数据改变的时候，我们会把HTML模版和数据混合起来，然后把获得的DOM数据插入到UI中，但是，当根据用户的修改状态来修改数据的时候可能要编写极其复杂度代码来保证数据的状态是正确的，并且UI和JAVASCRIPT是属性要同时正确。

　　但是，我们不需要编写代码就能做到以上所有事情会怎样呢？如果我们可以仅仅声明UI中某个部分需要映射到javascript属性，然后它们自己去同步又会怎样呢？这样是编码风发就叫数据绑定。

　　为了实战中看到这一点，我们把第一个例子，让它变成动态的。目前的情况是greeting.text是一个静态的值，之后再也不会修改它。为了让它变成动态的，我们来增加一个输入框，会把greeting.text值变成用户输入的值：

　　

 1 <!DOCTYPE html>
 2 <html ng-app="hello">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World!</title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/controller.js" type="text/javascript"></script>
 8 </head>
 9 <body ng-controller="HelloController">
10 <input type="text" ng-model="greeting.text"/>
11 <p>{{greeting.text}},world</p>
12 </body>
13 </html>
View Code
1 !(function (){
2     var app= angular.module('hello',[]);
3     app.controller('HelloController', function ($scope) {
4         $scope.greeting = {text: "Hello"};
5     });
6 }());
View Code

 

 

我们在没有添加任何事件的时候UI就自动刷新了，这一机制对于来自服务器的数据同样有效。angular会自动把输入框和花括号中的文本更新为所获得的新值。

依赖注入

如代码所示，我们并不需要编写任何代码去获得$scope对象，而是$scope对象会自动传递给我们，我们并不需要调用任何函数去调用它，只需要办$scope对象放到HelloController中我们就可使用它了，正如以后的讲解当中，$scope并不是我们唯一能获得的对象，如：如果我们想获得浏览器中URL上的操作，可以适应$location对象，只需把$location对象放到HelloController中就可以使用了。

1 !(function (){
2     var app= angular.module('hello',[]);
3     app.controller('HelloController', function ($scope,$location) {
4         $scope.greeting = {text: "Hello"};
5         //在这里进行一些$locaotion操作
6     });
7 }());
View Code

 

指令

angularjs最强大的功能之一就是，你可以把模版编写成HTML的形式。之所以可以做到这一点，是因为，我们引入了一款强大的DOM转换引擎，可以用他来扩展HTML语法。

有了这个东东，你就可以实现一些神奇的功能！

　　

posted @ 2015-07-04 17:31  徐大腿  阅读(524)  评论(0)  编辑  收藏  举报