angular之两种路由

安装angular

npm install -g @angular/cli

ng new myapp

ng g component componentName

自带路由

引入：angular-route.js

<div ng-controller='ctr1'>
    <a href='#home'>首页</a>

    <a href='#mine'>我的</a>

   <div ng-view></div>
<div>

angular.module('myapp',['ngRoute'])
.config(['$routerProvider','localProvider',function($routerProvider,$localProvider){
   $localProvider.hashPrefix('')
   $routerProvider
   .when(
      '/home',{
      templateUrl:'home.html',
      controller:'ctr1'
   })
   .when( 
      '/mine',{
      templateUrl:'mine.html',
      controller:function($scope){
        $scope.name='little-rabbit'
      },
   }])
   otherwise({redirectTo:'/home'});
})

UI.route路由

<div ng-controller='ctr1'>
    <a ui-sref='#home'></a>

    <a ui-sref='#list'></a>

    <div ui-view></div>
 <div>

angular.module('myapp',['ui.route','angularCSS'])
.config(function($stateProvider,$urlRouterProvider){
     $urlRouterProvider.otherwise('home.html')
     $stateProvider
     .state(
          'home',{
           url:'/home',
           templateUrl:'home/home.html',
           css:'home/home.css'
    })
    .state(
          name:'list', 
          url:'/list',
          templateUrl:'list/list.html',
          css:'list/list.css'
    })
})