序

本章将介绍AngularJS路由。AngularJS路由允许我们通过不同的URL访问不同的内容。有了AngularJS，可以实现多视图单页Web应用(SPA)。

1.1解释角度js布线的基本知识

在AngularJS中使用路由：

1.导入路径文件：angular-route.js

2.将“ngRoute”注入主模块。

棱角分明。模块(' app '，['ngroute']) 3。将超链接重写为路由格式。-' #/标记'

A href=' #/' rel=' external nofollow ' rel=' external nofollow '第一页/a //第一页直接用#/表示A href=' #/page 1 ' rel=' external nofollow ' rel=' external nofollow ' page 1/A//其他页' #/mark '表示4。在页面的适当位置添加ng-view，用于承载通过路由打开的页面：

Div-ng view/div//或ng-view/ng-view此div中的HTML内容会根据路线的变化而变化。

5.在配置配置阶段，注入$routeProvider来配置路由：config(函数($routeProvider){ $routeProvider。当('/'，{ template : ' h1 style=' color : red；这是第一页/h1'})。when ('/page1 '，{templateurl3360' page.html '，controller3360' ctrl'})。当('/page2 '，{templateurl3360' page.html '，controller:function ($)！'}}).when ('/page3 '，{templateurl3360' page.html'})。when ('/page4 '，{})。否则({重定向到： '/' })} angular js模块的config函数用于配置路由规则。通过使用configAPI，我们请求将$routeProvider注入到我们的配置函数中，并使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider为我们提供了when (path，object)nothing(object)函数来按顺序定义所有路由，并且该函数包含两个参数：

第一个参数是URL或URL常规规则。第二个参数是路由配置对象。1.2.1路线设置对象

AngularJS路由也可以通过不同的模板来实现。

函数的第一个参数是URL或URL规则，第二个参数是路由配置对象。

路由配置对象语法规则如下：

$ routeprovider.when (URL，{template3360string，//在ng-view中插入简单的html内容templateurl3360string，//在ng-view中插入html模板文件controller:string，函数/数组，//在当前模板上执行的controller函数controller as:string，//别名redirectto3360string，函数，//重定向地址resolve3360objectkey，函数//指定当前控制器所依赖的其他模块)}；参数描述

模板：自定义HTML模板，将该HTML直接记录到ng-view中；when ('/page3 '，{templateurl:' page。HTML'}) templateurl:导入外部HTML模板文件。为了避免冲突，外部HTML应该是一个代码片段，也就是说，应该只保留主体内部的部分。when ('/page1 '，{templateurl:' page。html '，controller:' ctrl1'}) 控制器：在当前HTML模板上执行的控制器功能。将创建一个新的范围$scope。您可以直接接受字符串(声明的控制器名称)或函数。when ('/page1 '，{templateurl:' page.html '，controller:' ctrl1'})注意：对于用ng-view打开的页面，controller中的范围属于当前页面的范围！还是符合Angular中父子作用域‘能读不能写’的要求！

因此：如果需要在ng-view中修改当前作用域的变量，必须将这个变量声明为对象的属性！

重定向至：重定向。一般用于。否则()，用来重定向回首页！否则({重定向到：'/'}) 2.1自定义指令

AngularJS允许用户自定义使用说明！

示例：平面视图/平面视图或平面视图/平面视图

1.使用。指令()来声明自定义指令；

2.定义指令时，指令名称必须使用驼峰命名法；调用指令时，用“-”链接。指令('皇阁')-黄-黄歌-葛.指令('皇阁')-黄哥

3.定义指令时在对象中使用的属性：

模板：调用指令时，生成的模板限制：用于声明指令允许的调用方式：

表示"电子的"允许标签名表明表示"不"允许属性调用C-允许类名调用间位允许注释调用

默认值为：EA

如果需要注释调用，必须再添加一个属性：replace:true，而且注释调用前必须添加方向：' eg:-黄哥路：号。指令('江浩，函数(){ return { restrict : 'EACM '，replace:true，template:'h1这是一个自定义指令/h1 '，}})3.1实例

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' ul {溢出：隐藏；} li { width: 100px高度： 40px文本对齐：中心；向左浮动：线高： 40px列表样式：无；光标：指针；}阿利{ text-摆设：无；颜色：黑色；}李：悬停{底色：黄色；} # div1 { width: 1000px高度： 500像素；余量： 20px自动；border: 2px纯红；}/style/head body ng-app=' app ' ng-controller=' ctrl ' ul lia href=' #/' rel=' external nofollow ' rel=' external nofollow '首页/a/li lia href='#/page1' rel='外部nofollow' rel='外部不跟随'第1页/a/Li lia href=' #/第2页' rel='外部不跟随'第2页/a/Li lia href=' #/第3页' rel='外部不跟随'第3页/a/Li lia href=' #/第4页' rel='外部没有后续页面4/a/Li/ul div id=' div 1 ' ng-view/div Jiang-Hao/Jiang-Hao div Jiang config(函数($ RouterProvider){ $ RouterProvider .当('/'，{ template : ' h1 style=' color : red； '这是首页/h1'}).当('/page1 '，{templateUrl:'page.html '，controller:'ctrl1'})时.当('/page2 '，{templateUrl:'page.html '，控制器：函数($ scope){ $ scope。文本='这是计算机的计算机的ctrl按键按键不知道是几控制器！'}}) .当('/page3 '，{templateUrl:'page.html'})时.when('/page4 '，{}).否则({redirectTo:'/'})}).控制器(“ctrl”，函数($scope){ $scope.test='这是一段测试文字!'；$scope.obj={ test: '这是一个测试对象!'}}).控制器(“ctrl1”，函数($scope){ $scope.text='这是ctrl1控制器!'；}) */.指令('江浩，函数(){ return { restrict : 'EACM '，replace:true，template:'h1这是一个自定义指令/h1 '，} })/脚本/html效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。