发表于： 2020-04-19 23:20:58
1 1885
今天完成的事情：今天学习了一下angular的技巧的应用
明天计划的事情：继续学习后续的部分
遇到的问题：实际操作还是太少还需要理解
收获：今天学到了一下小技巧
实现自定义锚点功能（需要引入$location,$anchorScroll）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="node_modules/angular/angular.js"></script>
</head>
<body ng-app="app" ng-controller="c1">
{{name}}
<div id="div1" style="height: 500px;background: red"></div>
<div id="div2" style="height: 500px;background: #d5ff26"></div>
<div id="div3" style="height: 500px;background: #4c2cff"></div>
</body>
<script>
var app=angular.module("app",[]);
app.controller("c1",function($scope,$location,$anchorScroll){
$scope.name="aaaa"
//hash()的作用是让当前地址后面追加#div1 然后注入$anchorScroll 来实现的
$location.hash("div1")
console.log($location)
})
</script>
</html>
利用$cacheFactory来实现各种controller的值传递
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="node_modules/angular/angular.js"></script>
</head>
<body ng-app="app">
<div ng-controller="c1"></div>
<div ng-controller="c2"></div>
</body>
<script>
var app=angular.module("app",[]);
app.controller("c1",function($scope,$cacheFactory){
//先new一个$cacheFactory对象,起个名字
var cache1=$cacheFactory("cache1");
//放值
cache1.put("age",12);
})
app.controller("c2",function($scope,$cacheFactory){
// 得到cachefactory根据上面定义的名字
var cache2=$cacheFactory.get("cache1");
// 得到值
var age= cache2.get("age");
alert(age)
})
</script>
</html>
angular插入html片段
需要引入一个插件，然后module就可
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="node_modules/angular/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-sanitize/1.6.8/angular-sanitize.js"></script>
</head>
<body ng-app="app">
<div ng-controller="c1">
<span ng-bind-html="html"></span>
</div>
</body>
<script>
var app=angular.module("app",["ngSanitize"]);
app.controller("c1",function($scope){
$scope.html='<h1>hhhhhhh</h1>';
})
</script>
</html>
实现路由功能
同样需要引入路由插件，需要注意的是必须引入ng-view这个标签才会生效以啦
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="node_modules/angular/angular.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body ng-app="app">
<div ng-controller="c1">
</div>
<hr />
<div ng-view></div>
</body>
<script>
var app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', { template: '这是首页页面' })
.when('/computers', { template: '这是电脑分类页面' })
.when('/printers', { template: '这是打印机页面' })
.otherwise({ redirectTo: '/' });
console.log($routeProvider)
})
app.controller("c1", function ($scope) {
})
</script>
</html>
实现页面跳转及传值问题
这个坑比较多，因为angular会自己给我们连接后面带一些参数，导致跳转失败。需要特别处理一下。我也不知道原因，记住就行了暂时，需要 $locationProvider.hashPrefix('');来处理一下哈希前缀
通过超链接的方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="node_modules/angular/angular.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body ng-app="app">
<div ng-controller="c1">
<a href="#">链接1</a>
<a href="#computers">链接2</a>
<a href="#printers/2/3">链接3</a>
</div>
<hr />
<div ng-view></div>
</body>
<script>
var app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/', { template: '这是首页页面' })
.when('/computers', { template: '这是电脑分类页面' })
.when('/printers/:id/:age', {
template: '这是打印机页面',
controller: "c2"
})
.otherwise({ redirectTo: '/' });
})
app.controller("c1", function ($scope) {
})
app.controller("c2", function ($routeParams) {
console.log($routeParams)
})
</script>
</html>
通过点击的方式
主要运用了$location.path（”“）的方法，会自动在后面加入path里面的参数作为路径。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="node_modules/angular/angular.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body ng-app="app">
<div ng-controller="c1">
<a ng-click="$location.path('')">链接1</a>
<a ng-click="$location.path('computers')">链接2</a>
<a ng-click="$location.path('printers/1/2')">链接3</a>
</div>
<hr />
<div ng-view></div>
</body>
<script>
var app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/', { template: '这是首页页面' })
.when('/computers', { template: '这是电脑分类页面' })
.when('/printers/:id/:age', {
template: '这是打印机页面',
controller: "c1"
})
.otherwise({ redirectTo: '/' });
})
app.controller("c1", function ($scope, $location, $routeParams) {
console.log($location)
console.log($routeParams)
$scope.$location = $location;
})
</script>
</html>
返回列表
评论