- <!DOCTYPE html>
- <html lang="en" ng-app="App">
- <head>
- <meta charset="UTF-8">
- <title>AngularJS 路由-参数,模块配置,布局模板</title>
- <style>
- body {
- padding: 0;
- margin: 0;
- background-color: #F7F7F7;
- font-family: Arial;
- }
- .wrapper {
- max-width: 980px;
- margin: 50px auto;
- }
- ul {
- padding: 0;
- margin: 0;
- overflow: hidden;
- list-style: none;
- background-color: #000;
- border-radius: 4px;
- }
- li {
- float: left;
- width: 120px;
- height: 40px;
- text-align: center;
- line-height: 40px;
- font-size: 18px;
- }
- li.active {
- background-color: #333;
- }
- li a {
- display: block;
- color: #FFF;
- text-decoration: none;
- }
- .content {
- margin-top: 30px;
- font-size: 24px;
- padding: 0 20px;
- }
- </style>
- </head>
- <!--
- 路由:
- 一个应用是由若个视图组合而成的,根据不同的业务逻辑展示给用户不同的视图 ,路由则是实现这一功能的关键.
- 在后端开发中通过URL地址可以实现页面(视图)的切换,但是AngularJS是一个纯前端MVC框架,
- 在开发单页面应用时,所有功能都在同一页面完成,所以无需切换URL地址(即不允许产生跳转),
- 但Web应用中又经常通过链接(a标签)来更新页面(视图),当点击链接时还要阻止其向服务器发起请求,
- 通过锚点(页内跳转)可以实现这一点。
- 路由参数:
- 1、提供两个方法匹配路由,分别是when和otherwise,when方法需要两个参数,
- otherwise方法做为when方法的补充只需要一个参数,其中when方法可以被多次调用。
- 2、第1个参数是一个字符串,代表当前URL中的hash值。
- 3、第2个参数是一个对象,配置当前路由的参数,如视图、控制器等。
- a、template 字符串形式的视图模板
- b、templateUrl 引入外部视图模板
- c、controller 视图模板所属的控制器
- d、redirectTo跳转到其它路由
- 4、获取参数,在控制中注入$routeParams可以获取传递的参数
- SPA:(Single Page Application)指的是通单一页面展示所有功能,
- 通过Ajax动态获取数据然后进行实时渲染, 结合CSS3动画模仿原生App交互,
- 然后再进行打包(使用工具把Web应用包一个壳, 这个壳本质上是浏览器)变成一个“原生”应用。
- 在PC端也有广泛的应用,通常情况下使用Ajax异步请求数据,然后实现内容局部刷新,
- 局部刷新的本质是动态生成DOM,新生成的DOM元素并没有真实存在于文档中,
- 所以当再次刷新页面时新添加的DOM元素会“丢失”,通过单页面应可以很好的解决这个问题
- SPA(单页面应用条件):
- 1、只有一页面
- 2、链接使用锚点
- hashchange:
- AngularJs实现单一页面可以通过hashchange事件监听到锚点的变化,
- 进而可以实现为不同的锚点准备不同的视图,单页面应用就是基于这一原理实现的。
- AngularJS对这一实现原理进行了封装,将锚点的变化封装成路由(Route),这是与后端路由的根本区别。
- -->
- <body>
- <div class="wrapper">
- <!-- 导航菜单 -->
- <ul>
- <li class="active">
- <a href="#/index">Index</a>
- </li>
- <li>
- <a href="#/introduce">Introduce</a>
- </li>
- <li>
- <a href="#/contact">Contact Us</a>
- </li>
- <li>
- <a href="#/list">List</a>
- </li>
- </ul>
- <!-- 内容 -->
- <div class="content">
- <!--4 布局模板 占位符 -->
- <div ng-view></div>
- </div>
- </div>
- <!-- AngularJS核心框架 -->
- <script src="./libs/angular.min.js"></script>
- <!-- 1 路由模块理解成插件 -->
- <script src="./libs/angular-route.js"></script>
- <script>
- //2 实例化模块(App)时,当成依赖传进去(模块名称叫ngRoute)
- var App = angular.module('App', ['ngRoute']);
- //3 配置路由模块,使其正常工作
- App.config(['$routeProvider', function ($routeProvider) {
- $routeProvider.when('/index', {
- // template: '<h1>index Pages!</h1>',
- templateUrl: './abc.html'
- })
- .when('/introduce', {
- template: '<h1>introduce Pages!</h1>'
- })
- .when('/contact', {
- // template: '<h1>contact US Pages!</h1>',
- templateUrl: './contact.html',
- controller: 'ContactController' // 定义控制器
- })
- .when('/list', {
- templateUrl: './list.html', // 视图模板
- controller: 'ListController' // 定义控制器
- })
- .otherwise({
- redirectTo: '/index'
- });
- }]);
- // 列表控制器
- App.controller('ListController', ['$scope', '$http', function ($scope, $http) {
- // 模型数据
- // $scope.items = ['html', 'css', 'js'];
- $http({
- url: 'xxx.php',
- }).success(function (info) {
- $scope.items = info; //php 返回值['html', 'css', 'js'];
- });
- }]);
- App.controller('ContactController', ['$scope', '$http', function ($scope, $http) {
- $http({
- url: 'contact.php'
- }).success(function (info) {
- $scope.content = info;
- });
- }]);
- </script>
- </body>
- </html>
AngularJS 路由以及模块配置
最新推荐文章于 2020-06-10 00:11:10 发布