AngularJS路由以及模块配置

来源：互联网发布：制作发光字软件编辑：程序博客网时间：2024/05/22 10:33
<!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>
0 0