AngularJS学习02 - 路由，存储和动画

是小崔啊

于 2025-04-04 10:35:08 发布

阅读量821

点赞数 12

CC 4.0 BY-SA版权

分类专栏： # Augular JS 文章标签： angular.js 学习前端

本文链接：https://blog.csdn.net/qq_43350524/article/details/146995858

Augular JS 专栏收录该内容

3 篇文章

订阅专栏

AngularJS学习02 - 路由，存储和动画

文章目录

AngularJS学习02 - 路由，存储和动画

一：路由(route)

AngularJS 路由允许我们在同一个页面中可以通过不同的 URL 访问不同的内容。也就是可以实现多视图的单页Web应用

通常我们的URL形式为 http://mywebsite.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://mywebsite.com/#/first
http://mywebsite.com/#/second
http://mywebsite.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的（http://mywebsite.com/）。

因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。

AngularJS 路由就通过 # + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

所以，我们就需要在客户端实现 # 号后面内容的功能实现。

注意 Angular1.6 之前的版本是通过 # + 标记实现路由，而在 Angular1.6 及之后的版本是通过 #! + 标记实现路由

为了解决版本不统一造成的路由不一致的问题，我们可以使用代码规定到底加不加!，$locationProvider.hashPrefix('');

1：路由的使用

1️⃣ 载入了实现路由的JavaScript文件：angular-route.js

<script src="js/angular-route.js"></script>

2️⃣ 包含了 ngRoute 模块作为主应用模块的依赖模块

var myapp = angular.module('myapp',['ngRoute']);

3️⃣ 使用 ngView 指令，该 div 内的 HTML 内容会根据路由的变化而变化。

<div ng-view></div>

4️⃣ 配置 $routeProvider， $routeProvider用来定义路由规则，$locationProvider用来解决版本差异带来的路由不一致问题

myapp.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
    // 解决版本问题中加不加 ! 的问题
    $locationProvider.hashPrefix('');
    // 路由规则
    $routeProvider
        .when('/', {template: '这是商城首页页面'})
        .when('/computers', {template: '这是电脑分类页面'})
        .when('/phones', {template: '这是手机分类页面'})
        .when('/books', {template: '这是图书分类页面'})
        .otherwise({redirectTo: '/'});
}]);

2：路由配置说明

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object < key, function >
});

template -> 如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

.when('/computers', {template:'这是电脑分类页面'})

templateUrl -> 如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

controller: function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

controllerAs: string类型，为controller指定别名。

redirectTo: 重定向的地址。

resolve: 指定当前controller所依赖的其他模块。

3：使用示例

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .viewNav {
            height: 50px;
        }

        .viewNav a {
            margin: 0;
            padding: 0;
            width: 150px;
            height: 50px;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            color: white;
            background: coral;
            text-decoration: none;
            float: left;
        }

        .viewNav a:hover {
            background: cornflowerblue;
        }
    </style>
</head>
<body>

<div class="viewNav">
    <a href="#/">商城首页</a>
    <a href="#/computers">电脑分类</a>
    <a href="#/phones">手机分类</a>
    <a href="#/books">图书分类</a>
</div>

<div ng-view></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    
    myapp.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('');

        $routeProvider
            .when('/', {template: '这是商城首页页面'})
            .when('/computers', {template: '这是电脑分类页面'})
            .when('/phones', {template: '这是手机分类页面'})
            .when('/books', {template: '这是图书分类页面'})
            .otherwise({redirectTo: '/'});
    }]);
</script>
</body>
</html>

二：存储(cookie)

本地存储是一个非常重要的功能，在AngularJS中，我们使用ngCookies来解决存储问题。

1：存储的使用

1️⃣ 载入了实现存储的JavaScript文件：angular-cookies.js。

<script src="js/angular-cookies.js"></script>

2️⃣ 包含了 ngCookies 模块作为主应用模块的依赖模块。

var myapp = angular.module('myapp',['ngCookies']);

3️⃣ 在controller中的使用

myapp.controller('mainController', ['$scope', '$cookies', function ($scope, $cookies) {
    // 在这里书写对cookie的操作
}]);

2：使用示例

$cookies提供了主要操作cookie的方法，分别是：get、getAll、getObject、put、putObject、remove方法

分别对应cookie操作的获取、获取全部、获取对象、设置、设置对象、移除等操作。

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', '$cookies', function ($scope, $cookies) {
        // 添加一个cookie（没有name这个cookie就是添加）
        $cookies.put('name', 'zhangsan');
        console.log($cookies.get('name'));

        // 查询所有cookie
        var cookies = $cookies.getAll();
        console.log(cookies);

        // 设置一个cookie（存在name这个cookie就是设置）
        $cookies.put('name', 'lisi');
        console.log($cookies.get('name'));

        // 移除一个cookie
        $cookies.remove('name');
        console.log($cookies.get('name'));

        // 设置带有过期时间的cookie，5秒后该cookie过期
        var time = new Date(new Date().getTime() + 5000);
        $cookies.put('age', '18', {expires: time});
        console.log($cookies.get('age'));

        // 创建一个对象并把它保存到cookie中
        var obj = {
            name: 'wangwu',
            age: 21,
            sex: '男'
        };
        $cookies.putObject('obj', obj);

        // 从cookie中把刚保存的对象读取出来
        console.log($cookies.getObject('obj'));
    }]);
</script>
</body>
</html>

三：动画(Animate)

AngularJS 提供了动画效果，可以配合 CSS 使用，ngAnimate模块可以添加或移除 class。

ngAnimate模块本身并不能使 HTML 元素产生动画，但是ngAnimate模块会监听事件，如果有类似隐藏显示HTML元素的事件发生，如ngAnimate模块就会使用预定义的 class 来设置HTML元素的动画。

支持这种方式定义动画的指令有：

ng-show
ng-hide
ng-class
ng-view
ng-repeat
ng-if
ng-switch
ng-include

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其它指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类。

此外，在动画完成后，HTML 元素的类集合将被移除。

例如： ng-hide 指令会添加以下类：

ng-animate
ng-hide-animate
ng-hide-add (如果元素将隐藏)
ng-hide-remove (如果元素将显示)
ng-hide-add-active (如果元素将隐藏)
ng-hide-remove-active (如果元素将显示)

我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果，我们这里做的额外工作只是编写css文件。

只编写样式就可以了？实际上，$animate服务本身支持几个内置的指令，比如ng-repeat，ng-show，ng-view等。

而它的本质只是为其在视图变化期间添加了额外的CSS样式，仅此而已！

1：动画的使用

1️⃣ 载入了实现动画的JavaScript文件：angular-animate.js。

<script src="js/angular-animate.js"></script>

2️⃣ 包含了 ngAnimate 模块作为主应用模块的依赖模块。

var myapp = angular.module('myapp',['ngAnimate']);

3️⃣ 根据业务需求，编写对应的样式类即可。

2：使用示例

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* myChange动画，从高度100px，变成0px */
        @keyframes myChange {
            from {
                height: 100px;
            }
            to {
                height: 0;
            }
        }

        div {
            height: 100px;
            background-color: lightblue;
        }
        /* 执行myChage的样式动画，执行时间为1s */
        div.ng-hide {
            animation: 1s myChange;
        }
    </style>
</head>
<body>

隐藏DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
</script>
</body>
</html>