AngularJS服务和路由
colnplie
网页加载的出现一次
link
元素每次改变的时候
**$watch**
监听列表
$scope.$watch("name",function(newVal,oldVal)){
console.log(newVal+""+oldVal)
新的值 旧的值
}
$digest
循环对象
在 $watch列表发生改变的时候,会发生循环。
循环的次数不能超过10次,否则,会程序发生错误!
$apply
会把$digest放在angular上下文里面(angular Canten)
作用域
子控制器范围可以找到父控制器的值,父控制无法找到子控制的值
原始类型
赋值的字符串或者数值叫做原始数据类型
数值、字符串、布尔值
引用类型
对象引用类型
angular服务
就是对外提供某个特定的功能。是一个独立的模块。
angular.module("myApp-service",[])
.factory("ajax",["$http",function(http){
return function(){
}
}]);
.factory("ajax",["$http",function(http)
ajax:是定义的服务的名字。
$http:是表示要使用到的angular的ajax。
angular.module("myApp-controller",[])
.controller("myController",function($scope,ajax) {
ajax({
});
})
下面的子模块就能够实现,使用自定义服务里面的功能。
angular路由
1、用iframe
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
2、ajax
jQuery load() 方法是简单但强大的 AJAX 方法。
$("#div1").load("demo_test.txt");
3、路由
同样实现无刷新的视图切换。
导入js文件:
angular-route.min.js
首先要定义主模块:
angular.module("mainApp",["ngRoute","mainApp.controller"])
ngRoute是angular里面的内置模块。
when
.config(["$routeProvider",function(provider){
provider.when("/p1",{templateUrl:"page1.html"});
provider.when("/p2",{templateUrl:"page2.html"});
网页
<ul>
<li><a href="#p1">页面1</a></li>
<li><a href="#p2">页面2</a></li>
</ul>
when //什么发生
通过点击li标签,来实现网页的切换。
otherwise
provider.otherwise({
redirectTo:"p2"
});
可用实现网页在加载的时候,出现的默认的网页。
AngularJS服务和路由的更多相关文章
- 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
- 前端MVC学习笔记(三)——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS学习---Routing(路由) & Multiple Views(多个视图) step 7
1.切换分支到step7,并启动项目 git checkout step- npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代 ...
- [Angularjs]视图和路由(四)
写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
- [Angularjs]视图和路由(二)
写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...
- [Angularjs]视图和路由(三)
写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
- Ⅲ.AngularJS的点点滴滴-- 路由
路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...
- AngularJS 的嵌套路由 UI-Router
AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...
随机推荐
- ANSJ中文分词使用方法
一.前言 之前做solr索引的时候就使用了ANSJ进行中文分词,用着挺好,然而当时没有写博客记录的习惯.最近又尝试了好几种JAVA下的中文分词库,个人感觉还是ANSJ好用,在这里简单总结之. 二.什么 ...
- 也许是目前实现最好的js模拟滚动插件
finger-mover 是一个集成 Fingerd(移动端以手指为单位的事件管理方案) 和 Moved(微型运动方案) 为一体的移动端动效平台,finger-mover 本身并不能为你做什么,但是附 ...
- 第七篇:数据预处理(四) - 数据归约(PCA/EFA为例)
前言 这部分也许是数据预处理最为关键的一个阶段. 如何对数据降维是一个很有挑战,很有深度的话题,很多理论书本均有详细深入的讲解分析. 本文仅介绍主成分分析法(PCA)和探索性因子分析法(EFA),并给 ...
- 006开源O/R映射框架内容回顾
Hibernate是一个O/R映射框架(也称为ORM) 从ORM词来看,O---Object(对象模型):R--- Relational(关联模型),可以做对象和关联的一种映射,当然这只是部分功能,一 ...
- CentOS7下配置网络yum源(附带下载地址)
一.查看外网是否通畅 配置网络yum源(需要保证外网开通,我这里是使用网易163提供开源镜像站) 二.下载repo文件 cd /etc/yum.repos.dwget http://mirrors.1 ...
- 元类(meta class)
元类(meta class),这个名字想必很多人都听过,网上也有很多关于元类的介绍,今天我就按照自己这两天的理解来简单探讨一下这个玩意,有误之处还望指出. 首先,下载objc源码,源码地址:https ...
- THE R QGRAPH PACKAGE: USING R TO VISUALIZE COMPLEX RELATIONSHIPS AMONG VARIABLES IN A LARGE DATASET, PART ONE
The R qgraph Package: Using R to Visualize Complex Relationships Among Variables in a Large Dataset, ...
- JS简单实现自定义右键菜单
RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...
- 由Find All References引发的思考。,
今天在研究C#代码问题的时候遇到了一个Visual Studio的小问题.在Visual Studio 2013中,使用Find All References功能不能找到同一类型不同版本的所有引用,具 ...
- JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)
写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...