你的位置:首页 > Java教程

[Java教程]Angular快速入门篇



简介


AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容。

AngularJS有五个主要核心特性,如下介绍:

  • 双向数据绑定 —— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然。

  • 模板 —— 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些DOM,也就是说AuguarJS把模板当做DOM来操作,去生成一些指令来完成对view的数据绑定。

  • MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

  • 依赖注入 —— AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

  • 指令 —— 可以用来创建自定义的标签,也可以用来装饰元素或者操作DOM属性。

指令介绍


AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”,是用来扩展浏览器能力的技术之一,在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行,这使得指令可以为DOM指定行为,或者改变它。

AngularJS通过称为指令的新属性来扩展的HTML,带有前缀ng-,我们也可以称之为“指令属性”,它就是绑定在DOM元素上的函数,可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。

 

AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”,它本质上只是一个当编译器编译到相关DOM时需要执行的函数,可以写在元素的名称里,属性里,css类名里,注释里。

当浏览器启动、开始解析HTML时,DOM元素上的指令属性就会跟其他属性一样被解析,也就是说当一个Angular.js应用启动,Angular编译器就会遍历DOM树来解析HTML,寻找这些指令属性函数,在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。

Angular.js应用的动态性和响应能力,都要归功于指令属性,常见的有:ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

关于“指令属性”就先暂时介绍这些,相信你已经对它有初步的了解,接下来我们就开始逐一的深入的学习它们。

指令:ng-app


ng-app指令来标明一个AngularJS应用程序,并通过AngularJS完成自动初始化应用和标记应用根作用域,同时载入和指令内容相关的模块,并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。

引用方法很简单,如下所示:

<div ng-app="" ng-init="name='Hello World'"> </div>

View Code

 

如上引用,一个AngularJS应用程序初始化就完成了并标记了作用域,也就是div元素就是AngularJS应用程序的"所有者",在它里面的指令也就会被Angular编译器所编译、解析了。

指令:ng-init


ng-init指令初始化应用程序数据,也就是为AngularJS应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它,后面我们会介绍有关控制器和模块的知识。

<div ng-app="" ng-init="name='Hello World'"> </div>

 

AngularJS表达式


AngularJS框架的核心功能之一 —— 数据绑定,由两个花括号{{}}组成,可以把数据绑定到HTML,类似Javascript代码片段,可以包含文字、运算符和变量,通常在绑定数据中用到,表达式可以绑定数字、字符串、对象、数组,写在双大括号内:{{ expression }}。

<div ng-app="" ng-init="name='Hello World'"> {{ name }}</div>

 

指令:ng-model


在AngularJS中,只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素,实现model和view的双向绑定。

<div ng-app=""> 请输入任意值:<input type="text" ng-model="name" /> 你输入的为: {{ name }} </div>

View Code

 

指令:ng-bind


指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

<div ng-app="">  请输入一个名字:<input type="text" ng-model="name" />  Hello <span ng-bind="name"></span></div>

 

指令:ng-click


AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

1 <div ng-app="" ng-init="click=false">2   <button ng-click="click= !click">隐藏/显示</button>3   <div ng-hide="click">4     请输入一个名字:<input type="text" ng-model="name" />5     Hello <span ng-bind="name"></span> 6   </div>7 </div>

 

控制器


AngularJS控制器控制AngularJS应用程序的数据,是常规的JavaScript对象。

ng-controller指令就是用来定义应用程序控制器的,并且同时创建了一个新的作用域关联到相应的DOM元素上。

所谓作用域就是一个指向应用模型的对象,它是表达式的执行环境,作用域有层次结构,这个层次和相应的DOM几乎是一样的,作用域能监控表达式和传递事件并且可以从父作用域继承属性。

每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域,因为有一些指令会生成新的子作用域,当新作用域被创建的时候,他们会被当成子作用域添加到父作用域下,这使得作用域会变成一个和相应DOM结构一个的树状结构。

控制器


现在我们就用ng-controller指令来创建一个简单的控制器定义,如下所示:

<div ng-app="" ng-controller="MyController"> 请输入一个名字:<input type="text" ng-model="person.name"> Hello <span ng-bind="person.name"></span> </div>   <script>function MyController($scope) {  $scope.person = {   name: "World"  };}</script>

 

如上所述,我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性,那参数$scope是什么呢,代表什么意思呢。

现在我们就来解答MyController对象参数 —— $scope。

$scope就是把一个DOM元素连结到控制器上的对象,它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象,指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢,就是作为$scope的数据属性关联到DOM上的,并且能在需要调试的时候被获取到。

要明确创建一个$scope对象,我们就要给DOM元素安上一个controller对象,使用的是ng-controller 指令属性。

