Angular学习笔记（2）

时间 2019-12-01

原文原文链接

AngularJS 路由

AngularJS 路由容许咱们经过不一样的 URL 访问不一样的内容。css

经过 AngularJS 能够实现多视图的单页 Web 应用（single page web application，SPA）。
一般咱们的URL 形式为 http://runoob.com/first/page，但在单页 Web 应用中 AngularJS 经过 #! + 标记实现，html

例如：web

http://runoob.com/#!/first
http://runoob.com/#!/second
http://runoob.com/#!/third  注意 Angular1.6 以前的版本是经过 # + 标记 实现路由。

当咱们点击以上的任意一个连接时，向服务端请的地址都是同样的 (http://runoob.com/)。由于 #!号以后的内容在向服务端请求时会被浏览器忽略掉。因此咱们就须要在客户端实现 #! 号后面内容的功能实现。 AngularJS 路由就经过 #! + 标记帮助咱们区分不一样的逻辑页面并将不一样的页面绑定到对应的控制器上。浏览器

实例：app

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 菜鸟教程</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app='routingDemoApp'>
 
    <h2>AngularJS 路由应用</h2>
    <ul>
        <li><a href="#!/">首页</a></li>
        <li><a href="#!/computers">电脑</a></li>
        <li><a href="#!/printers">打印机</a></li>
        <li><a href="#!/blabla">其余</a></li>
    </ul>
     
    <div ng-view></div>
    <script>
        angular.module('routingDemoApp',['ngRoute'])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider
            .when('/',{template:'这是首页页面'})
            .when('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{template:'这是打印机页面'})
            .otherwise({redirectTo:'/'});
        }]);
    </script>
</body>
</html>

实例解析：ide

一、载入了实现路由的 js 文件：angular-route.js。函数
二、包含了 ngRoute 模块做为主应用模块的依赖模块。spa

angular.module(‘routingDemoApp’,[‘ngRoute’])code
三、使用 ngView 指令。cdn

<div ng-view></div>

该 div 内的 HTML 内容会根据路由的变化而变化。

四、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

module.config([‘

AngularJS 模块的 config 函数用于配置路由规则。

经过使用configAPI，咱们请求把**