Angular之路由篇一

最新推荐文章于 2024-09-09 19:30:43 发布

原创最新推荐文章于 2024-09-09 19:30:43 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web应用 #实例 #路由 #angularjs #angular

本文介绍如何使用AngularJS创建单页Web应用(SPA)，包括引入核心框架及路由模块、配置路由规则、使用ngView指令实现视图切换等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

路由原理：

SPA单页面应用：

实例应用：

1.引入Angular核心框架文件：

 <script src="js/lib/AngularJS/angular.min.js"></script>

2.引入Angular路由模块文件：

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

3.包含了 ngRoute 模块作为主应用模块的依赖模块：

var app = angular.module("myApp", ["ngRoute"]);

4.app.config()函数主要用于进行《配置信息》的添加,配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则,route:路由,provider:提供者,$routeProvider:AngularJS提供的用于进行路由配置的内置服务,templateUrl: ng-view 中插入 HTML 模板文件:

  app.config(["$routeProvider", function($routeProvider) {
        $routeProvider
            .when("/", {
                templateUrl:"template/main.html"
            }).when("/login", {
                templateUrl:"template/login.html"
            }).when("/regist", {
                templateUrl:"template/regist.html"
            }).when("/shopcart", {
                templateUrl:"template/shopcart.html"
            }).otherwise("/");
    }]);

5.使用 ngView 指令。<div ng-view></div>,该 div 内的 HTML 内容会根据路由的变化而变化。

<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/login">登录</a></li>
    <li><a href="#!/regist">注册</a></li>
    <li><a href="#!/shopcart">购物车</a></li>
</ul>
<div ng-view></div>