1、首先我们要引进angular.js和angular-route.js文件

代码如下:

2、然后我们要在html中创建锚点和容器（ng-view）

第一页第二页

3、在模块中注入ngRoute依赖

代码如下:

4、配置路由

first ' }) .when('/second',{ template : '

second

' }) .otherwise({ redirectTo : '/first' }) }])

效果展示：

完整代码：

<Meta charset="UTF-8"> Document 第一页第二页

接下来我们做一个模拟项目路由

1、首先我们看一下我们所需要的文件

所有文件展示

2、之后我们看一下效果图

有两个页面，first page跟second page，点击两个按钮，切换不同页面，展示不同样式

3、好了。我们看一下代码吧！

index.html

<Meta charset="UTF-8"> Document First Page

Second Page

代码解释：

首先我们要引进三个文件

1）angular.min.js----angularJS脚本 2）angular-css.js----用来转化css的脚本 3）angular-route.js----路由脚本

然后我们需要两个锚点

First Page Second Page

最后我们需要一个路由导入的容器

代码如下:

之后我们将路由的配置、服务、控制器分别放在app.js、services.js、controller.js文件中，便于代码的管理、维护。

4、接下来我们看一下路由的部分

代码解释：

1）首先，第一行，在myApp模块中注入ngRoute跟angularCSS依赖。

2）然后配置路由（config）：

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。第二个参数是路由配置对象。

3）controller

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

4）controllerAs

string类型，为controller指定别名。

5）redirectTo

重定向的地址

6）resolve

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

路由设置对象总览：

5、下面我们看一下服务部分，service.js

注意：angular.module('myApp')不需要注入依赖

6、下面看一下控制器集成，controller.js

代码分析：

1）在控制器中注入服务依赖以及#css依赖

代码如下:

2）添加css依赖路径

代码如下:

注意：angular.module('myApp')不需要注入依赖

7、好了。逻辑的部分已经完成了，下面展示一下我们的样式以及结构部分吧

first.html

First Page

second.html

Second Page

first.css

second.css

原文链接：https://www.f2er.com/js/41783.html

angularjs angularjs小项目实例路由实例项目实例

上一篇：JS中如何实现Laravel的route函数详下一篇：ES6学习之变量的解构赋值

AngularJS实现路由实例

second

First Page

Second Page

猜你在找的JavaScript相关文章