所有$scope都遵循原型继承,这意味着它们都能访问父$scope们,对任何属性和方法,如果AngularJS在当前$scope上找不到,就会到父$scope上去找,如果在父$scope上也没找到,就会继续向上回溯,一直到$rootScope上,这个$rootScope是最顶级的$scope,它对应着含有 ng-app指令属性的那个DOM元素,也就是说根作用域关联的DOM就是ng-app指令定义的地方。

也就是说,拥有了$scope,我们就可以操作作用域内任何我们想要获取的对象数据。

控制器


控制器不仅声明属性也可以声明方法,如下所示:

当然如果是开发条件的需要,我们也可以将控制器写在外部文件中,那如上示例该怎么做呢,很简单,如下简单引用即可:

  1. <script src="MyController.js"></script>
 1 <div ng-app="" ng-controller="MyController"> 2    Your name: 3   <input type="text" ng-model="username"> 4   <button ng-click="sayHello()">打招呼</button> 5   <hr /> 6    {{greeting}} 7 </div> 8  9 <script>10 function MyController($scope) {11  $scope.username = 'World';12  $scope.sayHello = function() {13   $scope.greeting= 'Hello ' + $scope.username + '!';14  };15 }16 </script>

 

 

开发IT技术导航网站引入文件 

demo演示地址:IT技术导航网     

<script type="text/javascript" src="http://www.cnblogs.com/Public/js/angular-1.5.3/angular.min.js">
<script src="Public/js/page.js"></script>
<script src="Public/js/app.js"></script><script src="Public/js/directive.js"></script> <script src="Public/js/factory.js"></script><script src="Public/js/filter.js"></script><script src="Public/js/indexCtrl.js"></script>

app.js
directive.js
factory.js
filter.js

