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'})
})