AngularJS路由以及模块配置
2017-02-15 20:41
477 查看
<!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 路由以及模块配置
- AngularJS 路由以及模块配置
- angularjs路由配置$route以及案例展示
- AngularJs-MVC之路由、模块以及依赖注入
- AngularJs-MVC之路由、模块以及依赖注入
- Android业务组件化之子模块SubModule的拆分以及它们之间的路由Router实现
- 一、nginx基本模块以及模块配置
- win8系统安装vs2010配置opencv2.4.9以及模块计算机类型“x64”与目标计算机类型“X86”冲突问题解决
- VS2010嵌入汇编模块前基本配置以及一个小例子程序
- ThinkPHP内容管理系统开发日记(四)-- 配置信息与开发Longin模块以及模板
- Ubuntu server的网络配置,静态IP地址、默认路由以及dns等网络参数配置命令
- Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题
- 龙芯3B处理器—地址映射以及路由地址分布与配置
- Linux下的IPv6地址、路由以及隧道配置
- 搭建rtmp直播流服务之1:使用nginx搭建rtmp直播流服务器(nginx-rtmp模块的安装以及rtmp直播流配置)
- angularjs获取前一个网页以及现网页网址的路由信息
- 深入了解前端路由的实现机制以及angularjs-route-ui的使用
- QX项目实战-2.模块分类以及配置读取
- AngularJS的路由、模块、依赖注入
- Linux下的IPv6地址、路由以及隧道配置