AngularJs基本特性解析(一)
现在的前端项目中基本上都会用到angularjs框架，之前并不了解这个框架，也是因为最近接手的项目，所以打算好好的学习下它。之前都是搞pc端，现在接手的是移动端的项目，移动端UI框架用的是ionic＋vordova，没有用bootstrap，主要做的是ios+安卓的app界面，ionic这个框架也不太了解，也需要花时间好好熟悉下。angularjs学习小白一枚，欢迎大神指正。
AngularJs是什么？
简单来说，即javascript的一个框架，通过script标签添加到网页中。即我们使用angularjs时，需要引入下面的代码。
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
通常建议把脚本放在<body>元素的底部，作用是：提高网页加载速度。因为html加载不受制于脚本加载。
AngularJs的作用？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
•AngularJS 把应用程序数据绑定到 HTML 元素。
•AngularJS 可以克隆和重复 HTML 元素。
•AngularJS 可以隐藏和显示 HTML 元素。
•AngularJS 可以在 HTML 元素"背后"添加代码。
•AngularJS 支持输入验证。
像现在移动端基本上使用单页面的比较，就是利用angular的路由转换进行的。像我们现在这个项目也是使用的单页面。即在主页面里面，即跳转的页面都在主页面里面进行。截图如下：
AngularJs表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
<!doctype html>
<!-- 标记angularjs处理整个html页并引导应用 -->
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<p>name:{{"ting"+"feng"}}</p>
<p>number:{{5+5}}</p>
<div ng-init="person={name:'tingfeng',age:'13'}">
<p>name:{{person.name}} age:{{person.age}}</p>
</div>
</body>
</html>
AngularJs在html中的应用
主要通过ng-directive扩展html，angularjs指令是以ng作为前缀的html属性，包含有四大特性：mvc，模块化，指令系统（directive），databinding
ng-init:该指令初始化angularjs应用程序变量。比如下面的列子：
<!doctype html> <!-- 标记angularjs处理整个html页并引导应用 --> <html ng-app> <head> <meta charset="utf-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-init="name='tingfeng'"> <p>name is:<span ng-bind="name"></span></p> </div> </body> </html>
ng-app:该指令表示定义一个angularjs应用程序。通常放在html后面，也可以在局部使用ng-app指令，比如<div ng-app>则angularjs脚本仅在该div中运行,即表明从此处开始，所有内容均为angularjs进行管理。
ng-model:该指令是指把元素值（比如输入框的值）绑定到应用程序中。
ng-bind：该指令是把应用程序数据绑定到html视图中。使用相应的指令，即可利用angularjs操作html页面。具体怎么使用，我们来看看代码。
此时利用ng-model绑定到setname模型变量上，当在输入框中输入值时，相应的setname也会变化。可自行贴码测试。
关于$scope解释
$scope是什么？有什么作用？如何使用它？
简单来说，scope是一个pojo（plainoldjavascriptobject）,类似于一个对象，有属性和方法， scope是一个pojo（plainoldjavascriptobject）,类似于一个对象，有属性和方法，scope提供了watch()和 watch()和apply()工具方法。angularjs的mvc全部借助于$scope进行的。
特性：1.是表达式的执行环境（或者作用域）
2.scope是一个树型结构，与dom标签平行，其上含有一个 scope是一个树型结构，与dom标签平行，其上含有一个rootscope处于最顶层。
3.scope会继承父 scope会继承父rootscope的属性和方法。
4.$scope可以传播事件，类似于dom，可以向上传播也可以向下。
5.$scope不仅是mvc的基础，也是后面实现双向绑定的基础。
AngularJs的组成部分
模板：即编写的html和css的文件，展现应用的视图。angularjs可以在html中构建自己的html标记！
控制器:与ajax不同，不需要另外编写侦听器或dom控制器，因为它已经内置到angularjs中。 好处：便于编写，测试，维护和理解。
模型数据：模型是从angularjs做用域对象的属性引申的。模型的数据可能是js对象，数组或基本类型，但都属于angularjs作用域对象。
如何理解angularjs中的作用域？
即一个作用域可以视作模板，模型和控制器协同工作的粘接器，angularjs使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但他们两者确实时同步的！任何对于模型的更改都会即时反映到视图上，任何视图的更改都会被立刻体现在模型中。
视图：在angularjs中，一个视图是模型通过html模板渲染之后的映射。即不论模型什么时候发生变化，angularjs会实时更新结合点，随之更新视图。
还是贴码来看，更加直观！
<!doctype html>
<html ng-app="HelloAngular">
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//模块化
var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular
myModule.controller("helloAngular", ['$scope',
function HelloAngular($scope) {
$scope.value = {
name: 'jiangting'
};
}
]);
</script>
</head>
<body>
<!-- mvc看angular-->
<div ng-controller="helloAngular"> －－控制器为helloAngular
<p>{{value.name}},hello!</p>
</div>
<!-- angular 模块化 -->
</body>
</html>
我们来看看controller的应用，即控制器，即控制器通过操作数据，将其进行绑定，展现在html页面上。
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。我们用上面的列子来看：
AngularJS模块定义应用：
var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular
angularjs控制器控制应用：
myModule.controller("helloAngular", ['$scope',
function HelloAngular($scope) {
$scope.value = {
name: 'jiangting'
};
}
]);
了解前端mvc
关于controller特性：
1.不要试图去服用controller，一个控制器一般只负责一个小块视图
2.不要直接在controller中操作dom，这不是其职责
3.不要在controller里面做数据过滤的操作，ng有filter服务
4.不要在controller里面做数据格式化，ng有很好用的表单控件
5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过 filter服务4.不要在controller里面做数据格式化，ng有很好用的表单控件5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过scope进行调用
下面看下如何自定义指令系统，代码如下：
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//指令系统
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'E',
template: '<div>Hi everyone!</div>', --这里我们插入一段html标签
replace: true
}
});
</script>
</head>
<body>
<hello></hello>
</body>
</html>
directive中，后面返回有三个参数，其中template中指所插入的html标签。现在我门自己来写一段html代码，看看如何将其变为angularjs的写法。
原静态html代码如下：
<ul> <li> <span>new1</span> <p>just a test page1</p> </li> <li> <span>new2</span> <p>just a test page2</p> </li> </ul>
将其改版为angularjs的写法如下：
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script>
//$scope为控制器的作用域，
//angularjs作用域：可以视作模板，当应用启动之后，会有一个根作用域被创建出来，而控制器的作用域是根作用域的一个典型后继。
function newsCtrl($scope){
$scope.news=[
{"content":"new1",
"introduce":"just a test page1"},
{"content":"new2",
"introduce":"just a test page2"}
];
$scope.phones={
length:"4"
// 单个的属性不能加分号，多个属性用逗号分隔
};
}
</script>
</head>
<body ng-controller="newsCtrl">
<ul>
<li ng-repeat="new in news">
{{new.content}}
<p>{{new.introduce}}</p>
</li>
</ul>
</body>
</html>
以上所述是小编给大家介绍的AngularJs基本特性解析(一)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
浅谈angularJS中的事件
什么是事件 •如同浏览器响应浏览器层的事件,比如鼠标点击.获得焦点,angular应用也可以响应angular事件 •angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件 事件传播 因为作用域是有层次的,所以我们可以在作用域链上传递事件: •使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知 $emit()方法带有两个参数: name 要发出的事件的名称 args 一个参数
-
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat
-
AngularJS实用开发技巧(推荐)
一.开端 Angular JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与jQuery 配合良好. 二.基础原则了解 ①angular的一些入门了解 一.基础知识 1.angular放弃了IE8 2.四大核心分别是mvc.模块化.指令系统.双向数据绑定 二.一些原则 1.不要复用controller,一个控制器一般只负责一小块视图. 2.不要在controller里面操作
-
AngularJS入门教程中SQL实例详解
AngularJS SQL 在前面章节中的代码也可以用于读取数据库中的数据. 使用 PHP 从 MySQL 中获取数据 AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></s
-
AngularJS入门教程之 XMLHttpRequest实例讲解
AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件: http://www.runoob.com/try/angularjs/data/Customers_JSON.php { "records": [ { "Name" : "Alfreds Futterkiste", "City"
-
AngularJS 中的事件详解
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.
-
AngularJS 入门教程之HTML DOM实例详解
AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bd
-
AngularJS入门教程之表格实例详解
AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&g
-
AngularJS入门教程之Select(选择框)详解
AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://a
-
AngularJs基本特性解析(一)
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下.angularjs学习小白一枚,欢迎大神指正. AngularJs是什么? 简单来说,即javascript的一个框架,通过script标签添加到网页中.即我们使用an
-
Java synchronized关键字使用方式及特性解析
这篇文章主要介绍了Java synchronized关键字使用方式及特性解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 synchronized 关键字是实现锁的一种方式,是在jvm层面实现的非公平锁,以下是使用synchronized的四种方式 synchronized 特性: 1.非公平锁 2.可重入性 1.作用在方法上,保证了访问同一个对象的同一个方法的线程同步 public synchronized void testFun(Str
-
angularjs 源码解析之scope
简介 在ng的生态中scope处于一个核心的地位,ng对外宣称的双向绑定的底层其实就是scope实现的,本章主要对scope的watch机制.继承性以及事件的实现作下分析. 监听 1. $watch 1.1 使用 // $watch: function(watchExp, listener, objectEquality) var unwatch = $scope.$watch('aa', function () {}, isEqual); 使用过angular的会经常这上面这样的代码,俗称"手
-
angularjs 源码解析之injector
简介 injector是用来做参数自动注入的,例如 function fn ($http, $scope, aService) { } ng在运行时会把$http, $scope, aService 自动作为参数传入进行执行. 其实很容易想明白,injector做了两件事 缓存那些service,以后作为参数注入 分析参数列表,找到需要的参数注入 下面源码分析如何实现上面两件事情. 结构 createInjector -> createInternalInjector return: inst
-
110.iOS10新特性适配教程XCode8新特性解析
iOS10 新特性 SiriKit SiriKit的功能非常强大,支持音频.视频.消息发送接收.搜索照片.预订行程.管理锻炼等等.在用到此服务时,siri会发送Intent对象,里面包括用户的请求和各种数据,可以对这个intent处理选择适当的响应. 这个功能主要是看这两个头文件(#import Proactive Suggestions 系统预先建议 背景就是iOS9的时候系统给予的主动建议会通过:Spolight搜索,Safari搜索,Handoff,或者siri建议. 在iOS10之后新增
-
java 对象实例化过程中的多态特性解析
目录 java 对象实例化过程中的多态特性 通过案例说明 通过上述代码 java对象的三个特性(封装.继承.多态) 1.封装 2.继承 3.多态 java 对象实例化过程中的多态特性 执行对象实例化过程中遵循多态特性 ==> 调用的方法都是实例化的子类中的重写方法,只有明确调用了super.xxx关键词或者是子类中没有该方法时,才会去调用父类相同的同名方法. 通过案例说明 package com.njau.test1; class Test { public static void main(S
-
AngularJS入门教程之Hello World!
开始学习AngularJS的一个好方法是创建经典应用程序"Hello World!": 1.使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. 2.将下面的源代码复制到您的HTML文件. 3.在web浏览器中打开这个HTML文件. 源代码: 复制代码 代码如下: <!doctype html> <html ng-app> <head> <script src="http://c
-
分享使用AngularJS创建应用的5个框架
如果你计划使用AngularJS创建你的Web应用,那现在就开始吧.你不需要有任何的恐惧和担心,因为现在有很多的框架都可以很好地支持AngularJS.这些框架都有事先安装的Web组件,使用它们可以帮助你快速进行项目开发.这里列举5个这样的框架,帮助你使用AngularJS构建Web应用. 1. AngularUI Bootstrap 这一框架是基于目前非常流行的前端框架Bootstrap的,它包含了一系列的Bootstrap组件,比如Carousel.Alert.Collapse.Rating
-
AngularJs入门教程之环境搭建+创建应用示例
本文简单讲述了AngularJs环境搭建+创建应用的方法.分享给大家供大家参考,具体如下: 概述 AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单.更高效.它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致.本系列文章將以实际的案例简单的介绍AngularJs的特性和用
-
AngularJS实现全选反选功能
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en&quo