AngularJS实现路由实例

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

复制代码代码如下：脚本类型=' text/JavaScript ' src=lib/angular。量滴js/脚本脚本类型=' text/JavaScript ' src=lib/angular-route。js/脚本

2、然后我们要在超文本标记语言中创建锚点和容器(ng-view)

a href=' # first ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '第一页/aa href=' # second ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '第二页/adiv ng-view/div3、在模块中注入ngRoute依赖

复制代码代码如下： angular.module('myApp '，['ngRoute'])

4、配置路由

config([' $ RouterProvider '，function($ RouterProvider){ $ RouterProvider。when('/first '，{ template : 'h1 first /h1' }).when('/second '，{ template : 'h1 second /h1' }).否则({ redirectTo : '/first' }) }])效果展示：

完整代码：

！DOCTYPE html html ng-app=' myApp ' head meta charset=' UTF-8 ' title document/title script type=' text/JavaScript ' src=lib/angular。量滴js/script脚本类型=' text/JavaScript ' src=lib/angular-route。js/script/head body a href=' # first ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '第一页/a a href=' # second ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '第二页/a分区-视图/分区脚本类型=' text/JavaScript ' angular。模块(' myApp '，['ngRoute']).config([' $ RouterProvider '，function($ RouterProvider){ $ RouterProvider。when('/first '，{ template : 'h1 first /h1' }).when('/second '，{ template : 'h1 second /h1' }).否则({ redirectTo : '/first ' })})/脚本/正文/html接下来我们做一个模拟项目路由

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

所有文件展示

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

有两个页面，第一页跟第二页，点击两个按钮，切换不同页面，展示不同样式

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

index.html

！DOCTYPE html html ng-app=' myApp ' head meta charset=' UTF-8 ' title document/title script type=' text/JavaScript ' src=' http : lib/angular。量滴js '/script脚本类型=' text/JavaScript ' src=' http : lib/angular-CSS。js '/script type=' text/JavaScript ' src=' http 3360 lib/angular-route。js '/脚本/代码解释：

首先我们要引进三个文件

1)angular.min.js - angularJS脚本2)angular-css.js -用来转化钢性铸铁的脚本3)角度-路线。js -路由脚本

然后我们需要两个锚点

a href=' # First ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' First Page/a href=' # Second ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' Second Page/a最后我们需要一个路由导入的容器

复制代码代码如下：分区视图/分区

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

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

angular.module('myApp '，['ngRoute '，' angularCSS']).config([' $ RouterProvider '，function($ RouterProvider){ $ RouterProvider .当('/first '，{ templateUrl : ')时./view/first.html '，控制器： 'FirstCtrl as firstCtrl' }).当('/秒'，{ templateUrl : ' ./view/second.html '，控制器： 'SecondCtrl as secondCtrl' }).否则({ redirectTo : '/first' }) }])代码解释：

1)首先，第一行，在myApp模块中注入ngRoute跟角度依赖。

2)然后配置路由（配置):

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

$routeProvider为我们提供了当（路径，对象)否则（对象)函数按顺序定义所有路由，函数包含两个参数：

第一个参数是统一资源定位器或者统一资源定位器正则规则。第二个参数是路由配置对象。

3)控制器

函数、字符串或数组类型，在当前模板上执行的控制器函数，生成新的范围。

4)控制电子逆向拍卖

线类型，为控制器指定别名。

5)重定向至

重定向的地址

6)决心

指定当前控制器所依赖的其他模块。

路由设置对象总览：

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

angular.module('myApp ').factory('FirstService '，[function(){ var list=[{ name : ' Rose '，age : 10 }，{ name : 'Tom '，age : 19 }]；返回{ getList :函数(){返回列表} } }])注意：angular.module('myApp ')不需要注入依赖

6、下面看一下控制器集成，控制器。射流研究…

angular.module('myApp ').控制器(' FirstCtrl '，['$css '，' FirstService '，函数($css，$ ServiCe){ var self=this；$ CSS。添加(' CSS/first。CSS ')；自我。list=function(){ return $ service。getlist()；} }]) .controller('SecondCtrl '，['$css '，' FirstService '，function ($css，$ ServiCe){ var self=this；$ CSS。添加(' CSS/秒。CSS ')；自我。list=function(){ return $ service。getlist()；} }])代码分析：

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

复制代码代码如下：控制器(' FirstCtrl '，['$css '，' FirstService '，函数($css，$service)

2)添加钢性铸铁依赖路径

复制代码代码如下：美元CSS。添加(' CSS/first。CSS ')；

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

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

first.html

div class=' First ' h1第一页/h1 div ng-在First ctrl中重复=' p。list()' { { p . name } }={ { p . age } }/div/div秒。超文本标记语言

div class=' Second ' h1第二页/h1 div ng-重复=' p in Second ctrl。list()' { { p . name } }=={ { p . age } }/div/div优先。半铸钢钢性铸铁(Cast Semi-Steel)。第一{背景-颜色：黄色；}.第一个*{ color:红色；}second.css。第二{底色：天蓝色；}.第二*{ color:绿色；}