AngularJs 学习 （一）
最近学习了一下关于AngularJs的知识，发现和Vue还是有非常相似的东西。所以对于学过Vue的自己来说，还是比较好理解的
特点：双向数据绑定，单页面应用
控制器：
AngularJs控制器可以控制网页上的DOM元素，也可以响应网页上的单击事件，这一切源于$scope,它是模型(ng-model)于视图(View)
的数据通道。其中$scope起到了一个数据传递作用。
而要实现控制器必须在DOM元素上加上ng-controller( Angular的一个指令), Controller于View是绑定在一起的。当Angluar加载时，它就会加载
读取ng-controller的参数。
模块：
AngularJs的一个非常重要的概念--Module,对于一个Angular应用来说，是由多个模块组成的。同时模块是存在可复用性，可在多个地方被调用。
模板：
这个地方是Angular比较重要的地方，（同时Vue中也是有的），对于一个项目模板是一个很重要的部分。它能动态的展示不同的视图（页面）。其中
要是使用模块这个功能就必须用到ng-template这个指令;同时使用模块这个一般和ng-view(管理视图）的指令一起使用
路由：
路由是什么，就是我们在应用上要实现页面的跳转，要实现这样的功能就需要使用路由来进行管理。在这里说明一下AngularJs1.2版本之后ngRoute被单独剥离出来，
需要进行重新引用。AngularJS的$route所提供的$routeProvider声明路由
工厂方法：
这个和java中的工厂方法有点类似，毕竟设计模式这样。就是如果一个对象$scope.xxx要在多个地方调用，就需要去把这个对象个做成单例对象。而在AngularJs里面实现
这种最简单的方式就是调用factory();通过factory()来返回对应的属性方法。
过滤器：
格式 {{ name | xx}} xx: 过滤器得实现 xx一般有（ eg: filter: param), 如果表示否定要在参数(param)前加上！
控制器之间的传值：
从上面已经知道$scope是局部作用域，这样的话就不怎么利于控制器之间的传值。当然前面也提到通过工厂方法也可以实现，这就在Angularjs之中有这样的一个概念：
单例服务是AngularJS本身支持的数据和代码共享方式。因为是单例的，所有的控制器访问的便是同一份数据，从而可以很轻松地实现控制器之间地切换。
AngularJs数据的传输本身就提供了多种通信机制：
- 作用域继承：利用子控制器继承父控制器上的数据
- 注入服务： 把需要功效的数据注册成为一个服务（Service), 在需要的控制器中添加依赖注入
- 基于事件： 利用AngularJS的事件机制， 使用$on $emit 和 $broadcast;
其实之前的工厂方法就是基于注入服务实现的，接下来要介绍的一种是基于作用域继承的。$rootScope : ng-app 为AngularJS创建的作用域
$watch: 监控数据模型的变化
$scope.$watch(watchFn, watchAction, deepWatch);
watchFn: 被检测的对象
watchAction: 函数表达式， 发生变化时候被调用，会接收新旧两个值
deepWatch: 如果设置为true， 这个可选的布尔型参数将命令AngularJS去检测被监控的对象的每个数据是否发生变化。一般少用，集合多了，容易造成负载严重
提供一个案例来供分析：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title> Hello World in AngularJs </title>
<script src="js/angular.min.js"></script> <script src="js/angular-route.js"></script> <!--
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
c'f
--> </head>
<body>
<div ng-view></div>
<!-- 创建模板 -->
<script type="text/ng-template" id="/todos.html">
Search: <input type="text" ng-model="search">
<ul>
<li ng-repeat="todo in todos | filter: search">
<input type="checkbox" ng-model="todo.completed"> <a href="#/{{ $index }}"> {{ todo.name }}</a>
</li>
</ul>
</script>
<script type="text/ng-template" id="/todoDetails.html">
<h1>{{ todo.name }}</h1>
completed: <input type="checkbox" ng-model="todo.completed">
note: <textarea>{{todo.note}} </textarea>
</script> <script>
var app = angular.module('myApp', ['ngRoute']); // 创建工厂方法 实例一个公用对象 注入Todos服务
app.factory('Todos', function () {
return [
{ name: '掌握 HTML/CSS/Javascript', completed: true },
{ name: '学习 AngularJS', completed: false },
{ name: '熟悉 NodeJS ', completed: true },
{ name: '接触 ExpressJS', completed: false },
{ name: '搭建 MongoDB database', completed: false },
]
})
// 创建路由
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/todos.html',
controller: 'TodoController'
})
.when('/:id', {
templateUrl: '/todoDetails.html',
controller: 'TodoDetailContrl'
})
}]) // 创建控制器
app.controller('TodoController', ['$rootScope', '$scope', 'Todos', '$filter', function($rootScope, $scope, Todos, $filter) {
$scope.todos = Todos;
$scope.$watch('search', function() {
// 根作用域 相当全局作用域
$rootScope.data = $filter('filter')($scope.todos, $scope.search);
})
}]) app.controller('TodoDetailContrl', ['$rootScope', '$scope', '$routeParams', 'Todos', function($rootScope, $scope, $routeParams, Todos) {
$scope.todo = $rootScope.data[$routeParams.id];
}])
</script>
</body>
</html>
AngularJs 学习 （一）的更多相关文章
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结
karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...
- AngularJs学习总结－了解基本特性（－）
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
随机推荐
- 大数据入门第八天——MapReduce详解（三）MR的shuffer、combiner与Yarn集群分析
/mr的combiner /mr的排序 /mr的shuffle /mr与yarn /mr运行模式 /mr实现join /mr全局图 /mr的压缩 今日提纲 一.流量汇总排序的实现 1.需求 对日志数据 ...
- struts2第二天——数据操作
先介绍一下大致内容: 大致内容: 结果页面配置 action获取表单提交数据 提供获取表单数据的方式(封装数据) 表单数据封装到集合中 表达式封装和模型驱动封装比较 一.结果页面配置: result标 ...
- JavaWeb总结（四）
使用Servlet发送服务器端响应信息 Servlet API中定义一个专门的接口类javax.servlet.http.HttpServletResponse用于创建HTTP响应,包括HTTP协议的 ...
- python线程的使用模式
为了解决阻塞(如I/O)问题,我们需要对程序进行并发设计. 本文将通过将线程和队列 结合在一起,轻松地在 Python 中完成线程编程,创建一些简单但有效的线程使用模式. 一.使用线程 先看一个线程不 ...
- CF 1041 F. Ray in the tube
F. Ray in the tube 链接 题意: 有两条平行于x轴的直线A,B,每条直线上的某些位置有传感器.你需要确定A,B轴上任意两个整点位置$x_a$,$x_b$,使得一条光线沿$x_a→x_ ...
- linux提权 searchsploit 使用规范
使用 searchsploit 时,要把整个控制台最大化,这样才能显示完整的漏洞信息. 查看漏洞帮助文件:
- Java虚拟机笔记（四）：垃圾收集器
前言 前一篇文章介绍了内存的垃圾收集算法,现在介绍下内存回收的具体实现--垃圾收集器. 由于Java虚拟机规范中对垃圾收集器应该如何实现并没有任何规定,因此不同的厂商,不同版本的虚拟机所提供的垃圾收集 ...
- AJAX 过程总结
AJAX 工作过程:(1) 创建对象(需要处理兼容性问题) 创建XMLHttpRequest对象(创建一个异步调用对象) <!-- ie6以上 --> var xhr = new XMLH ...
- linux for 循环的小应用
[root@localhost ~]# mkdir -pv /home/data{1..5} # 创建多个目录 以下两种方法类似. for i in {1..5};do echo "&l ...
- Python中的注释
1.1 注释的目的 通过用自己熟悉的语言,在程序中对某些代码进行标注说明,这就是注释的作用,能够大大增强程序的可读性. 1.2 注释的分类 1.2.1 单行注释 以#开头,#右边的所有东西当做说明,而 ...