• angular ng-route和ui-route


    在angular中他的自带路由是 ng-route.但是它的缺点很大,其中单个视图是最致命的一点。

    所有我们可以使用第三方路由 ui-route。它主要针对多视图的嵌套。

    ng-route

    js

    var app=angular.module('App',['ngRoute']);  
      app.config(function($routeProvider){  
          $routeProvider  
          .when('/', {  
            templateUrl: 'views/login.html'
          })  
          .when('/1', {  
            templateUrl: 'views/regist.html'
          })  
          .otherwise({  
            redirectTo: '/'  
          });  
            
      });  

    html

    <script src='angular-route.js'></script>//引入
    <div ng-view=''></div>//html 插入

    ui.route

    js

    var app=angular.module('birthdayApp',['ui.router']);  
    app.config(function($stateProvider,$urlRouterProvider){  
        $urlRouterProvider.otherwise('/');  
        $stateProvider  
        .state('1', {  
        url: "/1",  
        views: {  
           'view': {  
            templateUrl: 'views/login.html',  
            controller: 'loginCtr'  
           }  
        }  
       });  
       $stateProvider  
        .state('2', {  
        url: "/2",  
        views: {  
           'view': {  
            templateUrl: 'views/regist.html',  
            controller: 'registCtr'  
           }  
        }  
       });  
    });  

    html

    <script src='angular-ui-router.js'></script>  
    <div ui-view="view"></div>  
  • 相关阅读:
    第六章 实验报告(函数与宏定义)
    第三次实验报告
    第五章 循环结构课后反思
    第二次实验报告
    第一次实验报告
    第一次作业
    第九章 结构体与共用体
    第八章 指针实验
    第7章 数组实验
    第六章 函数和宏定义实验(2)
  • 原文地址:https://www.cnblogs.com/UniverseWang/p/7078101.html
Copyright © 2020-2023  润新知