AngularJS注入依赖路由总结
| 属性 |
描述
|
|
$dirty
|
表单有填写记录
|
| $valid | 字段内容是合法的 |
|
$invalid
|
字段内容是非法的 |
|
$pristine
|
表单没有填写记录 |
什么事依赖注入？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>void</title>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
</head>
<body ng-app="myApp"> <div ng-controller="myCtrl">
<button ng-click="count=count+1">点击加一</button><button ng-click="show_pink_div()">点击/隐藏出现一个粉红色的div</button>
<p>{{count}}</p>
<div class="pink" ng-hide="toggle"></div>
</div> <div ng-controller="secondCtrl">
{{name}}
<div runoob-directive></div>
</div> <div ng-controller="valueCtrl">
{{result}}
</div> <h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/phone">手机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
</body>
</html>
<script type="text/javascript">
var app=angular.module("myApp",['ngRoute']);
app.controller("myCtrl",function ($scope) {
$scope.count=0;
$scope.toggle=false;
$scope.show_pink_div=function(){
$scope.toggle=!$scope.toggle;
}
});
app.controller("secondCtrl",function ($scope) {
$scope.name="name";
});
app.directive("runoobDirective",function () {
return {
template : "我在指令构造器中创建"
};
}); //创建 value 对象 “defaultInput” 并传递数据
app.value("defaultInput",5); //将 “defaultInput” 注入到控制器
app.controller("valueCtrl",function ($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number); $scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
}); //在 service 中注入 factory “MathService”
app.service("CalcService",function (MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
}); //创建 factory “MathService” 用于两个数的乘积
app.factory("MathService",function () {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
app.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.when('/phone',{template:'这是手机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
自己很长时间没有弄ng了，好好看了一遍。真是书读百遍，其义自现。
AngularJS注入依赖路由总结的更多相关文章
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- AngularJS DI(依赖注入)实现推测
AngularJS DI(依赖注入) http://www.cnblogs.com/whitewolf/archive/2012/09/11/2680659.html 回到angularjs:在框架中 ...
- [Angularjs]视图和路由（二）
写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...
- 前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
- 前端MVC学习笔记（三）——AngularJS服务、路由、内置API、jQueryLite
一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...
- AngularJS 的嵌套路由 UI-Router
AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...
- [Angularjs]视图和路由（四）
写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
- [Angularjs]视图和路由（三）
写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
- Ⅲ.AngularJS的点点滴滴-- 路由
路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...
随机推荐
- 天津Uber优步司机奖励政策（12月21日到12月27日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- [python3.x]win 7 下Pyinstaller库的安装与使用---探索之路
一.下载安装包 cmd进入命令行,执行命令:pip install https://github.com/pyinstaller/pyinstaller/archive/develop.tar.gz ...
- spring源码-开篇
一.写博客也有一段时间了,感觉东西越来越多了,但是自己掌握的东西越来越少了,很多时候自己也在想.学那么多东西,到头来知道的东西越来越少了.是不是很奇怪,其实一点都不奇怪. 我最近发现了一个很大的问题, ...
- Linux命令非常全
最近都在和Linux打交道,感觉还不错.这也是很多人喜欢linux的原因,比较短小但却功能强大.我将我了解到的命令列举一下,仅供大家参考: 系统信息 arch 显示机器的处理器架构(1) uname ...
- “腾讯WeTest助力《龙珠直播》盘点APP质量问题”
WeTest 导读 据调查数据表明,移动端用户在使用APP时如果遇到了闪退等兼容性问题,20%的用户会选择直接卸载. 2016年,被称为中国直播元年.随着各类直播平台的疯狂生长与扩散,直播产品在内容, ...
- hdu1596find the safest road(floyd)
find the safest road Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- 180602-nginx多域名配置
文章链接:https://liuyueyi.github.io/hexblog/2018/06/02/180602-nginx多域名配置/ nginx多域名配置 原来的域名过期了,重新买了一个hhui ...
- 利用爬虫、SMTP和树莓派3B发送邮件(爬取墨迹天气预报信息)
-----------------------------------------学无止境----------------------------------------- 前言:大家好,欢迎来到誉雪 ...
- 372. Delete Node in a Linked List【LintCode java】
Description Implement an algorithm to delete a node in the middle of a singly linked list, given onl ...
- windows store无法登陆的问题解决方案
Windows应用商店或商店Apps无法打开或闪退的可选方法 (仅用于10565之前的Windows 10版本) 右键点击任务栏,选择"属性",切换到"导航"选 ...