angularJs 路由

设置好请求路径所展示的网页
根据用户的请求路径,跳转到不同的页面

要先安装 angular-route

命令请看官网

demo

//使用ng官方提供的路由
//1.引包  把angular 和 angular-route 引进去
//2.创建模块同时添加依赖项ng-Route
//3.调用模块的config 方法,注入一个$routeProvider对象
//4.使用$routeProvider配置路由表
//5.以HTTP协议测试访问
angular.modular('DemoApp',['ng-Route']).config(['$routeProvider',function($routeProvider){
$routeprovider
  .when('/',{ 
      // 我们利用templateUrl 来写更多的标签
      //templateUrl:""
      template:'<h1>{{name}}</h1>',
      //页面不可能只有一个标签,所以我们添加一个控制器来管理
      controller:'IndexController'
})
  .when('/login',{
      template:'<h1>{{name}}</h1>',
      controller:'loginController'
})
  .when('/register',{
       template:'<h1>{{name}}</h1>',
       controller:'registerController'
})
}])



angular.moudle('DemoApp')
.controller('IndexController',['$scope',function($scope]){
  $scope.name='index'
 }])
 .controller('loginController',['$scope',function($scope]){
  $scope.name='login'
 }])
  .controller('registerController',['$scope',function($scope]){
  $scope.name='register'
 }])

关于测试

单页应用的url 是指#后面的路径

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 转自 http://blog.gejiawen.com/2015/12/15/routes-solution-on...
    文刂德光军阅读 5,136评论 0 2
  • 一个应用是由若个视图组合而成的,根据不同的业务逻辑展示给用户不同的视图,路由则是实现这一功能的关键。 路由 在后端...
    不要和我名字一样阅读 4,852评论 0 9
  • 1、首先我们要引进angular.js和angular-route.js文件 2、然后我们要在html中创建锚点和...
    Victor细节阅读 4,868评论 2 4
  • jQuery源码分析系列JS的模块化 最近在使用kendo ui的时候遇到一些问题,有一个需求是希望在打开LOV组...
    spilledyear阅读 4,707评论 0 3
  • 客人:“你们这杯可乐,色泽清淡,居然还是黄色的。完全没有一杯可乐应该有的气泡。气泡可是碳酸饮料的灵魂啊。还飘着热气...
    Ched的小本本阅读 1,693评论 0 0

友情链接更多精彩内容