angularjs 路由 $routeProvider

Angularjs路由描述:定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中。

主界面index.html

<!DOCTYPE html>

<html>

  <head></head>

  <body>

    <div ng-app="routeApp">

      <h3>路由</h3>

      <div ng-view></div><!--模板将添加到此div里面-->

    </div>

    <script src="js/angular.min.js"></script><!--加载angularJS库 -->

    <script src="js/app.js"></script><!--加载app.js 库,定义路由规则写在这里 -->

    <script src="js/main.js"></script><!-- 定义控制器-->

  </body>

</html>

定义路由规则app.js

  var routeApp=angular.module("routeApp",[]);

  routeApp.config(["$routeProvider",function($routeProvider){

    $routeProvider.when("/temp1",{

      templateUrl:temp1/template1.html,

      controller:"myCtrl1"

    })

    .when("temp2",{

      templateUrl:temp2/template2.html,

      controller:"myCtrl2"

    }).

    otherwise({

      redirectTo:"/temp1";

    });

  }]);

定义控制器 main.js

  routeApp.controller("myCtrl1",["$scope",function($scope){

    //code

  }])

  .controller("myCtrl2",["$scope",function($scope){

    //code

  }]);

定义模板 template1.html 、template2.html

  

时间: 2024-10-13 02:23:13

angularjs 路由 $routeProvider的相关文章

AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/

angularjs路由

需要引入angular.js,angular-ui-router.min.js <ul> <li><a href="#home">首页</a></li> <li><a href="#aboutUs">关于我们</a></li> <li><a href="#contactUs">联系我们</a></l

使用 AngularJS 开发一个大规模的单页应用(SPA)

本文的目标是基于单页面应用程序开发出拥有数百页的内容,包括认证,授权,会话状态等功能,可以支持上千个用户的企业级应用. 下载源代码 介绍 (SPA)这样一个名字里面蕴含着什么呢? 如果你是经典的Seinfeld电视秀的粉丝,那么你一定知道Donna Chang这个名字.Jerry跟Donna见面,Donna其实不是华人,但是却因在谈论其对中国的固有印象比如在针灸上的兴趣,以及偶然的一次单词发音带上了点儿中文口音,她将自己末尾的名字缩成了Chang Donna 在电话上同George的母亲交谈,(

Angular JS 学习之路由

1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/first/page,但在单页Web应用中AngularJS通过#+标记实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third 3.当我们点击以上的任意的一个链接时,向服务端请的地址都是一样的

angularjs笔记(三)

AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </hea

AngularJs的关于路由问题

初学AngularJs一些天,发现AngularJs到最后的时候会很难.刚刚开始的时候特别不容易适应,到中间的部分,还是比较简单,到最后的时候就发现特别难.我看到了网站上说到了AngularJs中,学习路线是比较奇怪的,有些诡异.我想想不知道是不是对的.今天我在学习AngularJs路由知识点的时候,遇到了一些问题,就是路由不到.以下是刚刚开始写的代码. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4

AngularJs多重视图和路由的使用

使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目,通常不变的都是头部,尾部和菜单部分,变化的都是右边的内容部分,使用AngularJs的多重视图和路由就可以很方便的实现这样的效果.在实现之前需要准备两个文件,一个是angular的主JS文件,另一个是angular的路由JS文件,如下: <script src="js/angular.min.

AngularJS 视图和路由

在AngularJS之后引用angular-route  路由   ngRoute模块加载声明 AngularJS提供的when和otherwise两个方法来定义应用的路由 otherwise方法会在没有任何路由匹配时被调用,我们用它设置了一个默认跳转到'/'路径的路由 ng-view是一个优先级为 1000的终极指令. AngularJS不会运行同一个元素上的低优先级指令 每次触发$routeChangeSuccess事件,视图都会更新. 如果某个模板同当前的路由相关联:创建一个新的作用域:移

angularjs $routeProvider template 函数及参数解惑

在angularjs官方文档关于$routeProvider的配置中,对template和templateUrl的配置有这么一段话 if it is a function, it will be called with the following parameters: {Array.<Object>} - route parameters extracted from the current$location.path() by applying the current route 读起来相