angularjs的路由原理你知道吗？这里有angularjs路由的详细原理-js教程-PHP中文网

angularjs的路由原理你知道吗？这里有angularjs路由的详细原理

寻∝梦

发布： 2018-09-06 14:50:40

原创

1993人浏览过

本篇文章主要的向大家介绍了关于angularjs的路由原理，还有angularjs的路由使用的步骤，没太深入，大家应该都能看得懂。接下来就让我们一起来看这篇文章吧

一、我们来看看angularjs的简介：

AngularJS 路由机制是由ngRoute模块提供，它允许我们将视图分解成布局和模板视图，根据url变化动态的将模板视图加载到布局中，从而实现单页面应用的页面跳转功能。

二、再看看AngularJS中的url

在单页WEB应用的url中添加了#号，#号代表着网页的一个位置，其右边的所有内容，就是用来标示该位置的标识符。#号及后面的内容称为url中的hash片段，它们都不会发送到服务端，下面三个url，向服务端请求的地址都是一样的。如果只改变#号后面的内容，刷新不会导致网页的重载。

http://www.php.cn/

http://www.php.cn/#123

http://www.php.cn/#123/456

三、现在说说路由的使用：

1.引入文件并注入依赖

由于从1.2版本开始，AngularJS已经将ngRoutes从核心代码中剥离出来成为独立的模块。因此我们需要安装并在模块声明中注入对ngRoute的依赖，才能在AngularJS应用中正常地使用路由功能。（想看更多angularjs相关的知识，就到PHP中文网AngularJs学习手册栏目）

<script src="angular-route.min.js"></script>
var app = angular.module("myApp",['ngRoute']);

登录后复制

2.创建一个布局模板

之所以要创建布局模板，是为了告诉AngularJS应该将布局渲染到何处。通过ng-view指令，我们可以精确的指定模板视图在DOM中的渲染位置。

有道智云AI开放平台

查看详情

<div ng-app="myApp">
    <a ng-href="#/music">音乐</a>
    <a ng-href="#/movie">电影</a>
    <a ng-href="#/novel">小说</a>
    <a ng-href="#/other">其他</a>
    <div ng-view></div>
</div>

登录后复制

3.创建一些模板视图

myMusic.html

<p>这里是音乐界面啦</p>

登录后复制

myMovie.html

<p>这里是电影界面啦</p>

登录后复制

myNovel.html

<p>这里是小说界面啦</p>

登录后复制

home.html

<p>我是首页界面</p>

登录后复制

4.定义路由表

app.config(['$routeProvider',function($routeProvide) {
    $routeProvide
        .when('/',{templateUrl:"home.html"})
        .when('/music',{templateUrl:"myMusic.html"})
        .when('/movie',{templateUrl:"myMovie.html"})
        .when('/novel',{templateUrl:"myNovel.html"})
        .otherwise({redirectTo:'/'});
}]);

登录后复制

好了，以上就是本篇文章的全部内容了（想看更多angularjs相关的知识，推荐到PHP中文网AngularJS学习手册栏目学习），有问题的可以在下方留言提问

【小编推荐】

angularjs和Vue有哪些区别？angularjs与Vue的对比详情

angularjs的优点有哪些？这里有你必须了解的angularjs七大优点

以上就是angularjs的路由原理你知道吗？这里有angularjs路由的详细原理的详细内容，更多请关注php中文网其它相关文章！