HTML首页完整代码 

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  5 <title>IT技术导航网</title> 6  <meta name="keywords" content="IT技术网址导航,技术网站,前端资源网,api api文档" /> 7  <meta name="description" content="IT技术导航网,提供最新最常用热门网站,方便技术人员查询资源,了解前沿技术发展趋势。网站提供网址导航,api文档查询,软件下载,书籍推荐等。" /> 8 <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"> 9  <!-- 新 Bootstrap 核心 CSS 文件 --> 10 <link rel="stylesheet" href="Public/css/bootstrap.min.css"> 11 <!-- 可选的Bootstrap主题文件(一般不用引入) --> 12 <link rel="stylesheet" href="Public/css/bootstrap-theme.min.css"> 13 <link rel="stylesheet" href="Public/css/custom.css"> 14 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 15 <script src="Public/js/jquery.min.js"></script> 16 <script src="Public/js/page.js"></script> 17 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  18 <script src="Public/js/bootstrap.min.js"></script> 19 <script src="Public/js/jquery.pin.js"></script> 20 <script src="Public/js/angular-1.5.3/angular.min.js"></script> 21 <script src="Public/js/app.js"></script> 22 <script src="Public/js/directive.js"></script>  23 <script src="Public/js/factory.js"></script> 24 <script src="Public/js/filter.js"></script> 25 <script src="Public/js/indexCtrl.js"></script> 26  27 <style type="text/css"> 28  29 </style> 30 </head> 31 <body ng-app="starter" ng-controller="indexCtrl" ng-init="load()">  32  33 <nav class="navbar navbar-default navbar-fixed-top"> 34  <div class="container"> 35   <div class="navbar-header"> 36   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 37     <span class="sr-only">Toggle navigation</span> 38     <span class="icon-bar"></span> 39     <span class="icon-bar"></span> 40     <span class="icon-bar"></span> 41    </button> 42    <a class="navbar-brand" href="#"> 43     <img alt="Brand" width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAA81BMVEX///9VPnxWPXxWPXxWPXxWPXxWPXxWPXz///9hSYT6+vuFc6BXPn37+vz8+/z9/f2LeqWMe6aOfqiTg6uXiK5bQ4BZQX9iS4VdRYFdRYJfSINuWI5vWY9xXJF0YJR3Y5Z4ZZd5ZZd6Z5h9apq0qcW1qsW1q8a6sMqpnLyrn76tocCvpMGwpMJoUoprVYxeRoJjS4abjLGilLemmbrDutDFvdLPx9nX0eDa1OLb1uPd1+Td2OXe2eXh3Ofj3+nk4Orl4evp5u7u7PLv7fPx7/T08vb08/f19Pf29Pj39vn6+fuEcZ9YP35aQn/8/P1ZQH5fR4PINAOdAAAAB3RSTlMAIWWOw/P002ipnAAAAPhJREFUeF6NldWOhEAUBRvtRsfdfd3d3e3/v2ZPmGSWZNPDqScqqaSBSy4CGJbtSi2ubRkiwXRkBo6ZdJIApeEwoWMIS1JYwuZCW7hc6ApJkgrr+T/eW1V9uKXS5I5GXAjW2VAV9KFfSfgJpk+w4yXhwoqwl5AIGwp4RPgdK3XNHD2ETYiwe6nUa18f5jYSxle4vulw7/EtoCdzvqkPv3bn7M0eYbc7xFPXzqCrRCgH0Hsm/IjgTSb04W0i7EGjz+xw+wR6oZ1MnJ9TWrtToEx+4QfcZJ5X6tnhw+nhvqebdVhZUJX/oFcKvaTotUcvUnY188ue/n38AunzPPE8yg7bAAAAAElFTkSuQmCC"> 44    </a> 45   </div> 46   47   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 48   <ul class="nav navbar-nav"> 49     <li ng-class="{true:'active',false:''}[x.name==defaulthead]" ng-repeat="x in headerdatas"><a href="{{x.href}}" ng-bind="x.name"> </a></li> 50     51   </ul> 52  53   <form class="navbar-form navbar-right" role="search"> 54   <div class="form-group"> 55    <input type="text" class="form-control" ng-model="searchkeys" placeholder="请您输入查询主题"> 56   </div> 57   <button type="submit" class="btn btn-default" ng-click='searchUrl(searchkeys)'>查询</button> 58  </form> 59  60  61   </div> 62  </div> 63 </nav> 64  65 <div class="container sx_header"> 66  67 <div class="row sx_content "> 68  69  <div class="col-md-2 hidden-xs sx_nopadding"> 70  71 <div class="list-group sx_content_bg" id="pinlayer" > 72  <a href="#" ng-click="bindcatelist($index,x.id,x.name,0)" ng-class="{ true: 'list-group-item active', false: 'list-group-item'}[x.name==defaultcate]" ng-repeat="x in categorys" ng-bind="x.name" ></a>  73 </div> 74 </div> 75   76  <div class="col-md-10" >  77 <nav class="navbar navbar-default"> 78  79   <!-- Brand and toggle get grouped for better mobile display --> 80   <div class="navbar-header"> 81    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false"> 82     <span class="sr-only">Toggle navigation</span> 83     <span class="icon-bar"></span> 84     <span class="icon-bar"></span> 85     <span class="icon-bar"></span> 86    </button> 87   88  89  <div class="btn-group sx_btn_bottom"> 90  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 91   {{defaultcate}} <span class="caret"></span> 92  </button> 93  <ul class="dropdown-menu"> 94  <li ng-repeat-start="item in categorys"><a href="#" ng-click="bindcatelist($index,item.id,item.name,0)" ng-bind="item.name" ></a></li> 95 <li ng-repeat-end role="separator" class="divider"></li> 96  </ul> 97 </div> 98  99 100 <div class="btn-group sx_btn_bottom">101  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">102   {{defaulttypename}} <span class="caret"></span>103  </button>104  <ul class="dropdown-menu">105  <li ng-repeat-start="item in urltypedata"><a href="#" ng-click="bindcatelist($index,item.id,item.typename,1)" ng-bind="item.typename" ></a></li>106  <li ng-repeat-end role="separator" class="divider"></li>107  </ul>108 </div>109 110 111 112   </div>113 114 115 116 117   <!-- Collect the nav links, forms, and other content for toggling -->118   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">119    <ul class="nav navbar-nav">120     <li ng-class="{true:'active',false:''}[defaultchildrenCate==item.id]" ng-repeat="item in childrenCates"><a href="#" ng-click="cateDetail(item.id);" ng-bind="item.name"></a></li>121    </ul>122   123   </div>124   <!-- /.navbar-collapse -->125 126 127 128 </nav>129 130 131    <div class="row">132 133     <div class="col-xs-12 col-sm-4 " ng-repeat="item in contentdata">134 135  <div class="thumbnail">136 137   <img src="http://5203.pw/Public/{{item.img}}" alt=""  > 138    <div class="caption">139     <h5>{{item.name}}</h5>140 141     <p class=".hidden-xs" ><span class="label label-info">{{item.urltypeid|furltype}}</span>{{item.description|cutString}} 142     </p>143   <p><a href="{{item.url}}" target="_blank" class="btn btn-primary" role="button">前往</a> </p>144   145    </div>146   </div>147 148   </div>149 150   151  </div>152 153 154 <div class="row"><nav class="text-center" ><ul class="pagination" id="pager" ></ul></nav></div>155 156 157 158 </div>159 160 161 <script type="text/javascript">162 $("#pinlayer").pin({padding: {top:60, bottom: 10}})163 </script>164 165 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1257978107'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1257978107%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>166 167 </body>168 </html>

View Code

 

简单的入门就到这里了希望能够帮到你,IT技术导航网    欢迎大家支持添加自己喜欢的网站~~。 技术交流群 127482131