查看: 769|回复: 0

[HTML代码] 爱创课堂 前端教程 angular教程 课堂笔记 复习 路由 事件

发表于 2018-1-25 09:42:23
路由路由大致分成两种,

一类是指令路由 依赖的代码库angular-route

一类是ui路由 依赖的代码库是angular-ui-router

指令路由是对angular 的ng指令拓展

Ui路由是对angular 的ui指令的拓展

首先学习指令路由

使用路由第一步要引入angular-route

第二步在页面中通过ng-view指令定义路由视图容器

第三步在module的依赖集合中引入ngRoute

第三在config中定义路由信息

Config方法是在app启动之前执行的方法,因此对于应用程序的配置通常写在config中,

所以路由配置也要写在config

首先将$routeProvider注入进来
When 第一个参数表示路径(必须以/开头)

第二个参数是路由配置对象

Template 定义模板

Controller定义控制器,作用是创建作用域

传递一个函数,这个函数就是控制器函数,可以注入作用域定义数据

传递一个字符串,这个字符串表示控制器的名称,路由会根据这个名称寻找相应的控制器(这个控制器一定要定义)
OhterwiseOhterwise 定义默认路由

参数表示一个配置对象

在配置中可以通过redirectTo做重定向

$routeParams在ngroute中我们可以定义动态路由参数 /:方式定义

使用参数可以在控制器中通过注入$routeParams方式将参数注入进来,动态会绑定这个对象
事件可以通过$on为根作用域监听路由事件,

第一个参数表示事件名称

第二个参数表示回调函数

第一个参数事件对象

第二个参数路由对象

1 var app = angular.module('app', ['ngRoute'])
2 // 在config中定义路由配置
3 app.config(function ($routeProvider) {
4 // 定义路由需要route服务,$routeProvider
5 console.log($routeProvider)
6 $routeProvider
7 .when('/', {
8 // 定义模板
9 template: '<h1>{{msg}}</h1>',
10 controller: 'main'
11 })
12 .when('/movie', {
13 template: '<h1>abc</h1>'
14 })
15 .when('/meinv/:query', {
16 template: '<h1>{{name}}</h1>',
17 controller: function ($scope, $routeParams) {
18 console.log($routeParams)
19 // 参数美女名称
20 $scope.name = $routeParams.query;
21
22 }
23 })
24 .when('/shuaige', {
25 template: '<h1>帅哥</h1>'
26 })
27 .otherwise({
28 redirectTo: '/meinv/feng'
29 })
30 })
31 .controller('main', function ($scope) {
32 $scope.msg = 'hello'
33 })
34 // 通常将路由事件定义跟作用域下
35 .run(function ($rootScope) {
36 $rootScope.$on('$routeChangeStart', function () {
37 console.log(this)
38 console.log(arguments)
39 })
40 })
往期文章
angular课堂笔记 第一天

js基础 定时器

js基础 IE6,7,8方法

js基础 高级浏览器

js基础 对应思想 排他思想

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/




回复

使用道具 举报