Angularjs简介

时间 2019-12-13

原文原文链接

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

　　angularjs简介。

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

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

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

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

 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,你会看到以下效果:浏览器

　　与以前普遍的应用相比，这里有些很是有趣的东西须要注意：服务器

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

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

　　三、HelloController只是一个普通的javascript类，并无继承任何angularjs类函数

　　四、HelloController能够获取到它的$scope类，而没有必要去建立它

　　五、没有必要去本身调用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语法。

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

1. 【angularJS】简介
2. AngularJS简介
3. angularJs(一)简介
4. AngularJS - 简介
5. Angularjs 简介
6. AngularJS - 服务简介
7. AngularJS 学习笔记---AngularJS 简介
8. angularjs整合ueditor简介
9. angularJS与IE8整合简介
10. AngularJS 简单的介绍
更多相关文章...
• Scala 简介 - Scala教程
• AJAX 简介 - PHP教程
• Github 简明教程
• Java Agent入门实战（一）-Instrumentation介绍与使用