美文网首页
angularJs 路由

angularJs 路由

作者: 灿若星宸 | 来源:发表于2016-12-03 23:01 被阅读0次

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

要先安装 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 是指#后面的路径

相关文章

  • AngularJs 路由与多视图,ng-view指令和 UI-R

    AngularJs 路由与多视图 基于AngularJS入门与进阶(江荣波 著)这本书的笔记 AngularJS ...

  • AngularJS路由 1.6版本 自定义指令作用域

    AngularJS 路由 路由就是监听锚点的变化 AngularJS 1.6版本区别 请求数据返回结果时,能正确得...

  • AngularJs 嵌套路由(ui-router)

    AngularJs 嵌套路由(ui-router) //1.声明Angularjs 模块,把ui-router 传...

  • 模拟面试问题总结

    AngularJS路由实现原理 Angular路由 允许我们通过不同的URL访问不同的内容,并且Angular路由...

  • 模拟面试问题总结

    AngularJS路由实现原理 Angular路由 允许我们通过不同的URL访问不同的内容,并且Angular路由...

  • AngularJS 路由

    ng-route模块中的when()和ui-route的state()都提供了resolve属性。 先说路由的部分...

  • AngularJS路由

    本文是自己学习angularJS的第一篇总结,并不是一个step by step 的教程,而是将自己学习过程中有疑...

  • angularJs 路由

    设置好请求路径所展示的网页根据用户的请求路径,跳转到不同的页面 要先安装 angular-route 命令请看官网...

  • AngularJs路由

    一个应用是由若个视图组合而成的,根据不同的业务逻辑展示给用户不同的视图,路由则是实现这一功能的关键。 路由 在后端...

  • Cordova webapp实战开发(三)- AngularJS

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容。### 通过 AngularJS 可以实现多视...

网友评论

      本文标题:angularJs 路由

      本文链接:https://www.haomeiwen.com/subject/dqwcmttx.html