Angular路由使用

Angular路由使用

1.什么是路由机制?
AngularJS是协助搭建单页面工程的前端开源框架, 它通过MVC模式使得开发与测试变得更容易;

AngularJS路由机制的思想?
1. 通常网页中的 header和footer是不需要改变的;也就是说在不同的页面中会看到相同的header和footer.
2. 相同的部分不需要每次都进行加载;
3. 路由机制的实现:(变化部分)
    在页面内通过[#/页面名称], 映射到访问正文内容页面, 基于Ajax方式将变化的内容加载后,显示到指定的区域.
2.AngularJS案例
1. 在项目中引入 angular-route.js;
2. 编写页面布局, 将AngularJS加载变化部分div, 指定ng-view;
3. 编写Angular 路由配置 routeProvider.
    最后, 要把ngRoute模块在我们的应用中当作依赖加载进去.
    angular.module("myApp", ['ngRoute']);
<body ng-app="myApp">
    <div>
        <h1>header</h1>
        <a href="#/JavaEE">JaveEE</a>
        <a href="#/ios">ios</a>
        <a href="#/Android">Android</a>
    </div>
    <!--路由加载后, 更新变化的内容-->
    <div ng-view>

    </div>
    <div>
        <h1>footer</h1>
    </div>
    <script type="text/javascript">
        // 定义myApp模块
        var myApp = angular.module("myApp", ["ngRoute"]);
        // 配置模块路由
        myApp.config(["$routeProvider", function(){
           $routeProvicer
               .when("/JavaEE", {
                    templateURL: "javaee.html"
           }).when("/ios", {
                    templateURL: "ios.html
           }).when("/Android", {
                    templateURL: "Android.html  
           }).otherwise({
                    redirectTo : "javaee.html"
           });
        }]);
    </script>
</body>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 路由Angular 框架提供的一种机制,用于管理应用程序不同页面之间的导航。它允许你在应用程序定义不同的路由,每个路由对应一个特定的组件或模块。 要使用 Angular 路由,首先需要在应用程序的根模块导入 `RouterModule` 并将其添加到 `imports` 数组。然后,在定义路由之前,你需要创建一个包含路由配置的模块。 路由配置模块可以包含以下内容: - 导入 `RouterModule` 并使用 `forRoot` 方法来配置根路由。 - 使用 `Routes` 类定义一个路由数组,其每个路由对象都包含路径和组件的映射关系。 - 将路由数组传递给 `RouterModule.forRoot()` 方法。 例如,以下是一个简单的路由配置示例: ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home.component'; import { AboutComponent } from './about.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` 在上面的示例,我们定义了两个路由。路径为空时,将加载 `HomeComponent` 组件,而路径为 'about' 时,将加载 `AboutComponent` 组件。 最后,你可以在应用程序的模板使用 `<router-outlet></router-outlet>` 标签来显示当前路由所对应的组件。 这只是 Angular 路由的基本概念,你还可以通过配置更多选项来实现更复杂的路由功能,如路由参数、子路由路由守卫等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值