Angular路由使用
1.什么是路由机制?
AngularJS是协助搭建单页面工程的前端开源框架, 它通过MVC模式使得开发与测试变得更容易;
AngularJS路由机制的思想?
1. 通常网页中的 header和footer是不需要改变的;也就是说在不同的页面中会看到相同的header和footer.
2. 相同的部分不需要每次都进行加载;
3. 路由机制的实现:(变化部分)
在页面内通过[#/页面名称], 映射到访问正文内容页面, 基于Ajax方式将变化的内容加载后,显示到指定的区域.
2.AngularJS案例
1. 在项目中引入 angular-route.js;
2. 编写页面布局, 将AngularJS加载变化部分div, 指定ng-view;
3. 编写Angular 路由配置 routeProvider.
最后, 要把ngRoute模块在我们的应用中当作依赖加载进去.
angular.module("myApp", ['ngRoute']);
<body ng-app="myApp">
<div>
<h1>header</h1>
<a href="#/JavaEE">JaveEE</a>
<a href="#/ios">ios</a>
<a href="#/Android">Android</a>
</div>
<div ng-view>
</div>
<div>
<h1>footer</h1>
</div>
<script type="text/javascript">
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(["$routeProvider", function(){
$routeProvicer
.when("/JavaEE", {
templateURL: "javaee.html"
}).when("/ios", {
templateURL: "ios.html
}).when("/Android", {
templateURL: "Android.html
}).otherwise({
redirectTo : "javaee.html"
});
}]);
</script>
</body>