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>

如上引用，一个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>

指令：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>

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

时间： 2024-10-08 08:15:47

Angular快速入门篇的相关文章

Angular 快速入门

Angular 快速入门 AngularJS 官方网址 Angular:https://www.angular.cn/ Angular官网:https://angularjs.org/ AngularJS 1.X 的困境 饱受诟病的性能问题. 落后当前web的发展理念(如组件开发方式) 对手机端支持不够友好 Angular 2.x 特性 16年5月正式发布. 2版本取消了JS的叫法,直接叫做 Angular 2版本不能兼容1版本的代码. 移除 controller + $scope 设计,改用组

Elasticsearch顶尖高手系列-快速入门篇

01.课程介绍02.用大白话告诉你什么是Elasticsearch03.Elasticsearch的功能.适用场景以及特点介绍04.手工画图剖析Elasticsearch核心概念:NRT.索引.分片.副本等05.在windows上安装和启动Elasticseach06.快速入门案例实战之电商网站商品管理:集群健康检查,文档CRUD07.快速入门案例实战之电商网站商品管理:多种搜索方式08.快速入门案例实战之电商网站商品管理:嵌套聚合,下钻分析,聚合分析09.手工画图剖析Elasticsearch

gulp系列之快速入门篇

快速开始 如果您以前已经全局安装了gulp,npm rm --global gulp 请先按照以下说明运行.有关更多信息,请阅读此Sip. 检查节点,npm和npx node --version npm --version npx --version 如果尚未安装,请按照此处的说明进行操作. 安装gulp命令行实用程序 npm install --global gulp-cli 创建一个项目目录并浏览 npx mkdirp my-project cd my-project 在您的项目目录中创建p

JVM基础快速入门篇

Java是一门可以跨平台的语言,但是Java本身是不可以实现跨平台的,需要JVM实现跨平台.javac编译好后的class文件,在Windows.Linux.Mac等系统上,只要该系统安装对应的Java虚拟机,class文件都可以运行.达到”一次编译,到处运行”的效果. 一.JVM是什么? 而JVM到底是什么呢?引用百度百科对JVM的介绍: JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿

夺命雷公狗ThinkPHP项目之----商城5快速入门

本章是快速入门篇,有基础可直接跳过: 1.创建一个数据库名叫shopp的,然后穿件一张表 #创建用户表 create table user( id int unsigned not null auto_increment primary key comment '用户编号', username varchar(50) not null default '' comment '用户名', email varchar(50) not null default '' comment '电子邮箱', p

Elasticsearch快速入门案例

写在前面的话:读书破万卷,编码如有神-------------------------------------------------------------------- 参考内容: <Elasticsearch顶尖高手系列-快速入门篇>,中华石杉 -------------------------------------------------------------------- 主要内容包括: es的document数据格式和数据库的关系型数据格式的区别 简单的集群管理 电商网站商品管

【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）

[第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 表单身份验证(Forms Authentication

Python学习基础篇第一篇——快速入门(适合初学者)

一.Python学习基础篇第一篇--(快速入门) 建议从Python2.7开始学习,Python2.7可以支持扩展大量的第三方类库,是目前比较成熟的版本 编写代码的软件推荐将python自带的IDLE和PyCharm集成IDE结合起来使用 1.1 Python命令行 Python命令行将以 >>> 开始,比如 >>>print 'Hello World!' 对于验证简单的命令可以在python自带的IDLE中完成  1.2 在Python自带的IDLE写一段小程序 在所

【第二篇】ASP.NET MVC快速入门之数据注解（MVC5+EF6）

目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 数据库连接字符串 上一篇文章中,我们使用MVC的