参考:
《angularjs实战》
model
显式与隐式model的定义
<body>
<div ng-controller="c5_1">
<!--显式-->
<div class="show">{{name}}</div>
<!--隐式:ng-model-->
<input ng-model="score" value="95"/>
<div class="show">{{score}}</div>
<input ng-model="num"/>
<div class="show">{{num}}</div>
</div>
<script type="text/javascript">
var a5_1 = angular.module('a5_1', []);
a5_1.controller('c5_1', ['$scope', function ($scope) {
$scope.name = "张三";
$scope.num = "2"
}]);
</script>
</body>
model对象的遍历
<body>
<div ng-controller="c5_2">
<p ng-repeat=" stu in data" class="show">
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
</p>
</div>
<script type="text/javascript">
var a5_2 = angular.module('a5_2', []);
a5_2.controller('c5_2', ['$scope', function ($scope) {
$scope.data = [
{name: "张明明", sex: "女"},
{name: "李清思", sex: "女"},
{name: "刘小华", sex: "男"},
{name: "陈忠忠", sex: "男"}
];
}]);
</script>
</body>
controller
控制器的属性和方法
<body>
<div ng-controller="c5_3">
<button ng-click="changeA()">李四</button>
<button ng-click="changeB()">王二</button>
<p class="show">我的名字叫:{{name}}</p>
</div>
<script type="text/javascript">
var a5_3 = angular.module('a5_3', []);
a5_3.controller('c5_3', function ($scope) {
$scope.name = '张三';
$scope.changeA = function () {
$scope.name = '李四';
}
$scope.changeB = function () {
$scope.name = '王二';
}
});
</script>
</body>
控制器方法中的参数
<body>
<div ng-controller="c5_4">
<div class="show">
<input ng-model="a" value="0"/><!--ng-model传递输入域的值到程序中-->
<span>{{type}}</span><!--表达式把程序中的值显示在HTML中-->
<input ng-model="b" value="0"/>
<span>=</span>
<span class="show">{{result}}</span>
</div>
<div class="show">
<button ng-click="change(1)">加法</button>
<!--1为true(非零)-->
<button ng-click="change(0)">乘法</button>
<!--0为false-->
</div>
</div>
<script type="text/javascript">
var a5_4 = angular.module('a5_4', []);
a5_4.controller('c5_4', ['$scope', function ($scope) {
$scope.type = "+";
$scope.change = function (t) {
if (t) {
$scope.type = "+";
$scope.result = parseInt($scope.a)
+ parseInt($scope.b);
} else {
$scope.type = "*";
$scope.result = $scope.a * $scope.b;
}
}
}]);
</script>
</body>
控制器中属性和方法的继承
<body>
<div ng-controller="c5_5">
<!--父级作用域无法访问子级作用域下控制器的属性和方法-->
<div class="show">
{{name_a+"/"+name_b+"/"+name_c+"/"+score}}
<!--显示结果为:张三///60-->
</div>
<!--子级作用域可以访问父级作用域下控制器的属性和方法,
但相同属性名,子级会复写父级-->
<div ng-controller="c5_5_1">
<div class="show">
{{name_a+"/"+name_b+"/"+name_c+"/"+score}}
<!--显示结果为:张三/李四//70-->
</div>
<!--子级作用域可以访问父级作用域下控制器的属性和方法,
但相同属性名,子级会复写父级-->
<div ng-controller="c5_5_1_1">
<div class="show">
{{name_a+"/"+name_b+"/"+name_c+"/"+score}}
<!--显示结果为:张三/李四/王二/80-->
</div>
</div>
</div>
</div>
<script type="text/javascript">
var a5_5 = angular.module('a5_5', []);
a5_5.controller('c5_5', ['$scope', function ($scope) {
$scope.name_a = "张三";
$scope.score = 60;
}]);
a5_5.controller('c5_5_1', ['$scope', function ($scope) {
$scope.name_b = "李四";
$scope.score = 70;
}]);
a5_5.controller('c5_5_1_1', ['$scope', function ($scope) {
$scope.name_c = "王二";
$scope.score = 80;
}]);
</script>
</body>
view
View组件中的模板切换:需要路由
<!doctype html>
<html ng-app="a5_6">
<head>
<title>View组件中的模板切换</title>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.show {
background-color: #ccc;
padding: 8px;
width: 260px;
margin: 10px 0px;
}
</style>
</head>
<body>
<div>
<a href="#/">首页</a> |
<a href="#/book">图书</a> |
<a href="#/game">游戏</a>
</div>
<div ng-view></div>
<script type="text/javascript">
var a5_6 = angular.module('a5_6', ['ngRoute']);
a5_6.controller('a5_6_1', ['$scope', function ($scope) {
$scope.title = "这是首页";
}]);
a5_6.controller('a5_6_2', ['$scope', function ($scope) {
$scope.title = "这是图书页";
}]);
a5_6.controller('a5_6_3', ['$scope', function ($scope) {
$scope.title = "这是游戏页";
}]);
a5_6.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'a5_6_1',
template: "<div class='show'>{{title}}</div>"
})
.when('/book', {
controller: 'a5_6_2',
template: "<div class='show'>{{title}}</div>"
})
.when('/game', {
controller: 'a5_6_3',
template: "<div class='show'>{{title}}</div>"
})
.otherwise({
redirectTo: '/'
});
}]);
</script>
</body>
</html>
在切换视图模板时传参数,需要路由
例子一:
<!doctype html>
<html ng-app="a5_7">
<head>
<title>在切换视图模板时传参数</title>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
<style type="text/css">
body {
font-size: 13px;
}
.show {
background-color: #ccc;
padding: 8px;
width: 260px;
margin: 10px 0px;
}
</style>
</head>
<body>
<div ng-view></div>
<script type="text/javascript">
var a5_7 = angular.module('a5_7', ['ngRoute']);
a5_7.controller('c5_7_1', ['$scope', function ($scope) {
$scope.students = students;
}]);
a5_7.controller('c5_7_2', function ($scope, $routeParams) {
for (var i = 0; i < students.length; i++) {
if (students[i].stuId == $routeParams.id) {
$scope.student = students[i];
break;
}
}
});
a5_7.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'c5_7_1',
templateUrl: "5-7-1.html"
})
.when('/view/:id', {
controller: 'c5_7_2',
templateUrl: "5-7-2.html",
publicAccess: true
})
.otherwise({
redirectTo: '/'
});
}]);
var students = [
{stuId: 1000, name: "张明明", sex: "女", score: 60},
{stuId: 1001, name: "李清思", sex: "女", score: 80},
{stuId: 1002, name: "刘小华", sex: "男", score: 90},
{stuId: 1003, name: "陈忠忠", sex: "男", score: 70}
];
</script>
</body>
</html>
5-7-1.html
<div ng-repeat="stu in students" class="show">
<a href="#view/{{stu.stuId}}">{{stu.name}}</a>
</div>
<!--
http://localhost:63342/slnAngularsrccode/Ch5/5-7.html?_ijt=jtuu2t0uspe1dg8in20ipvsg8j#/:主界面
http://localhost:63342/slnAngularsrccode/Ch5/5-7.html?_ijt=jtuu2t0uspe1dg8in20ipvsg8j#/view/1001:模板视图
-->
5-7-2.html
<div class="show">
<div>学号:{{student.stuId}}</div>
<div>姓名:{{student.name}}</div>
<div>性别:{{student.sex}}</div>
<div>分数:{{student.score}}</div>
</div>
例子二:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>
<body>
<div ng-controller="TextController">
<p>{{someText}}</p>
</div>
<div ng-view></div>
<script>
angular
.module('myApp', ['ngRoute'])
.controller('TextController', function ($scope) {
$scope.someText = '下面就是显示内容的地方';
})
.config(function ($routeProvider) {
/*
http://localhost:63342/route4/app/index.html?_ijt=jdpjd8hageqceopbhbov94cdi5#/
* */
$routeProvider.when('/', {
controller: ListController,
templateUrl: 'list.html'
}).when('/view/:id', { //在id前面加一个冒号,从而制订了一个参数化URL
/*
http://localhost:63342/route4/app/index.html?_ijt=jdpjd8hageqceopbhbov94cdi5#/view/2
* */
controller: DetailController,
templateUrl: 'detail.html'
}).otherwise({
redirectTo: '/'
});
}); //配置我们的路由
messages = [{
id: 0,
sender: "11111111@qq.com",
subject: "你好,这是一封邮件",
date: "2015年4月13日",
recipients: ['loin11111@163.com'],
message: "11111111,我是xxx,这是发送给您的邮件。"
}, {
id: 1,
sender: "2222222@qq.com",
subject: "你好,这是2封邮件",
date: "2016年4月13日",
recipients: ['lin222222222@163.com'],
message: "2222222222你好,我是xxx,这是发送给您的邮件。"
}, {
id: 2,
sender: "33333333@qq.com",
subject: "你好,这是③封邮件",
date: "2017年4月13日",
recipients: ['lin33333333@163.com'],
message: "33333333333你好,我是xxx,这是发送给您的邮件。"
}];
function ListController($scope) {
$scope.messages = messages;
}
function DetailController($scope, $routeParams) {
$scope.message = messages[$routeParams.id];
}
</script>
<script type='text/ng-template' id='list.html'>
<table>
<tr>
<td><strong>发件人</strong></td>
<td><strong>内容</strong></td>
<td><strong>日期</strong></td>
</tr>
<tr ng-repeat="message in messages">
<td>{{message.sender}}</td>
<td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
<td>{{message.date}}</td>
</tr>
</table>
</script>
<script type='text/ng-template' id='detail.html'>
<div><strong>项目:</strong>{{message.subject}}</div>
<div><strong>发送者:</strong>{{message.sender}}</div>
<div><strong>日期:</strong>{{message.date}}</div>
<div>
<strong>To:</strong>
<span ng-repeat="recipient in message.recipients">
{{recipient}}
</span>
</div>
<div>{{message.message}}</div>
<a href="#/">回到列表</a>
</script>
</body>
</html>
例子三:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>
<!--首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular
这主要是因为angular-route.js需要传入window.angular这个参数,而这个参数只有在加载完angular才会出现。-->
<body>
<!--路由功能主要是 $routeProvider服务 与 ng-view 实现。
路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了页面模板的挂载点,
当切换URL进行跳转时,不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。-->
<div>
<a href="#/list">列表</a>
</div>
<!--单页Web应用由于没有后端URL资源定位的支持,需要自己实现URL资源定位。AngularJs使用浏览器URL"#"后的字符串来定位资源。-->
<!--路由机制并非在AngularJS核心文件内,你需要另外加入angular-route.min.js脚本。并且创建mainApp模块的时候需要添加对ngRoute的依赖。-->
</br>
<div ng-view>
</div>
<!--该 div 内的 HTML 内容会根据路由的变化而变化。有以下两种写法-->
<!-- <ng-view></ng-view> 当做标签-->
<!-- <div ng-view ></div> 当做元素-->
<script>
// 设置当前模块依赖,“ngRoute”,用.NET的解就是给这个类库添加“ngRoute”引用
angular.module("mainApp", ["ngRoute"])
.config(["$routeProvider", function ($routeProvider) {
$routeProvider
/*when():配置路径和参数;
otherwise:配置其他的路径跳转,可以想成default。*/
.when("/list", { // 指定URL为“/” 控制器:“listController”,模板:“route-list.html”
controller: "listController", templateUrl: "route-list.html"
})
.when("/view/:id", {// 注意“/view/:id” 中的 “:id” 用于捕获参数ID
controller: "viewController", templateUrl: "route-view.html"
})
.when("/", { // 跳转
redirectTo: "/list"
})
.otherwise({redirectTo: "/list"});
}])
//创建一个提供数据的服务器
.factory("service", function () {
var list = [
{id: 1, title: "博客园", url: "http://www.cnblogs.com"},
{id: 2, title: "知乎", url: "http://www.zhihu.com"},
{id: 3, title: "codeproject", url: "http://www.codeproject.com/"},
{id: 4, title: "stackoverflow", url: "http://www.stackoverflow.com/"}
];
return function (id) {
//假如ID为无效值返回所有
if (!id) return list;
var t = 0;
//匹配返回的项目
angular.forEach(list, function (v, i) {
if (v.id == id) t = i;
});
return list[t];
}
})
// 创建控制器 listController,注入提供数据服务
.controller("listController", ["$scope", "service", function ($scope, service) {
$scope.list = service();//获取所有数据
}])
// 创建查看控制器 viewController, 注意应为需要获取URL ID参数
// 我们多设置了一个 依赖注入参数 “$routeParams” 通过它获取传入的 ID参数
.controller("viewController", ["$scope", "service", '$routeParams', function ($scope, service, $routeParams) {
$scope.model = service($routeParams.id || 0) || {};
}]);
</script>
</body>
</html>
route-list.html
<ul ng-repeat="item in list">
<li><a href="#view/{{item.id}}">{{item.title}}</a></li>
</ul>
route-view.html
<div>
<div>网站ID:{{model.id}}</div>
<div>网站名称:<a href="{{model.url}}" rel="nofollow">{{model.title}}</a></div>
<div>访问地址:{{model.url}}</div>
</div>
<!--
<a href="http://www.runoob.com/">访问菜鸟教程</a>
可以跳转
-->
<!--
http://www.cnblogs.com/shuchao/archive/2009/09/19/rel-nofollow.html
nofollow的使用
nofollow有两种用法:
1.用于meta元标签:<meta name="robots" content="nofollow" />,告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签:<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。
nofollow的作用
nofollow主要有三个作用:
1.防止不可信的内容,最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接,为了防止页面指向一些拉圾页面和站点。
2.付费链接:为了防止付费链接影响Google的搜索结果排名,Google建议使用nofollow属性。
3.引导爬虫抓取有效的页面:避免爬虫抓取一些无意义的页面,影响爬虫抓取的效率。-->