02 Angular介绍.txt
UP 返回
1. 表达式 双向绑定 初始化指令 （视频参 F:\2019年4月黑马程序员教程\05-黑马JavaEE49期全套\17品优购电商系统开发\阶段一\2品牌管理\1前端框架AngularJS入门\28_04.AngularJS入门小demo(1-3)）
新建demo1.html，将 \资源\前端相关\angularjs 下的angular.min.js复制到同目录下
<html>
<head>
<title>入门小Demo-1</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname='陈大海'"> <!-- ng-app是使用angular必须要加的指令。ng-init初始化指令，可以预先复制或这行方法 -->
{{100+100}} <!-- 表达式 -->
<hr>
请输入你的姓名：<input ng-model="myname"><input ng-model="myname"> <!-- 双向绑定 -->
<br>
{{myname}},你好
<hr>
</body>
</html>
2. 控制器 （视频 29_05.AngularJS入门小demo4）
<html>
<head>
<title>入门小Demo</title>
<script src="angular.min.js"></script>
<script>
//建立模块 (参数意义：模块名 引入的其他模块)
var app=angular.module("myApp",[]);
//通过模块创建控制器 $scope就是控制层和视图层交换数据的桥梁
app.controller('myController',function($scope){
//添加一个add的函数属性
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController"> <!-- 指定模块和控制器 -->
第一个数:<input ng-model="x" >
第二个数:<input ng-model="y" >
运算结果：{{add()}}
</body>
</html>
3.事件 （就是将上面的例子改成用button触发 视频 30_06.AngularJS入门小demo(5-6)）
<html>
<head>
<title>入门小Demo</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller('myController',function($scope){
$scope.add=function(){
$scope.z= parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController"> <!-- 指定模块和控制器 -->
第一个数:<input ng-model="x" >
第二个数:<input ng-model="y" >
<button ng-click="add()">相加</button>
运算结果：{{z}}
</body>
</html>
4.循环
<html>
<head>
<title>入门小Demo</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller('myController',function($scope){
$scope.list=[102,100,203,555]
$scope.dataList=[
{name:"张三",shuxue:100,yuwen:100},
{name:"李四",shuxue:50,yuwen:90},
{name:"王五",shuxue:60,yuwen:70},
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController"> <!-- 指定模块和控制器 -->
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="x in dataList">
<td>{{x.name}}</td>
<td>{{x.shuxue}}</td>
<td>{{x.yuwen}}</td>
</tr>
</table>
</body>
</html>
5.从服务器获取列表 需要在tomcat下运行项目，访问http://localhost:8082/demo.html
参项目 D:\ProjectCodes\eclipse_pyg\dubboxdemo-web ，代码如下：
demo.html ：
<html>
<head>
<title>入门小Demo</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app=angular.module("myApp",[]);
//建立控制器 function中的参数就可以看成是依赖注入，要用什么就引入什么
app.controller('myController',function($scope,$http){
$scope.findList=function(){
$http.get("data.json").success(
function(response){
console.log(response)
$scope.dataList=response;
}
);
}
//对于方法findList的调用，如果不想用ng-init也可以直接用下面这句。区别是如果这样写所有引入了这个模块的都会直接调用一次，并不一定是想要的结果
//$scope.findList();
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="x in dataList">
<td>{{x.name}}</td>
<td>{{x.shuxue}}</td>
<td>{{x.yuwen}}</td>
</tr>
</table>
</body>
</html>
data.json:
[
{"name":"张三","shuxue":100,"yuwen":100},
{"name":"李四","shuxue":50,"yuwen":90},
{"name":"王五","shuxue":60,"yuwen":70},
{"name":"滴滴","shuxue":60,"yuwen":55}
]
6. 在solr高亮显示的视频中（\10搜索解决方案-Solr-2\1高亮显示），会发现高亮显示的html代码原样输出并没有效果，这是angularJS为了防止html攻击采取的安全机制。
要用到$sce服务的trustAsHtml方法来实现转换。（同理也会有个trustAsJs的方法，以后再看），这里使用过滤器功能：
（1）修改base.js
// 定义模块:
var app = angular.module("pinyougou",[]);
/*$sce服务写成过滤器*/
app.filter('trustHtml',['$sce',function($sce){
return function(data){
return $sce.trustAsHtml(data);
}
}]);
（2）使用过滤器
ng-bind-html指令用于显示html内容
竖线 |用于调用过滤器
<div class="attr" ng-bind-html="item.title | trustHtml"></div>
7. angular前端代码写法：
三元运算： 采用三元判断的方式来动态组合字符串
<li class="prev {{isTopPage()?'disabled':''}}">
<a href="#" ng-click="queryByPage(searchMap.pageNo-1)">«</a>
</li>
DOWN 返回